Vue2.x脚手架安装

34 阅读2分钟

 一、过度效果与脚手架安装

1.过度效果

· Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。
包括以下工具:
-在CSS过渡和动画中自动应用class

-可以配合使用第三方CSS动画库,如Animate.css

-在过渡钩子函数中使用JavaScript直接操作DOM

-可以配合使用第三方JavaScript动画库,如Velocity.js

· 会有6个(CSS)类名在enter/leave的过渡中切换

**-**v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

**-**v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在

transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

- v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入一帧后生效(于此同时v-enter被删除),在transition/animation完成之后移除。

**-**v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

**-**v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在

transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

**-**v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被虫发一倾后生xti荒成之后移除。

CSS:

.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
.fade-enter,
.fade-leave-to
{
opacity: 0
}

HTML:

Toggle

hello

2.脚手架安装

1.按win+R,输入cmd。输入“npm i -g @vue/cli

2.在相对的创建项目文件路径输入“vue create 项目名称

 

3.cmd上启动脚手架项目

 4.安装axios指令“npm i -save axios

5.打包脚手架指令“npm run build

二、脚手架项目结构

Visual Studio Code 中启动脚手架“npm run serve”