引言

手動(dòng)安裝配置Vue3 ElementPlus模板比較繁瑣，網(wǎng)上尋找一些模板不太符合自己預(yù)期，因此花點(diǎn)精力搭建一個(gè)符合自己需求的架子

采用最新的組件，版本如下：

• vite 4.3.9
• vite-plugin-mock 2.9.8
• vue 3.3.4
• pinia 2.1.3
• vue-router 4.2.2
• element-plus 2.3.6

滿足自己以下功能：

• Vite工具熱啟動(dòng)速度快，修改后編譯時(shí)間短（個(gè)人喜好）
• element-plus 組件豐富，適合快速開發(fā)
• 基本路由功能（vue-router官方推薦，配置也較簡(jiǎn)單）
• vite-plugin-mock，方便快速模擬接口返回?cái)?shù)據(jù)，這個(gè)功能比較方便

AntDesignVue組件也比較豐富，后面考慮再搭建一個(gè)AntDesignVue的版本

實(shí)現(xiàn)效果如下

功能設(shè)計(jì)

vue-router4

自動(dòng)在路由前和后添加NProgress動(dòng)畫效果
如下圖在頂部加上一個(gè)進(jìn)度條顯示加載進(jìn)度

import { createRouter, createWebHashHistory } from 'vue-router'
import NProgress from '~/utils/nprogress'

export const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'Root',
            redirect: '/home'
        },
        {
            path: '/home',
            name: 'Home',
            meta: {
                title: '主頁'
            },
            component: () => import('~/views/Home.vue'),
            children: []
        },
        {
            path: '/about',
            name: 'About',
            meta: {
                title: '關(guān)于'
            },
            component: () => import('~/views/About.vue'),
            children: []
        }
    ],
    strict: true,
    scrollBehavior: () => ({ left: 0, top: 0 })
})

router.beforeEach(() => {
    if (!NProgress.isStarted()) {
        NProgress.start()
    }
})

router.afterEach(() => {
    NProgress.done()
})

vite-plugin-mock

這里有個(gè)坑，最新的3.0版本，按照官方配置一直報(bào)錯(cuò)，退回到2.9.8正常

1.修改vite.config.ts

import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
    /****/
    plugins: [vue(), viteMockServe({ mockPath: './mock', localEnabled: true })],
    /****/
})

2.根目錄下面添加mock文件夾，新建index.ts

目錄結(jié)構(gòu)如下
├── index.html
├── mock
│   └── index.ts
├── src
......
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

這里模擬了兩個(gè)路由

// index.ts
import { MockMethod } from 'vite-plugin-mock'
export default [
    {
        url: '/api/test',
        method: 'get',
        response: ({}) => {
            return {
                code: 0,
                data: {
                    name: 'leo'
                }
            }
        }
    },
    {
        url: '/api/table',
        method: 'get',
        response: ({}) => {
            return {
                code: 0,
                data: [
                    { name: 'vue3' },
                    { name: 'vite' },
                    { name: 'vue-router4' },
                    { name: 'pinia' },
                    { name: 'vite-mock' }
                ]
            }
        }
    }
] as MockMethod[]

pinia

按官網(wǎng)定義一個(gè)counterstore分別在home.vue和about.vue兩個(gè)頁面使用

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => {
        return { count: 0 }
    },
    actions: {
        increment() {
            this.count++
        }
    }
})

Axios封裝

所有請(qǐng)求{code:0, data: xxxxxxx ,msg:''}格式
有報(bào)錯(cuò)使用ElMessage提示

import axios, { AxiosResponse } from 'axios'
import ElMessage from 'element-plus/lib/components/message/index.js'

// 創(chuàng)建 axios 實(shí)例
const service = axios.create({
    //   baseURL: "/api",
    timeout: 50000,
    headers: { 'Content-Type': 'application/json;charset=utf-8' }
})

// 響應(yīng)攔截器
service.interceptors.response.use(
    (response: AxiosResponse) => {
        const { code, msg } = response.data
        if (code === 0) {
            return response.data
        }
        ElMessage(msg || '系統(tǒng)出錯(cuò)')
        if (code === 401) {
            ElMessage.warning('會(huì)話過期,請(qǐng)重新登陸!')
            window.location.href = '/'
        }
        ElMessage.error(msg || 'Error')
        return Promise.reject(new Error(msg || 'Error'))
    },
    (error: any) => {
        ElMessage.error(error.message || '系統(tǒng)出錯(cuò)')
        return Promise.reject(error.message)
    }
)

// 導(dǎo)出 axios 實(shí)例
export const request = service

TODO

根據(jù)需求添加登錄功能、動(dòng)態(tài)獲取權(quán)限路由信息
創(chuàng)建AntDesignVue分支

項(xiàng)目地址

https://gitee.com/leobest2/my-vue3-template文章來源地址http://www.zghlxwxcb.cn/news/detail-473733.html

到了這里，關(guān)于Vue3 Vite4 ElementPlus TS模板(含Vue-Router4+Pinia4)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！