%20(2).svg)
项目简介
本项目运用 Vue3、TypeScript、Pinia 以及 Vue Router 构建，致力于打造高效且可维护的前端应用。通过集成 unplugin-auto-import、unplugin-vue-components 等实用插件，有效提升开发效率，简化开发流程。
项目的主要特性和功能
- 状态管理：利用 Pinia 实现组件间状态的高效管理与共享，让代码组织更清晰。
- 路由功能：集成 Vue Router，实现页面间的流畅跳转和组件切换。
- 类型安全：采用 TypeScript 开发，提供静态类型检查，增强代码的稳定性和可维护性。
- 自动化导入：使用 unplugin-auto-import 自动引入
vue、vue-router等常用模块，减少手动导入代码。 - 组件自动引入：unplugin-vue-components 可自动引入组件，无需手动编写导入和注册代码。
- 组件命名增强：unplugin-vue-define-options 和 vite-plugin-vue-setup-extend 为 Vue3 组件提供便捷的命名方式。
- 状态持久化：pinia-plugin-persist 插件实现 Pinia 状态的持久化存储。
安装使用步骤
1. 安装依赖
在项目根目录下，打开终端并执行以下命令：
bash
npm install
2. 配置插件
在 vite.config.ts 中对各插件进行配置，示例如下：
```ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import defineOptions from 'unplugin-vue-define-options/dist/vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import {
AntDesignVueResolver,
ElementPlusResolver,
VantResolver,
} from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
dts: 'src/type/auto-import.d.ts',
}),
Components({
dts: 'src/type/components.d.ts',
resolvers: [
AntDesignVueResolver(),
ElementPlusResolver(),
VantResolver(),
],
}),
defineOptions(),
vueSetupExtend()
]
})
同时，在 `tsconfig.json` 中添加相应类型支持：json
{
"compilerOptions": {
"types": ["unplugin-vue-define-options/macros-global"]
},
"include": ["src//*.ts", "src//.d.ts", "src//.tsx", "src/*/.vue"]
}
```
3. 启动项目
配置完成后，执行以下命令启动开发服务器：
bash
npm run dev
4. 构建项目
如需构建生产版本，可执行以下命令：
bash
npm run build
5. 状态持久化配置
在使用 Pinia 时，按照 pinia-plugin-persist 插件的文档进行配置，实现状态的持久化存储。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】