一、安装
首先进行依赖的安装,这里直接使用npm方式:
npm install element-plus --save
二、使用
提供两种使用方案,根据自己需要,任选其一即可。
1. 全局引入
注:如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。
在main.ts中直接导入:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
页面使用:
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
效果展示:
2. 按需引入
首先,你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
其次,需要在根目录下创建vue.config.js文件,并进行配置
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
configureWebpack: (config) => {
// Element-plus 按需引入配置
config.plugins.push(
AutoImport({
resolvers: [ElementPlusResolver()]
})
)
config.plugins.push(
Components({
resolvers: [ElementPlusResolver()]
})
)
}
}
页面使用:
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
展示效果:
Ps:具体可查看官网文档。