安装和配置

安装element-ui

  1. npm i element-ui -S
  2. # 或者
  3. yarn add element-ui

安装插件babel-plugin-component

  1. npm install babel-plugin-component -D
  2. # 或者
  3. yarn add babel-plugin-component -D

在babel.config.js文件中添加plungins部分

  1. module.exports = {
  2.   presets: [
  3.     '@vue/cli-plugin-babel/preset'
  4.   ],
  5.   "plugins": [
  6.     [
  7.       "component",
  8.       {
  9.         "libraryName": "element-ui",
  10.         "styleLibraryName": "theme-chalk"
  11.       }
  12.     ]
  13.   ]
  14. }

在入口文件main.js按需引入UI组件

  1. import Vue from 'vue';
  2. import { Loading, MessageBox, Message, Notification } from 'element-ui';
  3. import App from './App.vue';
  5. // 注册全局组件
  6. Vue.component(Button.name, Button);
  7. Vue.component(Select.name, Select);
  8. /* 或写为
  9.  * Vue.use(Button)
  10.  * Vue.use(Select)
  11.  */
  13. // 将组件或方法绑定到Vue的原型上，以便全局调用
  14. Vue.prototype.$loading = Loading.service;
  15. Vue.prototype.$msgbox = MessageBox;
  16. Vue.prototype.$alert = MessageBox.alert;
  17. Vue.prototype.$confirm = MessageBox.confirm;
  18. Vue.prototype.$prompt = MessageBox.prompt;
  19. Vue.prototype.$notify = Notification;
  20. Vue.prototype.$message = Message;
  22. new Vue({
  23.   el: '#app',
  24.   render: h => h(App)
  25. });

在放css文件的目录新建element-variables.scss文件，按需引入样式

  1. /* 改变主题色变量 */
  2. $--color-primary: teal;
  4. /* 改变 icon 字体路径变量，必需 */
  5. $--font-path: '~element-ui/lib/theme-chalk/fonts';
  7. /* 按需引入样式 */
  8. /* @import "~element-ui/packages/theme-chalk/src/index"; */
  9. @import "~element-ui/packages/theme-chalk/src/button";
  10. @import "~element-ui/packages/theme-chalk/src/input";

在目录node_modules / element-ui / packages / theme-chalk / src / common / var.scss中可查看对应的scss变量名, 以便找到对应的变量名修改样式
还可以局部修改组件库样式，参考
之后，在项目的入口文件中引入scss文件

  1. import './element-variables.scss'

使用命令 yarn build --report 可查看打包后文件的大小

使用element-ui

  1.   onCreate() {
  2.     this.$prompt('请输入笔记本标题', '新建笔记本', {
  3.       confirmButtonText: '确定',
  4.       cancelButtonText: '取消',
  5.       inputPattern: /^.{1,30}$/,
  6.       inputErrorMessage: '标题不能为空，且不超过30个字符'
  7.     }).then((obj: any ) => {
  8.       const {value} = obj
  9.       return Notebooks.addNotebook({title: value})
  10.     }).then((res: any) => {
  11.       this.$message.success(res.msg)
  12.       res.data.friendlyCreatedAt = friendlyDate(res.data.createdAt)
  13.       this.notebooks.unshift(res.data)
  14.     })
  15.   }
  17.   onEdit(notebook: Notebook) {
  18.     let title = ''
  19.     this.$prompt('请输入笔记本标题', '修改笔记本', {
  20.       confirmButtonText: '确定',
  21.       cancelButtonText: '取消',
  22.       inputPattern: /^.{1,30}$/,
  23.       inputErrorMessage: '标题不能为空，且不超过30个字符',
  24.       inputValue: notebook.title
  25.     }).then((obj: any ) => {
  26.       title = obj.value
  27.       return Notebooks.updateNotebook(notebook.id,{title})
  28.     }).then((res: any) => {
  29.       notebook.title = title
  30.       this.$message.success(res.msg)
  31.     })
  32.   }
  34.   onDelete(notebook: Notebook) {
  35.     this.$confirm('确定要删除吗？', '提示', {
  36.       confirmButtonText: '确定',
  37.       cancelButtonText: '取消',
  38.       type: 'warning'
  39.     }).then(()=>{
  40.       return  Notebooks.delete(notebook.id)
  41.     }).then((res:any) => {
  42.       this.$message.success(res.msg);
  43.       this.notebooks.splice(this.notebooks.indexOf(notebook), 1)
  44.     })
  46.   }