在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
'''

-node_modules：项目的依赖

-public
  -favicon.ico 网页的图标
  -index.html  主页面
-src：我们需要关注的
  -assets：方静态文件
  -components：小组件
  -views ：页面组件
  -App.vue ：主组件
  -main.js ：项目主入口js
  -router.js： 路由相关，以后配置路由，都在这里配置
  -store.js ：vuex相关，状态管理器

-package.json  项目的依赖文件

  import FreeCourse from './views/FreeCourse.vue'
  
  {
   path: '/freecourse',
   name: 'freecourse',
   component: FreeCourse
  },

<router-link to="/freecourse">免费课程</router-link>

<div class="course">
  {{course_list}}
</div>

export default {
 name: 'course',
 data: function () {
   return{
    course_list:['python','linux','go语言']
   }
 }
}

  //导入 axios
  import axios from 'axios'
  //把axios对象赋给$http
  Vue.prototype.$http=axios
  //以后在组件的js中通过$http取到的就是axios

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

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);