本教程为入门教程，如有错误，请各位前端大佬指出。
1.什么是 Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，封装很多常用组件，官网是https://element.eleme.cn/#/zh-CN/component/installation，下面就简单介绍 element。
当你访问官网，发现无数已经封装好了的页面，而且样式多样，一般可以满足大部分的业务需求，如果你是业务开发，直接复制粘贴，然后在复制好的代码上补充字段也填写业务即可了。
1.安装和引入
如果想使用 Element，那么需要下载和安装 element-ui 的类库，否则会抛出异常。
npm i element-ui -Snpm install babel-plugin-component -D
复制代码
然后，将.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。首页： https://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>
复制代码
如有其他需要也可以参考文档：https://animate.style/#documentation
评论