Vue2项目引入ElementUI
Vue2项目引入ElementUI
·
接上文已经创建的vue2工程。
1. 安装elementUI
cnpm i element-ui -S
2. 完全引入
在main.js完整引入:
//导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用ElementUI
Vue.use(ElementUI);
之后在项目组件中可以直接使用elementUI的标签进行开发
3. 按需引入
按需引入可以根据需要只引入部分组件,减少文件体积。按需引入需安装插件:
cnpm install babel-plugin-component -D
新增配置文件.babelrc,内容:
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue'
import App from './App.vue'
import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
更多推荐
所有评论(0)