Vue.js 创建ElementUI项目

构建工具方式 - 按需引入

1. 安装：npm i element-ui -S

2. 按需引入

babel插件：npm install babel-plugin-component -D

配置babel.config.js或.babelrc

// babel.config.js
module.exports = {
  ...
  plugins: [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
  ...
}


// .babelrc
{
  ...
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
  ...
}

引入组件

// 文件：src/config/components/elementui.js

import { Button } from 'element-ui'

const ElementUI = {
  install (Vue) {
    // 或写为: Vue.component(Button.name, Button)
    Vue.use(Button)
  }
}

export default ElementUI

配置main.js

// 导入
import ElementUI from './config/components/elementui.js'

// 生效
Vue.use(ElementUI)

测试一下

3. vue-i18n

安装：npm i vue-i18n

创建zh-locale.js、en-locale.js，用来显示自定义的内容。

// src/config/locale/zh-locale.js

const messages = {
}

export default messages


// src/config/locale/en-locale.js

const messages = {
}

export default messages

配置main.js

// 引入
import VueI18n from 'vue-i18n'

import en from 'element-ui/lib/locale/lang/en'
import zh from 'element-ui/lib/locale/lang/zh-CN'
import zhLocale from './config/locale/zh-locale'
import enLocale from './config/locale/en-locale'
import ElementLocale from 'element-ui/lib/locale'

// 生效
Vue.use(VueI18n)

// 创建实例
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    en: Object.assign(en, enLocale),
    zh: Object.assign(zh, zhLocale)
  }
})

ElementLocale.i18n((key, value) => i18n.t(key, value))

// 加入到Vue
new Vue({
  ...
  i18n,
  ...
}).$mount('#app')

*.vue中测试，能显示在zh-locale.js或en-locale.js中配置的属性（例如：test: '测试'）就行了。

4. 自定义主题：覆盖变量方式

// 创建文件：src/config/theme/element-variables.scss

// 改变主题色变量：这里只是测试一下
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

配置main.js：导入文件就可以了。

import './config/theme/element-variables.scss'