element-plus按需引入及配置locale国际化版本1.0.2-beta.31

适用于vue_cli创建项目使用一、按需引入1、下载插件npm i babel-plugin-import -D2、在项目根目录配置babel.config.js文件module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins:[["import",{libraryName:'element-plus',cus

张小浪

6213人浏览 · 2021-12-14 16:43:38

张小浪 · 2021-12-14 16:43:38 发布

适用于vue_cli创建项目使用

一、按需引入

1、下载插件

npm i babel-plugin-import -D

2、在项目根目录配置babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    [
      "import",
      {
        libraryName:'element-plus',
        customStyleName:(name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ]
}

3、配置main.js文件（此时按需引入已经配置完成）

import { createApp } from 'vue'
import App from './App.vue'
import {ElButton} from 'element-plus'
var app = createApp(App)
	.use(ElButton)

app.mount('#app')

二、国际化配置

注意引入 lang 和 locale的路径，与全局配置时引入不一样了有修改

import { createApp } from 'vue'
import App from './App.vue'
import {ElButton} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'
locale.use(lang)
var app = createApp(App)
	.use(ElButton)

app.mount('#app')