在pycharm中开发vue的⽅法步骤⼀.在pycharm中开发vue
'''
webstorm(vue) pycharm(python) goland(Go语⾔) idea(java) andrioStuidio(安卓) Php(PHP)
'''
'''
①在pycharm中打开vue项⽬，在settins下Plugins中下载vue.js
②启动vue项⽬
-⽅法1.在Terminal下输⼊npm run serve
-⽅法2.Edit Configurations----》点+ 选npm-----》在script对应的框中写：serve
'''
⼆.vue项⽬的⽬录结构
-
node_modules：项⽬的依赖
-public
-favicon.ico ⽹页的图标
-index.html  主页⾯
-src：我们需要关注的
-assets：⽅静态⽂件
-components：⼩组件
-views ：页⾯组件
-App.vue ：主组件
-main.js ：项⽬主⼊⼝js
-router.js：路由相关，以后配置路由，都在这⾥配置
-
store.js ：vuex相关，状态管理器
-package.json  项⽬的依赖⽂件
三.每个vue组件由三部分组成
template：放html代码
script：放js相关的东西
style：放css相关
四.vue中路由的创建
①在src下views⽂件夹中创建⼀个组件 FreeCourse.vue
②配置路由
在src下router.js中配置
import FreeCourse from './views/FreeCourse.vue'
{
path: '/freecourse',
name: 'freecourse',
component: FreeCourse
},
③路由跳转
在src下APP.vue中配置
<router-link to="/freecourse">免费课程</router-link>
五.在组件中显⽰数据
①在template中:
<div class="course">
{{course_list}}
</div>
②在script中:
export default {
name: 'course',
data: function () {
return{
course_list:['python','linux','go语⾔']
}
}
}
六.vue中的axios完成前后台交互
-安装
npm install axios 在package.json⽂件中就能看到依赖-在main.js中配置
//导⼊ axios
import axios from 'axios'
//把axios对象赋给$http
Vue.prototype.$http=axios
//以后在组件的js中通过$http取到的就是axios
-在组件的js代码中写:
this.$quest({
//向下⾯的地址发送get请求
url:'127.0.0.1:8000/courses/',
method:'get'
}).then(function (response) {
//response.data才是真正的数据
console.log(response.data)
})
-页⾯挂载完成，执⾏后⾯函数，完成数据加载
mounted:function () {
this.init()
}
组件
<template>
<div class="course">
<h1>我是免费课程页⾯</h1>
<p v-for="course in course_list">{{course}}</p>
</div>
</template>
<script>
export default {
name: 'course',
data: function () {
return{
course_list:[]
}
},
methods: {
'init':function () {
var _this = this;
this.$quest({
//向下⾯的地址发送get请求
url:'127.0.0.1:8000/courses/',
method:'get'
}).then(function (response) {
/
/response.data才是真正的数据
_urse_list = response.data
})
}
} ,
mounted:function () {
this.init()
}
}
</script>
七.vue中使⽤element-ui
-
饿了么开源样式
-安装 npm i element-ui -S
-在main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
⼋.contentype组件(数据库相关)
什么时候使⽤?
实际项⽬中有⼀个表(PricePolicy)要关联好⼏个表(Course,DegreeCourse)也就是这个表要储存好⼏个表的数据，这种情况使⽤contentype组件
-新建免费课程表的时候 Course
# 不会在数据库中⽣成字段，只⽤于数据库操作
policy = GenericRelation(to='PricePolicy')
-新建学位课程表的时候 DegreeCourse
# 不会在数据库中⽣成字段，只⽤于数据库操作
policy = GenericRelation(to='PricePolicy')
-价格策略表 PricePolicy
#之前有的字段该怎么写就怎么写
object_id = models.IntegerField()
content_type = models.ForeignKey(to=ContenType,null=True)
# 引⼊⼀个字段，不会在数据库中创建，只⽤来做数据库操作
content_obj = GenericForeignKey()
使⽤⼀（给课程添加价格策略）：
-
给免费课django添加价格策略pycharm安装教程和使用
course = models.(pk=1)
ret=models.ate(period=30, price=199.9,content_obj=course)
-给学位课程（python全栈开发）添加价格策略
degree_course = models.(pk=1)
ret=models.ate(period=30, price=199.9,content_obj=degree_course)
使⽤⼆：查询价格策略对应的课程：
price_policy=models.(pk=1)
print(t_obj)
使⽤三：通过课程获取价格策略
course = models.(pk=1)
policy_list=course.policy.all()
到此这篇关于在pycharm中开发vue的⽅法步骤的⽂章就介绍到这了，更多相关pycharm开发vue内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。