步骤
- 安装
- 完整引入/按需引入
- 使用
1. 安装，可以使用npm或者yarn进行安装
npm install element-plus --save
yarn add element-plus
2. 完整引入
在main.js上
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css'; //plus版本的样式文件
const app = createApp(App)
app.use(ElementPlus)
2.1 按需引入
①借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。
npm install babel-plugin-import -D
yarn add babel-plugin-import -D
②在根目录下创建babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{
libraryName: 'element-plus',
customStyleName: (name) => {
name = name.slice(3)
return `element-plus/packages/theme-chalk/src/${name}.scss`;
},
},
],
],
}
③在main.js下进行引入和注册
import 'element-plus/packages/theme-chalk/src/base.scss'
import { ElButton, ElSelect, ElOption } from 'element-plus';
//另一种注册写法
// app.component(ElButton.name, ElButton);
// app.component(ElSelect.name, ElSelect);
app.use(ElButton)
app.use(ElSelect)
app.use(ElOption)
其它注册组件请参考官方文档
3. 使用
<el-button type="primary">新增</el-button>
<el-select v-model="sex" placeholder="请选择性别">
<el-option label="汉子" value="man"></el-option>
<el-option label="妹子" value="woman"></el-option>
</el-select>
