element-ui笔记

Element

安装

npm i element-ui -S

项目导入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

借助插件

npm install babel-plugin-component -D

修改 .babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]]
}

项目实际使用

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
})

内置过渡动画
动画效果：
fade 淡入淡出
zoom 缩放
collapse 展开折叠

<transition name="el-fade-in-linear">//name:动画效果
        <div v-show="show" class="transition-box">****</div>
</transition>