1. Install

Official Website: element-plus.org/zh-CN/guide…

Official Website: element-plus.org/zh-CN/compo…

1.1 Import

npm install

npm install element-plus --save
npm install @element-plus/icons-vue

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia, storeToRefs } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import './assets/iconfont/iconfont.css'

import App from './App.vue'
import router from './router/index'
import i18n from './i18n';

const app = createApp(App)

const pinia = createPinia()
pinia.use(
   createPersistedState({
      auto: true
   })
)
app.use(pinia)
   .use(router)
   .use(ElementPlus)
   .use(i18n)

//圖標
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
   }
app.mount('#app')

1.2 自动导入

install

npm install -D unplugin-vue-components unplugin-auto-import

modify vite.config.ts

import { defineConfig } from 'vite'
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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2. Technology

Vue3.x + Vite + Pinia + Router + ElementPlux +I18n + axios + TypeScript

  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.0",
    "element-plus": "^2.7.3",
    "moment": "^2.24.0",
    "pinia": "^2.1.7",
    "pinia-plugin-persist": "^1.0.0",
    "pinia-plugin-persistedstate": "^3.2.1",
    "vue": "^3.4.21",
    "vue-i18n": "^9.5.0",
    "vue-router": "^4.3.0"
  },

3. Constructure

vue-demo
├── public/          # static files
│   └── favicon.ico  # title icon (可以多個，切換路由titile也切換) 
├── src/             # project root
│   ├── assets/      # images, icons, etc.靜態資源
│   ├── components/  # common components - 客製化頁面
│   ├── layouts/     # layout containers -header, footer,sidebar, etc.
│   ├── scss/        # scss styles
│   ├── config/      # 封裝http
│   ├── i18n/        # 多語言切換
│   │   ├── locales/        # 多語言切換
│   │   │   ├── en.ts         # 中文
│   │   │   ├── zh.ts         # 英文
│   │   │   └── xxx.ts        # 其他文
│   │   └── index.ts        # I18N切換
│   ├── router/       # routes config
│   ├── stores/      # template state example 
│   ├── views/pages  # Route apge,路由導航的頁面
│   ├── App.vue      # 三個標籤 template /script  /style
│   └── main.ts      # 加載所有組件，掛載都index.html
│
├── .env.development  # 多環境配置，在package.json啟動腳本中設定讀取
├── .env.production  # 多環境配置，在package.json啟動腳本中設定讀取
├── env.d.ts         # vue識別所有格式的文件
├── index.html       # 入口文件，main.ts
├── package.json     # dependency
└── vite.config.ts   # project config,install plugin,proxy

4. IconFont

Website： www.iconfont.cn

• 进入官网，登录注册

• 资源管理 -> 我的项目 -> 创建项目

• 将喜欢的图标放入到自己的项目中并下载

  

• 将解压后的文件放入到/src/assets/iconfont下

  demo开头的文件可以删除

  

• 样式都在iconfont.css中，所以在main.ts中导入

  import './assets/iconfont/iconfont.css'

• 项目中使用

  <i class="iconfont iconedit" />

5. Element Plus Table錯位問題

使用fixed後，窗口尺寸變更會導致table格式錯位。在樣式中加入display:flex

<template>
  <el-table
    ref="singleTableRef"
    :data="tableData"
    style="width: 100%;display: flex"
    @current-change="handleCurrentChange"
  >
    <el-table-column type="index" width="50"/>
    <el-table-column property="department" label="部門" width="80" />
  </el-table>
</template>