vue中按需引入Element-ui
安装
1、安装element-ui:npm i element-ui -S。
2、安装babel-plugin-component:npm install babel-plugin-component -D。
修改
1、在项目根目录下新建.babelrc文件:
2、在.babelrc中写入:
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
使用
1、在src下新建文件夹element然后在里面新建文件index.js:
2、在index.js中写入:
import Vue from 'vue'
// 按需引入:base.css 基础样式必须引入,其它组件样式按需引入
import "element-ui/packages/theme-chalk/lib/base.css";
import "element-ui/packages/theme-chalk/lib/collapse.css";
import "element-ui/packages/theme-chalk/lib/collapse-item.css";
import "element-ui/packages/theme-chalk/lib/select.css";
import "element-ui/packages/theme-chalk/lib/option.css";
import {Button} from 'element-ui';//从element-ui中引入按钮
Vue.use(Button);//在vue中使用按钮
3、在页面文件中写入:
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
转载请标注来源与原作者