CLI是什么意思？

• CLI是Command-Line Interface,翻译为命令行界面，但是俗称脚手架
• Vue CLI是一个官方发布vue.js项目脚手架
• 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

 Vue CLI使用前提 - Node

什么是NPM呢？

• NPM的全程是Node Package Manager
• 是一个NODEJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准
• 后续我们会经常使用NPM来安装一些开发过程中依赖包

VueCLI3目录结构

安装和使用vue-router

步骤一：安装vue-router

npm install vue-router --save

步骤二：在模块化工程中使用它（因为时一个插件，所以可以通过Vue.use()来安装路由功能）

• 第一步：导入路由对象，并且调用Vue.use(VueRouter)
• 第二步：创建路由实例，并且传入路由映射配置
• 第三步：在Vue实例中挂载创建的路由实例

认识路由镶嵌

镶嵌路由实一个很常见的功能

• 比如在home页面中，我们希望通过/home/news和/home/message访问一些内容
• 一个路径映射一个组件，访问者两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤：

1. 创建对应的子组件，并且在路由映射中配置对应的子路由
2. 在组件内部使用<router-view>标签

传递参数的方式

传递参数主要有两种类型：params和query

params的类型：

• 配置路由格式：/router/:id
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123,/router/abc

query的类型：

• 配置路由格式：/router,也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/router?id=123,/router?id=abc