在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.$http.request({
    //向下面的地址发送get请求
    url:'http://127.0.0.1:8000/courses/',
    method:'get'
  }).then(function (response) {
    //response.data才是真正的数据
    console.log(response.data)
  })

-页面挂载完成,执行后面函数,完成数据加载