Vue-cli
cli配置
**一、安装vue-cli**
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node，我这里的npm版本为3.10.10。如果该命令不可以使用，需要安装node软件包，根据你的系统版本选择下载安装就可以了。
下载地址：http://nodejs.cn/download/
npm没有问题，接下来我们可以用npm 命令安装vue-cli了，在命令行输入下面的命令：
``` js npm install vue-cli -g ```
-g :代表全局安装。如果你安装时报错，一般是网络问题，你可以尝试用cnpm来进行安装。安装完成后，可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是2.8.1.
如果vue -V的命令管用了，说明已经顺利的把vue-cli安装到我们的计算机里了。
**二、初始化项目**
我们用vue init命令来初始化项目，具体看一下这条命令的使用方法。
> $ vue init
init：表示我要用vue-cli来初始化项目
：表示模板名称，vue-cli官方为我们提供了5种模板，
webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。
：标识项目名称，这个你可以根据自己的项目来起名字。
在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：
> vue init webpack vuecliTest
输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。
- Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest - Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。 - Author：作者，如果你有配置git的作者，他会读取。 - Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y - Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。 - setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。 - Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
命令行出现上面的文字，说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。
1、cd vuecliTest 进入我们的vue项目目录。
2、npm install 安装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装。
3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。
出现这个页面，说明我们的初始化已经成功，现在可以快乐的玩耍了。 package.json vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构讲起。
Ps：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。
重要文件讲解：
### package.json
package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。
**package.json 里的scripts字段**，这个字段定义了你可以用npm运行的命令。在开发环境下，在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js .也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写。
| | "scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" }, | | ---- | ------------------------------------------------------------ | | | |
**dependencies字段和devDependencies字段**
- dependencies字段指项目运行时所依赖的模块； - devDependencies字段指定了项目开发时所依赖的模块；
在命令行中运行npm install命令，会自动安装dependencies和devDempendencies字段中的模块。package.json还有很多相关配置，如果你想全面了解，可以专门去百度学习一下。
### webpack配置相关
我们在上面说了运行npm run dev 就相当于执行了node build/dev-server.js,说明这个文件相当重要，先来熟悉一下它。 我贴出代码并给出重要的解释。
#### dev-server.js
``` js
```
#### webpack.base.confg.js webpack的基础配置文件
``` js ......module.export = { // 编译入口文件 entry: {}, // 编译输出路径 output: {}, // 一些解决方案配置 resolve: {}, resolveLoader: {}, module: { // 各种不同类型文件加载器配置 loaders: { ... ... // js文件用babel转码 { test: /.js$/, loader: 'babel', include: projectRoot, // 哪些文件不需要转码 exclude: /node_modules/ }, ... ... } }, // vue文件一些相关配置 vue: {}} ```
这里有很多webpack的知识，我也有一个专门讲webpack的视频教程，你可以去看一看《[跟技术胖学webpack视频教程](http://jspang.com/2016/11/24/webpack/)》。
### .babelrc
Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码。如果你想了解更多，可以查看babel的知识。
``` js { //设定转码规则 "presets": [ ["env", { "modules": false }], "stage-2" ], //转码用的插件 "plugins": ["transform-runtime"], "comments": false, //对BABEL_ENV或者NODE_ENV指定的不同的环境变量，进行不同的编译操作 "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } } ```
### .editorconfig
该文件定义项目的编码规范，编译器的行为会与.editorconfig文件中定义的一致，并且其优先级比编译器自身的设置要高，这在多人合作开发项目时十分有用而且必要。
``` js root = true [*] // 对所有文件应用下面的规则 charset = utf-8 // 编码规则用 utf-8indent_style = space // 缩进用空格 indent_size = 2 // 缩进数量为2个空格 end_of_line = lf // 换行符格式 insert_final_newline = true // 是否在文件的最后插入一个空行 trim_trailing_whitespace = true // 是否删除行尾的空格 ```
这是比较重要的关于vue-cli的配置文件，当然还有很多文件，我们会在以后的文章中讲解。 vue-router ### 安装vue-router
vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
npm install vue-router --save-dev
如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。
### 解读router/index.js文件
我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。
``` js import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello //对应的组件模板 } ] }) ```
上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。
### 增加一个Hi的路由和页面
对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面，先来看一下我们希望得到的效果。
看到了效果，我们看一下具体的操作步骤：
- 在src/components目录下，新建 Hi.vue 文件。 - 编写文件内容，和我们之前讲过的一样，文件要包括三个部分 ```
引入 Hi组件：我们在router/index.js文件的上边引入Hi组件
```js import Hi from '@/components/Hi' ```
增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。
```js { path:'/hi', name:'Hi', component:Hi } ```
通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看，贴出现在的路由配置文件:
```js import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 import Hi from '@/components/Hi' Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello //对应的组件模板 },{ path:'/hi', name:'Hi', component:Hi } ] }) ```
### router-link制作导航
现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要标签，我们先来看一下它的语法。
```html[显示字段]
```
- **to：**是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ， - **[显示字段] ：**就是我们要显示给用户的导航名称，比如首页 新闻页。
明白了router-link的基本语法，我们在 src/App.vue文件中的template里加入下面代码，实现导航
```html
现在我们访问页面，发现已经多出了导航。
总结：这节课我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用标签设置导航。
router2
我们上节课初步了解Vue-router的初步知识，也学会了基本的跳转，那我们这节课学习一下子菜单的路由方式，也叫子路由。子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。我们接着第一节课的实例，在Hi页面的下面新建两个子页面，分别是 “Hi页面1” 和 “Hi页面2”，来实现子路由。
### 一、改造App.vue的导航代码
我们需要先改造app.vue的导航代码，来实现基本的导航功能。我们用标签增加了两个新的导航链接。
#### App.vue代码
```html
这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航：Hi页面1 和 Hi页面2
### 二、改写components/Hi.vue页面
把Hi.vue改成一个通用的模板，加入标签，给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面，有点想继承关系。我们在“Hi页面”里加入标签。
#### components/Hi.vue,就是第5行的代码，其他代码不变。
```html
### 三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue
新建的模板和Hi.vue没有太多的差别，知识改变了data中message的值，也就是输出的结果不太一样了。
Hi1.vue
```html
```
Hi2.vue
```html
```
### 四、修改router/index.js代码
我们现在导航有了，母模板和子模板也有了，只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。
```js children:[ {path:'/',component:xxx}, {path:'xx',component:xxx}, ] ```
children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。具体看一下这个子路由的配置写法。
```js import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Hi from '@/components/Hi' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello },{ path:'/hi', component:Hi, children:[ {path:'/',component:Hi}, {path:'hi1',component:Hi1}, {path:'hi2',component:Hi2}, ] } ] }) ```
需要注意的是，在配置路由文件前，需要先用import引入Hi1和Hi2。
### 总结：
这节课学的内容在路由配置里经常用到，比如我们作一个购物模块，购物模块里有很多相同的元素，我们就会利用这种子路由的形式，先定一个父页面，然后再修改子页面。
router3 开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。
### 一、用name传递参数
前两节课一直出现name的选项，但是我们都没有讲，这节课我们讲name的一种作用，传递参数。接着上节课的程序继续编写。
两步完成用name传值并显示在模板里：
1. 在路由文件src/router/index.js里配置name属性。
```js routes: [ { path: '/', name: 'Hello', component: Hello } ] ```
2. 模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：
```html
### 二、通过 标签中的to传参
也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：
```htmlvalueString
```
这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.
- name：就是我们在路由配置文件中起的name值。 - params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
了解基本的语法后，我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。
```htmlHi页面1
```
把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.
```js { path:'/hi1', name:'hi1', component:Hi1 }, ```
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
```js {{$route.params.username}} ```
总结：今天我们学习了两种传参的方法，一般会使用第二种方法。我们通过学习也知道了name的用途，一种作用是传参，一种作用是在传参时起到名称作用。传参的操作在实际开发中是基本的需求 router4
## 单页面多路由区域操作
这节课我们讲“**单页面多路由区域操作**”，实际需求是这样的，在一个页面里我们有2个以上区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在下面新写了两行标签,并加入了些CSS样式。
```html
```
现在的页面中有了三个标签，也就是说我们需要在路由里配置这三个区域，配置主要是在components字段里进行。
```jsx import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) export default new Router({ routes: [ { path: '/', components: { default:Hello, left:Hi1, right:Hi2 } },{ path: '/Hi', components: { default:Hello, left:Hi2, right:Hi1 } } ] }) ```
上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是’/Hi’.在两个路径下的components里面，我们对三个区域都定义了显示内容。
定义好后，我们需要在component文件夹下，新建Hi1.vue和Hi2.vue页面就可以了。
Hi1.vue
```jsx
```
Hi2.vue
```jsx
```
最后在App.vue中配置我们的就可以了
```html首页 |
Hi页面 |
```
router5 ## vue-router 利用url传递参数
我们在第3节虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。
### :冒号的形式传递参数
我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
```js { path:'/params/:newsId/:newsTitle', component:Params } ```
我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
2. 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
```jsx
```
3. 在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。
```htmlparams |
```
我们已经实现了以url方式进行传值，这在实际开发中经常使用，必须完全了解。我希望你看完视频后或者学完文章后能多练习两边，并在实际项目中充分使用。
### 正则表达式在URL传值中的应用
上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。
加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。
```js path:'/params/:newsId(\\d+)/:newsTitle', ```
加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。 router6 ## vue-router 的重定向-redirect
开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
### redirect基本重定向
我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。
```js export default new Router({ routes: [ { path: '/', component: Hello },{ path:'/params/:newsId(\\d+)/:newsTitle', component:Params },{ path:'/goback', redirect:'/' } ] }) ```
这里我们设置了goback路由，但是它并没有配置任何component（组件），而是直接redirect到path:’/’下了，这就是一个简单的重新定向。
### 重定向时传递参数
我们已经学会了通过url来传递参数，那我们重定向时如果也需要传递参数怎么办？其实vue也已经为我们设置好了，我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕，我们来看一段代码：
```js { path:'/params/:newsId(\\d+)/:newsTitle', component:Params },{ path:'/goParams/:newsId(\\d+)/:newsTitle', redirect:'/params/:newsId(\\d+)/:newsTitle' } ```
已经有了一个params路由配置，我们在设置一个goParams的路由重定向，并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。
使用alias别名的形式，我们也可以实现类似重定向的效果。
1.首先我们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，jspang。
```js { path: '/hi1', component: Hi1, alias:'/jspang' } ```
2.配置我们的，起过别名之后，可以直接使用标签里的to属性，进行重新定向。
```jsxjspang
```
### redirect和alias的区别
- redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。 - alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了中的内容。
**填个小坑：**
别名请不要用在path为’/’中，如下代码的别名是不起作用的。
```js { path: '/', component: Hello, alias:'/home' } ```
## 路由的过渡动画
在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。
###标签
想让路由有过渡动画，需要在标签的外部添加标签，标签还需要一个name属性。
```jsx
```
我们在/src/App.vue文件里添加了标签，并给标签起了一个名字叫fade。
### css过渡类名：
组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：
1. fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。 2. fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。 3. fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。 4. fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。
那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：
```css .fade-enter { opacity:0; } .fade-leave{ opacity:1; } .fade-enter-active{ transition:opacity .5s; } .fade-leave-active{ opacity:0; transition:opacity .5s; } ```
上边的代码设置了改变透明度的动画过渡效果，但是默认的mode模式in-out模式，这并不是我们想要的。下面我们学一下mode模式。
### 过渡模式mode：
- in-out:新元素先进入过渡，完成之后当前元素过渡离开。 - out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
这节课只能算是一个简单的过渡入门，教会大家原理，如果想做出实用酷炫的过渡效果，你需要有较强的动画制作能力，我们下节课继续学习动画的知识。
### this.$router.push(‘/xxx ‘)用来直接跳转页面
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node，我这里的npm版本为3.10.10。如果该命令不可以使用，需要安装node软件包，根据你的系统版本选择下载安装就可以了。
下载地址：http://nodejs.cn/download/
npm没有问题，接下来我们可以用npm 命令安装vue-cli了，在命令行输入下面的命令：
``` js npm install vue-cli -g ```
-g :代表全局安装。如果你安装时报错，一般是网络问题，你可以尝试用cnpm来进行安装。安装完成后，可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是2.8.1.
如果vue -V的命令管用了，说明已经顺利的把vue-cli安装到我们的计算机里了。
**二、初始化项目**
我们用vue init命令来初始化项目，具体看一下这条命令的使用方法。
> $ vue init
init：表示我要用vue-cli来初始化项目
webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。
在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：
> vue init webpack vuecliTest
输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。
- Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest - Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。 - Author：作者，如果你有配置git的作者，他会读取。 - Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y - Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。 - setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。 - Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
命令行出现上面的文字，说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。
1、cd vuecliTest 进入我们的vue项目目录。
2、npm install 安装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装。
3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。
出现这个页面，说明我们的初始化已经成功，现在可以快乐的玩耍了。 package.json vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构讲起。
Ps：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。
重要文件讲解：
### package.json
package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。
**package.json 里的scripts字段**，这个字段定义了你可以用npm运行的命令。在开发环境下，在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js .也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写。
| | "scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" }, | | ---- | ------------------------------------------------------------ | | | |
**dependencies字段和devDependencies字段**
- dependencies字段指项目运行时所依赖的模块； - devDependencies字段指定了项目开发时所依赖的模块；
在命令行中运行npm install命令，会自动安装dependencies和devDempendencies字段中的模块。package.json还有很多相关配置，如果你想全面了解，可以专门去百度学习一下。
### webpack配置相关
我们在上面说了运行npm run dev 就相当于执行了node build/dev-server.js,说明这个文件相当重要，先来熟悉一下它。 我贴出代码并给出重要的解释。
#### dev-server.js
``` js
```
#### webpack.base.confg.js webpack的基础配置文件
``` js ......module.export = { // 编译入口文件 entry: {}, // 编译输出路径 output: {}, // 一些解决方案配置 resolve: {}, resolveLoader: {}, module: { // 各种不同类型文件加载器配置 loaders: { ... ... // js文件用babel转码 { test: /.js$/, loader: 'babel', include: projectRoot, // 哪些文件不需要转码 exclude: /node_modules/ }, ... ... } }, // vue文件一些相关配置 vue: {}} ```
这里有很多webpack的知识，我也有一个专门讲webpack的视频教程，你可以去看一看《[跟技术胖学webpack视频教程](http://jspang.com/2016/11/24/webpack/)》。
### .babelrc
Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码。如果你想了解更多，可以查看babel的知识。
``` js { //设定转码规则 "presets": [ ["env", { "modules": false }], "stage-2" ], //转码用的插件 "plugins": ["transform-runtime"], "comments": false, //对BABEL_ENV或者NODE_ENV指定的不同的环境变量，进行不同的编译操作 "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } } ```
### .editorconfig
该文件定义项目的编码规范，编译器的行为会与.editorconfig文件中定义的一致，并且其优先级比编译器自身的设置要高，这在多人合作开发项目时十分有用而且必要。
``` js root = true [*] // 对所有文件应用下面的规则 charset = utf-8 // 编码规则用 utf-8indent_style = space // 缩进用空格 indent_size = 2 // 缩进数量为2个空格 end_of_line = lf // 换行符格式 insert_final_newline = true // 是否在文件的最后插入一个空行 trim_trailing_whitespace = true // 是否删除行尾的空格 ```
这是比较重要的关于vue-cli的配置文件，当然还有很多文件，我们会在以后的文章中讲解。 vue-router ### 安装vue-router
vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
npm install vue-router --save-dev
如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。
### 解读router/index.js文件
我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。
``` js import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello //对应的组件模板 } ] }) ```
上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。
### 增加一个Hi的路由和页面
对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面，先来看一下我们希望得到的效果。
看到了效果，我们看一下具体的操作步骤：
- 在src/components目录下，新建 Hi.vue 文件。 - 编写文件内容，和我们之前讲过的一样，文件要包括三个部分 ```
引入 Hi组件：我们在router/index.js文件的上边引入Hi组件
```js import Hi from '@/components/Hi' ```
增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。
```js { path:'/hi', name:'Hi', component:Hi } ```
通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看，贴出现在的路由配置文件:
```js import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 import Hi from '@/components/Hi' Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello //对应的组件模板 },{ path:'/hi', name:'Hi', component:Hi } ] }) ```
### router-link制作导航
现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要
```html
- **to：**是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ， - **[显示字段] ：**就是我们要显示给用户的导航名称，比如首页 新闻页。
明白了router-link的基本语法，我们在 src/App.vue文件中的template里加入下面代码，实现导航
```html
导航 ：
现在我们访问页面，发现已经多出了导航。
总结：这节课我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用
### 一、改造App.vue的导航代码
我们需要先改造app.vue的导航代码，来实现基本的导航功能。我们用
#### App.vue代码
```html
导航 ：
这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航：Hi页面1 和 Hi页面2
### 二、改写components/Hi.vue页面
把Hi.vue改成一个通用的模板，加入
#### components/Hi.vue,就是第5行的代码，其他代码不变。
```html
### 三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue
新建的模板和Hi.vue没有太多的差别，知识改变了data中message的值，也就是输出的结果不太一样了。
Hi1.vue
```html
{{ msg }}
Hi2.vue
```html
{{ msg }}
### 四、修改router/index.js代码
我们现在导航有了，母模板和子模板也有了，只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。
```js children:[ {path:'/',component:xxx}, {path:'xx',component:xxx}, ] ```
children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。具体看一下这个子路由的配置写法。
```js import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Hi from '@/components/Hi' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello },{ path:'/hi', component:Hi, children:[ {path:'/',component:Hi}, {path:'hi1',component:Hi1}, {path:'hi2',component:Hi2}, ] } ] }) ```
需要注意的是，在配置路由文件前，需要先用import引入Hi1和Hi2。
### 总结：
这节课学的内容在路由配置里经常用到，比如我们作一个购物模块，购物模块里有很多相同的元素，我们就会利用这种子路由的形式，先定一个父页面，然后再修改子页面。
router3 开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。
### 一、用name传递参数
前两节课一直出现name的选项，但是我们都没有讲，这节课我们讲name的一种作用，传递参数。接着上节课的程序继续编写。
两步完成用name传值并显示在模板里：
1. 在路由文件src/router/index.js里配置name属性。
```js routes: [ { path: '/', name: 'Hello', component: Hello } ] ```
2. 模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：
```html
{{ $route.name}}
```### 二、通过
也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用
```html
这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.
- name：就是我们在路由配置文件中起的name值。 - params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
了解基本的语法后，我们改造一下我们的src/App.vue里的
```html
把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.
```js { path:'/hi1', name:'hi1', component:Hi1 }, ```
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
```js {{$route.params.username}} ```
总结：今天我们学习了两种传参的方法，一般会使用第二种方法。我们通过学习也知道了name的用途，一种作用是传参，一种作用是在传参时起到名称作用。传参的操作在实际开发中是基本的需求 router4
## 单页面多路由区域操作
这节课我们讲“**单页面多路由区域操作**”，实际需求是这样的，在一个页面里我们有2个以上
```html
```
现在的页面中有了三个
```jsx import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Hi1 from '@/components/Hi1' import Hi2 from '@/components/Hi2' Vue.use(Router) export default new Router({ routes: [ { path: '/', components: { default:Hello, left:Hi1, right:Hi2 } },{ path: '/Hi', components: { default:Hello, left:Hi2, right:Hi1 } } ] }) ```
上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是’/Hi’.在两个路径下的components里面，我们对三个区域都定义了显示内容。
定义好后，我们需要在component文件夹下，新建Hi1.vue和Hi2.vue页面就可以了。
Hi1.vue
```jsx
{{ msg }}
Hi2.vue
```jsx
{{ msg }}
最后在App.vue中配置我们的
```html
router5 ## vue-router 利用url传递参数
我们在第3节虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。
### :冒号的形式传递参数
我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
```js { path:'/params/:newsId/:newsTitle', component:Params } ```
我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
2. 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
```jsx
{{ msg }}
新闻ID：{{ $route.params.newsId}}
新闻标题：{{ $route.params.newsTitle}}
3. 在App.vue文件里加入我们的
```html
我们已经实现了以url方式进行传值，这在实际开发中经常使用，必须完全了解。我希望你看完视频后或者学完文章后能多练习两边，并在实际项目中充分使用。
### 正则表达式在URL传值中的应用
上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。
加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。
```js path:'/params/:newsId(\\d+)/:newsTitle', ```
加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。 router6 ## vue-router 的重定向-redirect
开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
### redirect基本重定向
我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。
```js export default new Router({ routes: [ { path: '/', component: Hello },{ path:'/params/:newsId(\\d+)/:newsTitle', component:Params },{ path:'/goback', redirect:'/' } ] }) ```
这里我们设置了goback路由，但是它并没有配置任何component（组件），而是直接redirect到path:’/’下了，这就是一个简单的重新定向。
### 重定向时传递参数
我们已经学会了通过url来传递参数，那我们重定向时如果也需要传递参数怎么办？其实vue也已经为我们设置好了，我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕，我们来看一段代码：
```js { path:'/params/:newsId(\\d+)/:newsTitle', component:Params },{ path:'/goParams/:newsId(\\d+)/:newsTitle', redirect:'/params/:newsId(\\d+)/:newsTitle' } ```
已经有了一个params路由配置，我们在设置一个goParams的路由重定向，并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。
使用alias别名的形式，我们也可以实现类似重定向的效果。
1.首先我们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，jspang。
```js { path: '/hi1', component: Hi1, alias:'/jspang' } ```
2.配置我们的
```jsx
### redirect和alias的区别
- redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。 - alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了
**填个小坑：**
别名请不要用在path为’/’中，如下代码的别名是不起作用的。
```js { path: '/', component: Hello, alias:'/home' } ```
## 路由的过渡动画
在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。
###
想让路由有过渡动画，需要在
```jsx
我们在/src/App.vue文件里添加了
### css过渡类名：
组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：
1. fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。 2. fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。 3. fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。 4. fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。
那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：
```css .fade-enter { opacity:0; } .fade-leave{ opacity:1; } .fade-enter-active{ transition:opacity .5s; } .fade-leave-active{ opacity:0; transition:opacity .5s; } ```
上边的代码设置了改变透明度的动画过渡效果，但是默认的mode模式in-out模式，这并不是我们想要的。下面我们学一下mode模式。
### 过渡模式mode：
- in-out:新元素先进入过渡，完成之后当前元素过渡离开。 - out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
这节课只能算是一个简单的过渡入门，教会大家原理，如果想做出实用酷炫的过渡效果，你需要有较强的动画制作能力，我们下节课继续学习动画的知识。
### this.$router.push(‘/xxx ‘)用来直接跳转页面