vue-cli(一)

前提准备:
1.电脑中要有npm(javascript 包管理工具)
2.切换npm到淘宝镜像源
正文:
1.全局安装vue-cli 服务 cnpm install -g @vue/cli-service-global
2.通过vue创建原始目录 vue create dirName
3.可以通过npm run server 启动服务。由于我喜欢通过 npm run dev 启动服务。打开package.json 修改
"scripts": {
    "server": "vue-cli-service serve",
  } => 
"scripts": {
    "dev": "vue-cli-service serve --open",
  }
--open 会自动打开浏览器页面
4.创建vue.config.js 添加别名,创建/template目录
const path = require('path');
const resolve = dir => {
    return path.join(__dirname, dir)
}
module.exports = {
    chainWebpack: config => {
      config.resolve.alias.set('@',resolve('template'));
    },
}
有了别名 就可以通过 @/templateName使用模板
6.安装vue-router
cnpm install vue-router --sava
创建/router/RouteList.js 路由文件
import Main from '@/mainlayout.vue';
export default {
    mode: 'history',
    routes: [
        { path: '/',name:'main', component:Main,
        children:[
            {path:'/index',name:'index',component: ()=>import('@/index.vue'),meta:{cache:true}},
            {path:'/admin',name:'admin',component: ()=>import('@/admin.vue'),meta:{cache:true}}
        ]
        },
        { path: '*',component: () => import('@/notFound.vue')}
]
}
去/template 创建对应的vue文件。。
修改src/App.vue=>
<template>
<div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>
 打开src/main.js 添加
import Router from 'vue-router'
import RouteList from './router'
const router = new Router(RouteList);
new Vue({
  router,//将router 加到这里
  render: h => h(App),
}).$mount('#app')