Vue3.0 + Ts 项目框架搭建三：element-plus

一、安装

首先进行依赖的安装，这里直接使用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：具体可查看官网文档。