Vue-cli

Posted hegezhishouzhetian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-cli相关的知识,希望对你有一定的参考价值。

cli配置
**一、安装vue-cli**

安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为3.10.10。如果该命令不可以使用,需要安装node软件包,根据你的系统版本选择下载安装就可以了。

下载地址:http://nodejs.cn/download/

![img](http://7xjyw1.com1.z0.glb.clouddn.com/20170409092038.png)

npm没有问题,接下来我们可以用npm 命令安装vue-cli了,在命令行输入下面的命令:

``` js
npm install vue-cli -g
```



-g :代表全局安装。如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装。安装完成后,可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是2.8.1.

![img](http://7xjyw1.com1.z0.glb.clouddn.com/20170409093230.png)

如果vue -V的命令管用了,说明已经顺利的把vue-cli安装到我们的计算机里了。

 

**二、初始化项目**

我们用vue init命令来初始化项目,具体看一下这条命令的使用方法。

> $ vue init <template-name> <project-name>

init:表示我要用vue-cli来初始化项目

<template-name>:表示模板名称,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-一个最简单的单页应用模板。

<project-name>:标识项目名称,这个你可以根据自己的项目来起名字。

在实际开发中,一般我们都会使用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。

![img](http://7xjyw1.com1.z0.glb.clouddn.com/201704091024301.png)

命令行出现上面的文字,说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。

1、cd vuecliTest 进入我们的vue项目目录。

2、npm install 安装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装。

3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。

![img](http://7xjyw1.com1.z0.glb.clouddn.com/20170409103620.png)

出现这个页面,说明我们的初始化已经成功,现在可以快乐的玩耍了。
 
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 的时候出现一个新的页面,先来看一下我们希望得到的效果。

![img](http://7xjyw1.com1.z0.glb.clouddn.com/20170412093454.png)

看到了效果,我们看一下具体的操作步骤:

- 在src/components目录下,新建 Hi.vue 文件。
- 编写文件内容,和我们之前讲过的一样,文件要包括三个部分<template><script>和<style>。文件很简单,只是打印一句话。

```html
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
 
<script>
export default {
name: ‘hi‘,
data () {
return {
msg: ‘Hi, I am JSPang‘
}
}
}
</script>
 
 
<style scoped>
 
</style>
```

引入 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制作导航

现在通过在地址栏改变字符串地址,已经可以实现页面内容的变化了。这并不满足需求,我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签,我们先来看一下它的语法。

```html
<router-link to="/">[显示字段]</router-link>
```

- **to:**是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to=”/” ,
- **[显示字段] :**就是我们要显示给用户的导航名称,比如首页 新闻页。

明白了router-link的基本语法,我们在 src/App.vue文件中的template里加入下面代码,实现导航

```html
<p>导航 :
<router-link to="/">首页</router-link>
<router-link to="/hi">Hi页面</router-link>
</p>
```

现在我们访问页面,发现已经多出了导航。

![img](http://7xjyw1.com1.z0.glb.clouddn.com/20170412101827.png)

总结:这节课我们在vue-cli的构建下对vue-router有了一个基本的了解,学会了vue-router的核心文件的基本结构,学会了如何添加一个新的模板页面,还学会了用<router-link>标签设置导航。
 
 
 
 
 
router2
我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式。我们接着第一节课的实例,在Hi页面的下面新建两个子页面,分别是 “Hi页面1” 和 “Hi页面2”,来实现子路由。

### 一、改造App.vue的导航代码

我们需要先改造app.vue的导航代码,来实现基本的导航功能。我们用<router-link>标签增加了两个新的导航链接。

#### App.vue代码

```html
<p>导航 :
<router-link to="/">首页</router-link> |
<router-link to="/hi">Hi页面</router-link> |
<router-link to="/hi/hi1">-Hi页面1</router-link> |
<router-link to="/hi/hi2">-Hi页面2</router-link>
</p>
```



这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航:Hi页面1 和 Hi页面2

![img](http://7xjyw1.com1.z0.glb.clouddn.com/20170414142843.png)

### 二、改写components/Hi.vue页面

把Hi.vue改成一个通用的模板,加入<router-view>标签,给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面,有点想继承关系。我们在“Hi页面”里加入<router-view>标签。

#### components/Hi.vue,就是第5行的代码,其他代码不变。

```html
<router-view class="aaa"></router-view>
```

### 三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

新建的模板和Hi.vue没有太多的差别,知识改变了data中message的值,也就是输出的结果不太一样了。

Hi1.vue

```html
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: ‘hi‘,
data () {
return {
msg: ‘Hi, I am Hi1!‘
}
}
}
</script>
<style scoped>
 
</style>
```

Hi2.vue

```html
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: ‘hi‘,
data () {
return {
msg: ‘Hi, I am Hi2‘
}
}
}
</script>
<style scoped>
</style>
```

### 四、修改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
<p>{{ $route.name}}</p>
```

### 二、通过<router-link> 标签中的to传参

也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:

```html
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
```



这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

- name:就是我们在路由配置文件中起的name值。
- params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

了解基本的语法后,我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

```html
<router-link :to="{name:‘hi1‘,params:{username:‘jspang‘}}">Hi页面1</router-link>
```



把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个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目,并打开了src目录下的App.vue文件,在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

```html
<router-view ></router-view>
<router-view name="left" style="float:left;width:50%;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;height:300px;"></router-view>

```

现在的页面中有了三个<router-view>标签,也就是说我们需要在路由里配置这三个区域,配置主要是在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
<template>
<div>
<h2>{{ msg }}</h2>
</div>
</template>
 
<script>
export default {
name: ‘hi1‘,
data () {
return {
msg: ‘I am Hi1 page.‘
}
}
}
</script>
```



Hi2.vue

```jsx
 
<template>
<div>
<h2>{{ msg }}</h2>
</div>
</template>
 
<script>
export default {
name: ‘hi2‘,
data () {
return {
msg: ‘I am Hi2 page.‘
}
}
}
</script>
```

最后在App.vue中配置我们的<router-link>就可以了

```html
<router-link to="/">首页</router-link> |
<router-link to="/hi">Hi页面</router-link> |
```



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
<template>
<div>
<h2>{{ msg }}</h2>
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
</div>
</template>
 
<script>
export default {
name: ‘params‘,
data () {
return {
msg: ‘params page‘
}
}
}
</script>
```

 

3. 在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。

```html
<router-link to="/params/198/jspang website is very good">params</router-link> |
```

我们已经实现了以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.配置我们的<router-link>,起过别名之后,可以直接使用<router-link>标签里的to属性,进行重新定向。

```jsx
<router-link < to="/jspang">jspang</router-link>
```

### redirect和alias的区别

- redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
- alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。

**填个小坑:**

别名请不要用在path为’/’中,如下代码的别名是不起作用的。

```js
{
path: ‘/‘,
component: Hello,
alias:‘/home‘
}
```

## 路由的过渡动画

在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。

### <transition>标签

想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。

```jsx
<transition name="fade">
<router-view ></router-view>
</transition>
```

我们在/src/App.vue文件里添加了<transition>标签,并给标签起了一个名字叫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的主要内容,如果未能解决你的问题,请参考以下文章

vue入门教程

vue全家桶

Vue.js-扩展学习-3

vue3.x新增特性

vue3.x新增特性

vue3.x新增特性