Element-ui组件库

第 7 章：Vue UI 组件库

7.1 移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant

2. Cube UI https://didi.github.io/cube-ui

3. Mint UI http://mint-ui.github.io

4. Nutui https://nutui.jd.com/ 京东

7.2 PC 端常用 UI 组件库

1. Element UI https://element.eleme.cn    饿了么UI组件库

2. IView UI https://www.iviewui.com

7.3 安装element-ui

注意：安装时 -S ：为生产依赖，-D：为开发依赖

1、安装 https://element.eleme.cn

npm i element-ui -S

 2、快速上手

 在 main.js 中写入以下内容：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
// import vueResource from 'vue-resource'
//引入store模块化Vuex
// import store from './store'

// 引入路由
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'  //import后面的router只能写成router,且首字母大写都不行，不然在下面new Vue里面注入的时候控制台会报错Cannot read property 'matched'

//完整引入
//引入ElementUI插件组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

//按需引入
// import { Button,Row,DatePicker } from 'element-ui';

//关闭Vue的生产提示
Vue.config.productionTip = false


// 注册使用插件
// Vue.use(vueResource)
// 注册应用路由
Vue.use(VueRouter)
// 注册应用插件组件库
Vue.use(ElementUI)

//创建vm
new Vue({
  // store, // 模块化配置项：同名触发简写store:store,
  render: h => h(App),
  router:router, // 固定写法：@/router,记得在这里注入引入的router
  /*beforeCreate() {
    Vue.prototype.$bus = this // 开启全局总线
  }*/
}).$mount("#app") 

3、组件

复制代码，

使用type、plain、round和circle属性来定义 Button 的样式。
<el-row>
　　<el-button>默认按钮</el-button>
　　　　<el-button type="primary">主要按钮</el-button>
　　　　<el-button type="success">成功按钮</el-button>
　　　　<el-button type="info">信息按钮</el-button>
　　　　<el-button type="warning">警告按钮</el-button>
　　　　<el-button type="danger">危险按钮</el-button>
　　　　<el-button type="primary" icon="el-icon-edit">
　　</el-button> //type、icon查询相关Attrbutes属性表
</el-row>

查询样式最后面的Attributes属性表

参数	说明	类型	可选值	默认值
size	尺寸	string	medium / small / mini	—
type	类型	string	primary / success / warning / danger / info / text	—
plain	是否朴素按钮	boolean	—	false
round	是否圆角按钮	boolean	—	false
circle	是否圆形按钮	boolean	—	false
loading	是否加载中状态	boolean	—	false
disabled	是否禁用状态	boolean	—	false
icon	图标类名	string	—	—
autofocus	是否默认聚焦	boolean	—	false
native-type	原生 type 属性	string	button / submit / reset	button

 

 

4、快速上手中：按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：  -D：为开发依赖

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：注意Vue-cli脚手架项目文件为babel.config.js

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

避免破坏源文件，只修改添加

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

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：注意 不用加el- 组件名第一字母大写，

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
// import vueResource from 'vue-resource'
//引入store模块化Vuex
// import store from './store'

// 引入路由
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'  //import后面的router只能写成router,且首字母大写都不行，不然在下面new Vue里面注入的时候控制台会报错Cannot read property 'matched'

//完整引入
//引入ElementUI组件库
// import ElementUI from 'element-ui';
//引入ElementUI全部样式
// import 'element-ui/lib/theme-chalk/index.css';

//按需引入
// import { Button,Row,DatePicker } from 'element-ui';
import {Button,Row,DatePicker} from 'element-ui'

//关闭Vue的生产提示
Vue.config.productionTip = false


// 注册使用插件
// Vue.use(vueResource)
// 注册应用路由
Vue.use(VueRouter)

// 注册完整应用组件库
// Vue.use(ElementUI)
// 组件id自定义
Vue.component('Button-name',Button);
Vue.component('julan-row',Row);
Vue.component('tongda-datepicker',DatePicker);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Row)
 * Vue.use(Button,Row,DatePicker)
 */


//创建vm
new Vue({
  // store, // 模块化配置项：同名触发简写store:store,
  render: h => h(App),
  router:router, // 固定写法：@/router,记得在这里注入引入的router
  /*beforeCreate() {
    Vue.prototype.$bus = this // 开启全局总线
  }*/
}).$mount("#app")

按需引入的问题

 not found XXX: 解决 npm i XXX

 

 解决：修改babel.config.js

 

 修改后

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