前端之vue UI组件库

.

前提

组件库提供结构、样式、交互。

element-ui

element-ui 是基于 vue 的组件库，适用于pc端。

基本使用

1.命令行安装

npm i element-ui -S

2.在main.js内全局引入, 并使用插件库
完整引入

import Vue from 'vue'
import App from './App.vue'
// 1.引入组件库
import ElementUI from 'element-ui';
// 2.引入ElementUI**全部**样式
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
// 3.使用ElementUI**全部UI**组件
Vue.use(ElementUI);
new Vue({
  render: h => h(App)
}).$mount('#app')

以上方式全部引入文件太大，按需要引入方为正道

按需引入

babel-plugin-component 帮助我们可以引入需要的组件

1.命令行安装
-D 是指开发依赖

npm install babel-plugin-component -D

2.修改babel.config.js配置

module.exports = {
  presets: [
    "es2015",
    [
      "@babel/preset-env", {
        "modules": false
      }
    ]
  ],
  // 或
  // presets: [
  // '@vue/cli-plugin-babel/preset',
  // [
  //     "@babel/preset-env", {
  //       "modules": false
  //     }
  // ]
  // ],
  plugins: [
    [
      "component", {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.main.js引入并使用组件

// 正常来说,按需引入,会自动导入样式, 如果失效请请引入全部样式
//import 'element-ui/lib/theme-chalk/index.css';

import {Button, Select, Row, Radio} from 'element-ui';
// 使用时,指定标签名称
// Vue.component(Row.name, Row);
// 或
Vue.use(Button)
Vue.use(Select)
Vue.use(Radio)
Vue.use(Row)