1.安装element-ui:
npm i element-ui -S
2.推荐按需引入组件
(1)、借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的
安装 babel-plugin-component:
npm install babel-plugin-component -D
(2)、修改 .babelrc 文件
在文件中加入一下内容即可
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk" }
]
]
说明一下,element-ui文档上的快速上手是针对vue-cli3.0版本,所以有些不一样。在2.0项目加上"presets": [["es2015", { "modules": false }]] 会产生报错。
3.在main.js 中引入需要使用到的组件
比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import { Button, Select } from 'element-ui';
Vue.use(Button).use(Select);
4.将文档中的相应组件的示例代码贴到你需要使用的项目中
下面是示例:
并且把相应的变量啥的声明一下,在具体这个文件中不需要再次引入
import { Button, Input } from 'element-ui';
直接就能够使用。