Element UI:rocket:

• 2019年9月6日

1. 安装与使用 :small_red_triangle_down:

npm i element-ui -s

1.1 完整引入

• 引入包

• 引入样式文件

• 注册全局组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

1.2 部分引入

需要一个插件的支持babel-plugin-component,安装完成之后配置node_modules/vue-lazyloader/.babelrc文件

:see_no_evil:之前安装Mint-UI时也是同样的操作

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

npm i babel-plugin-component -D

import { Button, Select, Row } from 'element-ui'
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(Row.name, Row);

2. 全局配置:confetti_ball:

• size改变组件的默认尺寸

• zindex改变弹框的z-index

Vue.ues(ElementUI,{

size:'small',

zIndex:3000

})

部分组件进行全局配置

Vue.prototype.$ELEMTNT={size:'small',zIndex:3000}

3. webpack打包

参考 https://www.cnblogs.com/both-eyes/p/10047352.html

由于ElementUI使用的是sass进行样式的书写，我也就照着学一学

3.1 安装sass，模块

//在项目下，运行下列命令行
    npm install  sass-loader -D
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass -D

3.2 配置webpack配置文件

增加匹配规则后重启 webpack-dev-server

{test:/\.scss$/,use:[
                {loader:'style-loader'},
                {loader:'css-loader'},
                {loader:'sass-loader'}
                ]},

3.3 组件中样式

<style scoped lang="scss">
</style>