本教程为入门教程，如有错误，请各位前端大佬指出。
1.什么是Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，封装很多常用组件，官网是element.eleme.cn/#/zh-CN/com…，下面就简单介绍 element。
当你访问官网，发现无数已经封装好了的页面，而且样式多样，一般可以满足大部分的业务需求，如果你是业务开发，直接复制粘贴，然后在复制好的代码上补充字段也填写业务即可了。
1.安装和引入
如果想使用Element，那么需要下载和安装element-ui的类库，否则会抛出异常。
1. npm i element-ui -S 2. npm install babel-plugin-component -D 3. 复制代码
然后，将.babelrc文件修改为：
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]] } } } 复制代码
2.使用
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容，证明你想使用引入的组件：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //element组件相关配置 import { Button, Select, Option } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Button) Vue.use(Select) Vue.use(Option) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 复制代码
然后将代码直接复制过来，将字段对应同时加入业务即可。
<template> <el-select v-model="value" filterable placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { name: 'HelloWorld2', data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } } } </script> 复制代码
通过element，我们就不用自己编写页面了，大大减少了工作量，同时方式也比较不错。上文仅仅使用按钮作为演示，其他组件请自行测试。
2.动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，在此过程中，就会形成动画。 动画使用包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
下面简单做一下动画的实例
1.隐藏显示
点击一次字体隐藏，再次点击字体显示，以下附上代码。
app.vue <template> <div id="app"> <anim/> </div> </template> <script> import anim from './components/anim.vue' export default { name: 'App', components:{ anim }, data () { return { } }, methods: { clickButton(event){ if(this.stutas ==HelloWorld){ this.stutas = HelloWorld2 }else{ this.stutas = HelloWorld } } }, } </script> <style> </style> Anim.vue <template> <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <!-- 动画必备 --> <transition name="demo"> <p v-if="show">hello</p> </transition> </div> </template> <script> export default { name: 'anim', data () { return { show: true } }, methods: { clickButton(){ } } } </script> <style> .demo-enter-active, .demo-leave-active { transition: opacity 5s; } .demo-enter, .demo-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> 复制代码
2.移动
点击一次字体右移，再次点击字体左移。下文附上代码。
<template> <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <!-- 动画必备 --> <transition name="demo"> <p class = "myDemo" v-if="show">hello</p> </transition> </div> </template> <script> export default { name: 'anim', data () { return { show: true } }, methods: { clickButton(){ } } } </script> <style> .demo-enter-active, .demo-leave-active { transition: all .5s ease; } .demo-enter, .demo-leave-to /* .fade-leave-active below version 2.1.8 */ { transform: translateX(100px);; } .demo-enter-to, .demo-leave /* .fade-leave-active below version 2.1.8 */ { transform: translateX(0px);; } .myDemo{ position:absolute; left:50px } </style> 复制代码
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
3.使用第三方库
这里推荐的第三方库为Animate。首页： daneden.github.io/animate.css…。 Animate.css是一个随时可用的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。下文将简单介绍animate.css的基础用法。
1.index.html引入组件
相同道里，需要引入组件才能使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <title>project</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 复制代码
2.引入div
然后获取官网文档的样式，直接使用即可。
<template> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated zoomOutRight" leave-active-class="animated fadeInDownBig" > <p v-if="show">hello</p> </transition> </div> </template> <script> export default { name: 'anim', data () { return { show: true } }, methods: { } } </script> <style> </style> 复制代码
如有其他需要也可以参考文档：animate.style/#documentat…
