1. 首先需要我們的vue版本>3.0，版本低的同學可以先升級一下vue的版本號.
2. 然后我們通過命令行，初始化項目vue create vue3.0-demo.
3. 既然要用element-plus，那我們就需要安裝，命令行為：yarn add element-plus -S.
4. 接下來我們分為全局安裝和按需加載
① 全局安裝
如果你對打包后的文件大小不是很在乎，那么使用完整導入會更方便。
// 首先在 main.ts 引入element-plus
import ElementUI from 'element-plus'
import 'element-plus/theme-chalk/index.css'
// 然后掛載在App上即可.
createApp(App).use(ElementUI).use(store).use(router).mount('#app')
// App.vue 頁面上直接引入組件即可.
<el-button type="primary" :icon="Edit" circle></el-button>
<el-button type="success" :icon="Delete" circle></el-button>
// 如果需要使用icon圖標，再引入element-plus相應的圖標即可.
import { Edit, Delete } from "@element-plus/icons-vue";
data() {
return {
data_num: 1,
};
},
setup() {
return {
setup_num: 1,
Edit,
Delete,
};
},
效果如下：
image.png
② 按需加載
2.1 按需加載我們需要使用額外的插件來導入要使用的組件。
2.2 按需加載分為自動導入和手動導入。
自動導入：
首先你需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件
// 首先安裝相關依賴
npm install unplugin-vue-components unplugin-auto-import -D
yarn add unplugin-vue-components unplugin-auto-import -D
// 然后修改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 = {
// outputDir: "./build",
// 和webpack屬性完全一致，最后會進行合并
configureWebpack: {
resolve: {
alias: {
components: "@/components"
}
},
// 配置webpack按需自動引入element-plus
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
},
devServer: {
open: true,
host: 'localhost',
port: 8080,
//這里的ip和端口是前端項目的;下面為需要跨域訪問后端項目
proxy: {
'/api': {
target: 'http://localhost:3000', //這里填入你要請求的接口的前綴
changeOrigin: true, //虛擬的站點需要更管origin
secure: true, //是否https接口
pathRewrite: {
'^/api': '' //重寫路徑
},
}
}
}
}
// 然后再頁面引入需要使用的組件即可.
<div class="block">
<el-date-picker v-model="value1" type="datetime" @change="change" placeholder="Select date and time" />
</div>
效果如下：
image.png
手動導入：
第一種導入樣式的方法：
// 我們在main.ts中直接引入全局的element-plus樣式即可
import 'element-plus/theme-chalk/index.css'
第二章導入樣式的方法：
需要安裝 unplugin-element-plus 來導入樣式.
// yarn 安裝依賴
yarn add unplugin-element-plus -D
// 接下來在項目中，新建vite.config.js
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
plugins: [
[ElementPlus()]
],
})
// 然后在頁面使用即可 App.vue
// html
<el-button>I am ElButton</el-button>
// js
import { ElButton } from "element-plus";
// 自行導入樣式，用button就導入button.
import "element-plus/es/components/button/style/css";
export default defineComponent({
components: {
ElButton,
}
})
頁面效果：
image.png
