Vue全家桶：
（1）Vue基础
（2）VueRouter
（3）VueX
下面是一个路由示例：
Document 首页 家园
1. Vue全家桶
Vue + VueRouter + VueX 2. VueRouter https://router.vuejs.org/zh/ 基本使用 1. 必须导入vue-router.js文件 2. 要有VueRouter()实例 3. 要把VueRouter实例挂载到Vue实例中 4. 路由的入口 <router-link to='/index'>index页面</router-link> 5. 路由的出口 <router-view></router-view> 2. 路由的参数 1. path: '/user/:name' --> 匹配路由 $route.params.name --> 取值 2. /user/alex?age=9000 --> url中携带参数 $route.query.age --> 取出url的参数 3. 子路由children:[{path: '',component: {template: `...` } }]
路由的第二种定义方式：path 也可以 写成：path = '/index/:name?age=10' name可以用来匹配 视图中的<router-link to = '/index/zsq'>赵世奇</router-link>,同时也可以带参数
使用方法：template:`<div>user{ {$router.params.name}}</div>`
参数使用方法：<p>{
{$router.query.age}}</p> #取到age的值
定义子路由
注意不要忘记加上append这个参数
3. vue-cli 进行vue开发的脚手架工具
1. 安装vue-cli 工具 npm install vue-cli -g --> 全局安装vue init webpack 项目名 // 初始化一个vue项目
详细步骤：
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project $ vue init webpack test //输入命令 ? Project name (test) test ? Project name test ? Project description (A Vue.js project) 测试项目 ? Project description 测试项目 ? Author lxx1024 ? Author lxx1024 ? Vue build standalone ? Install vue-router? (Y/n) Y //安装路由 ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n //Eslint验证,很严谨,所以选择n ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? (Y/n) Y ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? (Y/n) Y ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "test" . To get started: cd test npm install npm run dev Documentation can be found at https: //vuejs-templates.github.io/webpack # 安装依赖，走你 $ cd my-project npm run dev 常见错误：
如果运行时，出现一下错误：
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
解决方法：
（1）npm cache clean --force # 强制清除缓存
（2）npm install --registry=https://registry.npm.taobao.org 安装淘宝镜像
（3）npm install webpack-dev-server -g 全局安装webpack开发服务包
（4）npm run dev # 运行程序