1. Element-Plus
可參考官網的安裝手冊
1
2
| # NPM
$ npm install element-plus --save
|
2. 快速開始 - 完整導入
對於網站打包大小不在乎，可以使用這個。
2.1. main.ts修改
1
2
3
4
5
6
7
8
9
| 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')
|
2.2. App.vue修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script setup lang="ts">
</script>
<template>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button>中文</el-button>
</el-row>
<router-view></router-view>
</template>
<style scoped>
html,
body{
width:100%;
height:100%;
}
</style>
|
2.3. 最後結果
3. 快速開始 - 自動導入
首先你需要安裝unplugin-vue-components 和 unplugin-auto-import 兩款套件
1
| npm install -D unplugin-vue-components unplugin-auto-import
|
3.1. 修改vite.config.ts 或 webpack
這次練習改vite.config.ts：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [vue()
,
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
})
|
3.2. 修改main.ts
確實將import elementplus 的程式註解：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { createApp } from 'vue'
import './assets/css/reset.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
|
3.3. 最後結果
再跑一次 npm run dev驗證結果，確實有自動導入功能：
