Vue3 Vite4 ElementPlus TS模板(含Vue-Router4+Pinia4)

最新推荐文章于 2025-05-27 09:31:38 发布

原创

最新推荐文章于 2025-05-27 09:31:38 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#vue.js #前端 #javascript

本文介绍了手动搭建Vue3+ElementPlus项目的步骤，包括使用Vite4.3.9进行快速启动，vue-router4实现路由管理，pinia2.1.3处理状态管理，以及vite-plugin-mock2.9.8用于模拟接口数据。项目还利用NProgress添加路由动画，同时提到了可能遇到的问题和解决方案，如降级使用mock插件的旧版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

手动安装配置Vue3 ElementPlus模板比较繁琐，网上寻找一些模板不太符合自己预期，因此花点精力搭建一个符合自己需求的架子

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

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工具热启动速度快，修改后编译时间短（个人喜好）
element-plus 组件丰富，适合快速开发
基本路由功能（vue-router官方推荐，配置也较简单）
vite-plugin-mock，方便快速模拟接口返回数据，这个功能比较方便

AntDesignVue组件也比较丰富，后面考虑再搭建一个AntDesignVue的版本

实现效果如下

在这里插入图片描述

功能设计

vue-router4

自动在路由前和后添加NProgress动画效果
如下图在顶部加上一个进度条显示加载进度

在这里插入图片描述

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