Vue2使用cli脚手架引入ElementUI教程
作者:xrkhy
本文介绍使用Vue CLI创建项目并集成ElementUI的方法,涵盖完整引入与按需引入(需安装babel-plugin-component及配置),同时推荐VSCode插件vscode-element-helper辅助开发
使用cli脚手架创建项目
可以参考我之前的博客Vue打包工具(构建工具)和脚手架
整理目录
ElementUI安装并引入
安装
我们打开ElementUI官网
npm i element-ui -S
引入
完整引入
在 main.js 中写入以下内容:
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc
或者babel.config.js
修改为:
module.exports = { // presets: [["es2015", { "modules": false }]], // babel-preset-es2015已被官方废弃多年 presets: [ '@vue/cli-plugin-babel/preset' // 使用 Vue CLI 内置的现代预设 ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue'; import { Button, Select } from 'element-ui'; import App from './App.vue'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select) */ new Vue({ el: '#app', render: h => h(App) });
Vscode 提示插件下载
打开插件市场下载插件有提示vscode-element-helper
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。