Vue.js 在Visual Studio Code中启动

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

 

第一步：在src目录下新建一个专门存放router的index.js文件
里面的内容为：

import Vue from 'vue'//注：这句必须要有，虽然在main.js里面已经引入过Vue，但是这里不要这句的话，就直接报错了Vue is not defined
import Router from 'vue-router'
import GuoduLogin from '@/components/manage/GuoduLogin.vue'
import GuoduIndex from '@/components/home/GuoduIndex.vue'


Vue.use(Router)

export default new Router({
  routes: [//注：此处的方法名，记住这里是routes,不是routers，没有r，要是写成routers，控制台不会报错，就是渲染不出组件来，牢记啊！不然会让人崩溃的
      {
        path:'/',
        redirect:'/login'
      },
      {
        path:'/index',
        name:'GuoduIndex',
        component:GuoduIndex//注：此处容易跟着代码提示一不小心写成components,要注意，控制台报错TypeError: Cannot read property '$createElement' of undefined
      },
      {
        path:'/manage',
        redirect:'/login'
      },
      {
        path:'/login',
        name:'GuoduLogin',
        component:GuoduLogin
      }
  ]
})

第二步：然后在main.js里面的内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//import后面的router只能写成router,且首字母大写都不行，不然在下面new Vue里面注入的时候控制台会报错Cannot read property 'matched' 　　　　　　　　　　　　　　　　　　　　　of undefined，为什么会这样，目前我也不太清楚，还望大佬指点

var axios = require('axios');
axios.defaults.baseURL = 'http://localhost:8443/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  //记得在这里注入引入的router
  components: { App },
  template: ''
})

第三步：
在项目入口文件app.vue里面加上 //不加的话控制台不报错，但是组件始终渲染不出来，以前不熟悉的时候忘了在这里写上视图容器反正纠结过很久

不从这里启动：

 ，

从这里启动 在这个窗口输入：npm run dev