vue3+element-plus搭建項目 · 我的文檔

## 一、構建項目 setup語法糖帶來的好處： * 定于的數據和方法，無需return。 * 引入的組件無需（components:{}）注冊，不在用寫name屬性了。前置知識：https://github.com/vuejs/rfcs/tree/master/active-rfcs setup語法糖：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md ### 1. 運行命令 npm init vite@latest 選擇vue3 選擇ts ### 2. 配置端口，解決在終端啟動時，出現Netword: use --host to expose問題在vite.config.ts文件中配置以下信息 ``` server: { host: '0.0.0.0', port: 8080, open: true } ``` ### 3. vite配置別名參考地址：https://vitejs.cn/config/#config-file-resolving npm install @types/node --save-dev ``` import { resolve } from 'path' // ... resolve: { ? ? alias: [{ ? ? ? find: '@', ? ? ? replacement: resolve(__dirname, 'src') ? ? }] ? } ``` ### 4. VSCode插件關閉Vetur，安裝Vue Language Features (Volar) 配置代碼快速生成在VsCode中，文件-首選項-用戶片段- vue3.json.code-snippets(global)，新建一個vue3.ts ### 5. 安裝路由 npm install vue-router@4 --save 參考：https://router.vuejs.org/zh/installation.html 新建路由文件`router/index.ts` ``` ts import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Layout from "@/layout/Index.vue" const routes: Array<RouteRecordRaw> = [ ? ? { ? ? ? ? path: '/', ? ? ? ? name: 'Layout', ? ? ? ? redirect: '/home', ? ? ? ? component: Layout, ? ? ? ? children: [ ? ? ? ? ? ? { ? ? ? ? ? ? ? ? path: '/home', ? ? ? ? ? ? ? ? name: 'Home', ? ? ? ? ? ? ? ? component: () => import('@/view/home/index.vue'), ? ? ? ? ? ? ? ? meta: { ? ? ? ? ? ? ? ? ? ? title: '首頁', ? ? ? ? ? ? ? ? ? ? icon: 'IceCream' ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ] ? ? }, ? ? { ? ? ? ? path: '/system', ? ? ? ? name: 'System', ? ? ? ? component: Layout, ? ? ? ? meta:{ ? ? ? ? ? ? title: '系統管理', ? ? ? ? ? ? icon: 'IceCream' ? ? ? ? }, ? ? ? ? children: [ ? ? ? ? ? ? { ? ? ? ? ? ? ? ? path: '/menu', ? ? ? ? ? ? ? ? name: 'Menu', ? ? ? ? ? ? ? ? component: () => import('@/view/system/menu/index.vue'), ? ? ? ? ? ? ? ? meta: { ? ? ? ? ? ? ? ? ? ? title: '菜單管理', ? ? ? ? ? ? ? ? ? ? icon: 'IceCream' ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? path: '/role', ? ? ? ? ? ? ? ? name: 'Role', ? ? ? ? ? ? ? ? component: () => import('@/view/system/role/index.vue'), ? ? ? ? ? ? ? ? meta: { ? ? ? ? ? ? ? ? ? ? title: '角色管理', ? ? ? ? ? ? ? ? ? ? icon: 'IceCream' ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? path: '/user', ? ? ? ? ? ? ? ? name: 'User', ? ? ? ? ? ? ? ? component: () => import('@/view/system/user/index.vue'), ? ? ? ? ? ? ? ? meta: { ? ? ? ? ? ? ? ? ? ? title: '用戶管理', ? ? ? ? ? ? ? ? ? ? icon: 'IceCream' ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ] ? ? } ] // 創建路由 const router = createRouter({ ? ? history: createWebHistory(), ? ? routes }) export default router ``` 在main.ts文件中引入，即可（測試是否生效，在頁面中通過 `<router-view />`） ``` import router from './router/index' createApp(App).use(router).mount('#app') ``` ### 6. 安裝Vuex4.x cnpm install vuex@next --save ts支持參考：https://vuex.vuejs.org/zh/guide/typescript-support.html 新建store/index.ts文件： ``` ts import { InjectionKey } from 'vue' import { createStore, useStore as baseUseStore, Store } from 'vuex' export interface State { ? ? count: number } export const key: InjectionKey<Store<State>> = Symbol() export const store = createStore<State>({ ? ? state: { ? ? ? ? count: 1 ? ? }, ? ? mutations: { ? ? ? ? setCount(state: State, count: number) { ? ? ? ? ? ? state.count = count ? ? ? ? } ? ? }, ? ? getters: { ? ? ? ? getCount(state: State) { ? ? ? ? ? ? return state.count ? ? ? ? } ? ? } }) // 注意此處我們自定義useStore方法 export function useStore() { ? ? return baseUseStore(key) } ``` 在mian.ts中引入 ``` import { store, key } from './store/index' createApp(App).use(store, key).mount('#app') ``` 在組件中驗證 ```ts import { computed } from 'vue' import { useStore } from '../store' // ... const showCount = computed(()=>{ ? return store.getters.getCount }) const addCount = () => { ? store.commit('setCount', ++count.value) } ``` 解決在組件中，如main.ts中 `@/...`報錯問題，在 `tsconfig.json`文件中 ``` // ... "esModuleInterop": true, "skipLibCheck": true,// 解決打包可能出現的報錯問題 "lib": ["esnext", "dom"], ? ? "baseUrl": ".", ? ? "paths": { ? ? ? "@/*": [ ? ? ? ? "src/*" ? ? ] } ``` ### 7. 配置eslint npm install eslint eslint-plugin-vue --save-dev 根目錄新建 `.eslintrc.js`文件： ``` module.exports = { ? ? root: true, ? ? parserOptions: { ? ? ? ? sourceType: 'module' ? ? }, ? ? parser: 'vue-eslint-parser', ? ? extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'], ? ? env: { ? ? ? ? browser: true, ? ? ? ? node: true, ? ? ? ? es6: true ? ? }, ? ? rules: { ? ? ? ? 'no-console': 'off', ? ? ? ? 'comma-dangle': [2, 'never'], // ... 更多配置... ? ? } } ``` ### 8. 添加css預處理器sass npm install sass sass-loader --save-dev 深層樣式修改：v-deep、:deep等方式。 ### 9. 引入element-plus cnpm install element-plus --save 圖標：cnpm install @element-plus/icons-vue --save 在main.ts中引入，有兩種方式，選其一即可。 * 方式一：配合 `<component :is="iconStr"></component> `使用，iconStr字符串開頭字母可小寫 * 方式二：配合`<Icon :icon="iconStr"> </Icon>`使用，iconStr字符串**開頭必須大寫，且駝峰命名**，和Icon圖標名稱保持一致。 * 注：在tsconfig.json文件中，配置`"suppressImplicitAnyIndexErrors": true,`可解決`Icons[icon]`的問題 ``` import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as Icons from '@element-plus/icons-vue' // ... const app = createApp(App).use(router).use(store, key).use(ElementPlus) // 方式一：配合 <component :is="icon"></component> 使用，icon字符串開頭字母可小寫 // 全局注冊圖標，暫時用于el-menu中菜單自定義（動態組件）圖標 Object.keys(Icons).forEach(key=>{ ? ? app.component(key, Icons[key as keyof typeof Icons]) }) // 方式二： const Icon = (props: { icon: string }) => { ? ? const { icon } = props ? ? return createVNode(Icons[icon as keyof typeof Icons]) } app.component('Icon', Icon) app.mount('#app') ``` ## 二、布局 ![](https://img.kancloud.cn/68/a3/68a343264d8e8439683b16009c0774bd_1920x646.png) * 文件目錄 ``` layout ---Index.vue ---aside ------Index.vue ------MenuItem.vue ---header ------Index.vue ------Breadcrumb.vue ---tabs ------Index.vue ``` * layout/index.vue ``` <template> <el-container class="vv-container"> <el-aside width="auto" class="vv-aside"> <div class="logo">{{ isCollapse ? "vvmily" : "vvmily LOGO" }}</div> <Aside /> </el-aside> <el-container> <el-header class="vv-header"> <Header /> </el-header> <Tabs /> <el-main class="vv-main"> <router-view /> </el-main> </el-container> </el-container> </template> // ... 省略 ``` 在此el-container布局中，在這里重點關注一下左側菜單`<Aside />`實現以及 `collapse`（配合 `vuex`）的控制，各個文件請[點擊前往查看倉庫](https://gitee.com/ming112/vvmily-vite-vue3-admin)。好了，到這里大體不居已經出來，剩下文字等細節樣式問題，可自行補充。