element ui 按需引入及.babelrc配置

 按需引入

-S生产环境 -D开发环境

yarn下载

yarn add element-ui -S

yarn add babel-plugin-component -D

 cnpm下载

cnpm i element-ui -S

cnpm install babel-plugin-component -D

 如果是webpack构建的，修改.babelrc文件如下：

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

现在废弃了es2015，改为"@babel/preset-env" 这个写法，或者"babel-preset-env"

自己注意preset-env的位置，不然会报错

如果是vue create创建的，修改babel.config.js如下：

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

新建plugins目录，新建elements.js文件

import 'element-ui/lib/theme-chalk/index.css'
import {
Button,
} from 'element-ui'
const components=[
Button,]
export function registerApp(app){for (const component of components){app.component(component.name,component)}
}

 在main.js引入elements.js

import Vue from 'vue'
import App from './App.vue'
import { registerApp } from './plugins/elements'Vue.config.productionTip = false
Vue.use(registerApp)new Vue({render: h => h(App),
}).$mount('#app')

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！