（2）集成element-ui

我不是女神ヾ 2022-01-14 16:05 212阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

# （2）集成element-ui #

## 1 安装element-ui依赖 ##

cnpm install --save element-ui

## 2 按需引入 ##

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

cnpm install --save babel-plugin-component

> 这里不知道是保存到`dependencies`中还在 `devDependencies` 官方给的是`devDependencies`，而项目是保存到`dependencies`中

然后，将 .babelrc 修改为：

{
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": [
        "transform-vue-jsx", 
        "transform-runtime",
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

修改main.js为：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    //只引入Button一个组件
    import {Button} from 'element-ui'
    //主题还是需要引入的
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.config.productionTip = false
    //使用Button这个组件 
    Vue.use(Button)
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    })

修改HeloWorld.vue为：

<template>
      <div class="hello">
        
        <el-button type="primary">HelloWorld</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {}
      }
    }
    </script>

## 3 以列表方式按需引入 ##

在`src`目录下新建`element-ui`文件夹，`element-ui`文件夹内新建`index.js`文件，`index.js`文件内容为

/**
     * UI组件, 统一使用饿了么桌面端组件库(https://github.com/ElemeFE/element）
     *
     * 使用:
     *  1. 项目中需要的组件进行释放(解开注释)
     *
     * 注意:
     *  1. 打包只会包含释放(解开注释)的组件, 减少打包文件大小
     */
    import Vue from 'vue'
    import {
      Pagination,
      Dialog,
      // Autocomplete,
      Dropdown,
      DropdownMenu,
      DropdownItem,
      Menu,
      Submenu,
      MenuItem,
      MenuItemGroup,
      Input,
      InputNumber,
      Radio,
      RadioGroup,
      // RadioButton,
      Checkbox,
      // CheckboxButton,
      CheckboxGroup,
      // Switch,
      Select,
      Option,
      // OptionGroup,
      Button,
      // ButtonGroup,
      Table,
      TableColumn,
      DatePicker,
      // TimeSelect,
      // TimePicker,
      Popover,
      Tooltip,
      // Breadcrumb,
      // BreadcrumbItem,
      Form,
      FormItem,
      Tabs,
      TabPane,
      Tag,
      Tree,
      Alert,
      // Slider,
      // Icon,
      Row,
      Col,
      Upload,
      // Progress,
      Badge,
      Card,
      // Rate,
      // Steps,
      // Step,
      // Carousel,
      // CarouselItem,
      // Collapse,
      // CollapseItem,
      // Cascader,
      // ColorPicker,
      // Transfer,
      // Container,
      // Header,
      // Aside,
      // Main,
      // Footer,
      Loading,
      MessageBox,
      Message
      // Notification
    } from 'element-ui'
    
    Vue.use(Pagination)
    Vue.use(Dialog)
    // Vue.use(Autocomplete)
    Vue.use(Dropdown)
    Vue.use(DropdownMenu)
    Vue.use(DropdownItem)
    Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItem)
    Vue.use(MenuItemGroup)
    Vue.use(Input)
    Vue.use(InputNumber)
    Vue.use(Radio)
    Vue.use(RadioGroup)
    // Vue.use(RadioButton)
    Vue.use(Checkbox)
    // Vue.use(CheckboxButton)
    Vue.use(CheckboxGroup)
    // Vue.use(Switch)
    Vue.use(Select)
    Vue.use(Option)
    // Vue.use(OptionGroup)
    Vue.use(Button)
    // Vue.use(ButtonGroup)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(DatePicker)
    // Vue.use(TimeSelect)
    // Vue.use(TimePicker)
    Vue.use(Popover)
    Vue.use(Tooltip)
    // Vue.use(Breadcrumb)
    // Vue.use(BreadcrumbItem)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Tabs)
    Vue.use(TabPane)
    Vue.use(Tag)
    Vue.use(Tree)
    Vue.use(Alert)
    // Vue.use(Slider)
    // Vue.use(Icon)
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Upload)
    // Vue.use(Progress)
    Vue.use(Badge)
    Vue.use(Card)
    // Vue.use(Rate)
    // Vue.use(Steps)
    // Vue.use(Step)
    // Vue.use(Carousel)
    // Vue.use(CarouselItem)
    // Vue.use(Collapse)
    // Vue.use(CollapseItem)
    // Vue.use(Cascader)
    // Vue.use(ColorPicker)
    // Vue.use(Transfer)
    // Vue.use(Container)
    // Vue.use(Header)
    // Vue.use(Aside)
    // Vue.use(Main)
    // Vue.use(Footer)
    
    Vue.use(Loading.directive)
    
    Vue.prototype.$loading = Loading.service
    Vue.prototype.$msgbox = MessageBox
    Vue.prototype.$alert = MessageBox.alert
    Vue.prototype.$confirm = MessageBox.confirm
    Vue.prototype.$prompt = MessageBox.prompt
    // Vue.prototype.$notify = Notification
    Vue.prototype.$message = Message
    
    Vue.prototype.$ELEMENT = { size: 'medium' }

修改main.js为

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import '@/element-ui'
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    })

即完成。

## 4 主题修改 ##

仅更换 Element 的主题色，使用在线主题生成工具

[https://elementui.github.io/theme-chalk-preview/][https_elementui.github.io_theme-chalk-preview]

进入页面后，点击“切换主题色”选择一种颜色，如`#026A52`（深绿），然后“下载主题”，得到一个`element-#026A52.zip`文件，解压缩，得到`element-#026A52`文件夹。

*  在项目`src`目录下新建`element-ui-theme`文件夹
 *  把`element-#026A52`文件夹复制到`element-ui-theme`文件夹内
 *  在`element-ui-theme`文件夹内新建`index.js`文件

`index.js`文件内容为:

import './element-#026A52/index.css' // 当前主题色

修改`main.js`文件为：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import '@/element-ui'
    import '@/element-ui-theme';
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    })

运行项目，发现，button已经变成`#026A52`色了，修改主题成功

转载于:https://my.oschina.net/neumeng/blog/2248529

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/6e484afb40a6476c8c644109cd55ba6a.png
[https_elementui.github.io_theme-chalk-preview]: https://elementui.github.io/theme-chalk-preview/