Vue 项目中按需引入 ElementUI 的正确方法
在企业中使用 Vue 开发的项目中,往往会使用按需引入的方式安装 ElementUI,以达到减小项目体积的目的。由于ElementUI官方文档更新缓慢,按照官网上的操作可能会出错。按需引入 ElementUI 的具体操作如下:第1步:创建Vue项目这里就不再赘述 Vue 项目的创建过程,直接执行$ npm i @vue/cli -g$ vue create myapp第2步:安装 ElementU
在企业中使用 Vue 开发的项目中,往往会使用按需引入的方式安装 ElementUI,以达到减小项目体积的目的。由于ElementUI官方文档更新缓慢,按照官网上的操作可能会出错。按需引入 ElementUI 的具体操作如下:
第1步:创建Vue项目
这里就不再赘述 Vue 项目的创建过程,直接执行
$ npm i @vue/cli -g
$ vue create myapp
第2步:安装 ElementUI
在项目的根目录下启动CMD,执行命令:
$ npm i element-ui --save
第3步:安装 babel-plugin-component
在项目根目录下执行命令:
$ npm install babel-plugin-component -D
第4步:修改配置文件
本教程使用的 vue cli 版本为 4.5,@vue/cli 4.x 版本搭建的项目中会有 babel.config.js
配置文件,如果是旧版的 vue-cli
脚手架工具创建的项目需要在 .babelrc
文件中修改。
打开项目根目录下的 babel.config.js
文件,配置代码如下:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
}
第5步:按需引入组件
在 main.js
入口文件中引入组件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button } from 'element-ui'; // 按需引入组件
Vue.component(Button.name, Button); // 注册全局组件
// 或
// Vue.use(Button)
// 或指定组件名称
// Vue.component('my-button', Button);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
第6步:使用组件
<template>
<div id="app">
<el-button type="primary">按钮</el-button>
<!-- <my-button>按钮</my-button> -->
</div>
</template>
封装 Element 模块
如果按需引入的组件较多,不适合在 main.js 入口文件中写大量的引入代码,可以自定义Vue插件来封装ElementUI组件的引用。
新建 /src/components/element/index.js
文件,index.js 示例代码如下:
import {
Button,
Input,
Radio,
Table,
Form
} from 'element-ui'
const coms = [
Button,
Input,
Radio,
Table,
Form
]
export default {
install(Vue, options){
coms.map(c => {
Vue.component(c.name, c)
})
}
}
在 main.js 中引入自定义 element 插件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入 element 插件
import element from './components/element'
Vue.use(element)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在组件中正常使用 ElementUI 组件即可,示例代码:
<template>
<div id="app">
<el-button type="primary">按钮</el-button>
<el-radio></el-radio>
<el-input></el-input>
</div>
</template>
更多推荐
所有评论(0)