vite + vue + typscript + pinia + axios + vue-router + elementPlus

1. npm create vite@latest

复制代码

创建项目后

1. npm i
2. npm run dev

复制代码

1. "dependencies": {
2.     "vue": "^3.4.21"
3.   },
4. "devDependencies": {
5.   "@vitejs/plugin-vue": "^5.0.4",
6.   "typescript": "^5.2.2",
7.   "vite": "^5.2.0",
8.   "vue-tsc": "^2.0.6"
9. }

复制代码

需要安装的插件表格（希望需要安装的插件越来越少！！！）

插件名称备注pinia等同与 vuexpinia-plugin-persistedstatepinia持久化插件axiosapi请求库vue-router路由elementPlusUI框架unplugin-auto-import为 Vite、Webpack、Rollup 和 esbuild 按需主动导入 API。支持 TypeScript。unplugin-vue-componentsVue 的按需组件主动导入。vite-plugin-compression压缩大文件vite-plugin-style-import它会根据需要主动导入组件的样式文件rollup-plugin-visualizer这是一个依赖分析插件，它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包罗关系）、raw-data（原数据模式，json格式）, list(列表模式)eslinteslint针对的是javascript，他是一个检测工具，包罗js语法以及少部分格式题目，在eslint看来，语法对了就能；包管代码正常允许，格式题目属于其次；prettierprettier属于格式化工具，它看不惯格式差别一，所以它就把eslint没干好的事接着干，别的，prettier支持，包罗js在内的多种语言@vitejs/plugin-legacy为打包后的文件提供传统浏览器兼容性支持。unplugin-icons主动按需加载在图标，包括element plus 但是不仅仅时 element plus；使用教程请点击，具体包罗图标内容查看iconify官网请点击，unplugin-icons github请点击 添加底子路径

TS版本需要安装@types/node，不然会警告找不到对应的类型声明

1. npm install @types/node --save-dev

复制代码

vite.config.ts

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import { fileURLToPath, URL } from 'node:url'
5. // https://vitejs.dev/config/
6. export default defineConfig({
7.   plugins: [vue()],
8.   resolve: {
9.     alias: {
10.       '@': fileURLToPath(new URL('./src', import.meta.url))
11.     }
12.   },
13. })

复制代码

引入TS 文件会报错找不到相应类型声明，由于在设置好 vite.config.ts 文件后
tsconfig.json 文件 或者 jsconfig.json 文件也要举行文件系统路径别名设置。需要设置baseUrl和paths字段
tsconfig.json

1. {
2.   "compilerOptions": {
3.     "target": "ESNext",
4.     "useDefineForClassFields": true,
5.     "module": "ESNext",
6.     "moduleResolution": "Node",
7.     "strict": true,
8.     "jsx": "preserve",
9.     "resolveJsonModule": true,
10.     "isolatedModules": true,
11.     "esModuleInterop": true,
12.     "lib": ["ESNext", "DOM"],
13.     "skipLibCheck": true,
14.     "noEmit": true,
15.     "types": ["element-plus/global"],
16.     "baseUrl": "./",  // 解析非相对模块的基础地址，默认是当前目录
17.     "paths": {
18.       "@/*": ["./src/*"]  // 路径映射，相对于baseUrl
19.     }
20.   },
22.   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
23.   "references": [{ "path": "./tsconfig.node.json" }]
24. }

复制代码

安装 pinia

1. pnpm install --save pinia
2. npm i pinia-plugin-persistedstate

复制代码

1. "dependencies": {
2.     "pinia": "^2.1.7",
3.     "pinia-plugin-persistedstate": "^3.2.1",
4.     "vue": "^3.4.21"
5.   },

复制代码

创建文件夹：src\store\index.ts

重要是创建一个实例

1. import type { App } from 'vue'
2. import { createPinia } from 'pinia'
3. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //数据持久化
5. const store = createPinia()
7. store.use(piniaPluginPersistedstate)
9. export const setupStore = (app: App<Element>) => {
10.   app.use(store)
11. }
12. export { store }

复制代码

挂载vue

1. import { createApp } from 'vue'
2. import './style.css'
3. import App from './App.vue'
4. import { setupStore } from '@/store'
6. const app = createApp(App)
7. setupStore(app)
9. app.mount('#app')

复制代码

使用时：

创建：src/store/modules/user.ts

1. import { defineStore } from 'pinia'
3. interface UserState {
4.   userInfo?: string
5.   tokenKey: string
6.   token: string
7.   roleRouters?: string[]
8.   rememberMe: boolean
9.   loginInfo?: string
10. }
12. export const useUserStore = defineStore('user', {
13.   state: (): UserState => {
14.     return {
15.       userInfo: undefined,
16.       tokenKey: '',
17.       token: '',
18.       roleRouters: undefined,
19.       rememberMe: true,
20.       loginInfo: undefined
21.     }
22.   },
23.   getters: {
24.     getTokenKey(): string {
25.       return this.tokenKey
26.     },
27.     getToken(): string {
28.       return this.token
29.     },
30.   },
31.   actions: {
32.     setTokenKey(tokenKey: string) {
33.       this.tokenKey = tokenKey
34.     },
35.     setToken(token: string) {
36.       this.token = token
37.     },
38.   },
39.   // persist: true // 一键开启数据持久化，使用默认配置
41.   // 开启数据持久化，自定义配置
42.   persist: {
43.         // Key 用于引用 storage 中的数据
44.           // 这个 Store 将被持久化存储在 localStorage 中的 my-custom-key key 中。
45.     key: 'my-custom-key',
46.     // 将数据持久化到 storage 中，必须具有 getItem: (key: string) => string | null 和 setItem: (key: string, value: string) => void 两个方法。
47.         // 这个 store 将被持久化存储在 sessionStorage中。
48.     storage: sessionStorage,
50.     // 用于指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state。
51.     // 该 store 中, 只有userInfo 和 rememberMe 被持久化，而其他不会被持久化。
52.     paths: ['userInfo', 'rememberMe'],
54.     // 该 hook 将在从 storage 中恢复数据之前触发，并且它可以访问整个 PiniaPluginContext，这可用于在恢复数据之前强制地执行特定的操作。
55.     beforeRestore: (ctx) => {
56.       console.log(`即将恢复 '${ctx.store.$id}'`)
57.     },
59.     // 该 hook 将在从 storage 中恢复数据之后触发，并且它可以访问整个 PiniaPluginContext，这可用于在恢复数据之后强制地执行特定的操作。
60.     afterRestore: (ctx) => {
61.       console.log(`刚刚恢复完 '${ctx.store.$id}'`)
62.     },
64.     // 当设置为 true 时，持久化/恢复 Store 时可能发生的任何错误都将使用 console.error 输出。
65.     debug: true
66.   },
67. })

复制代码

在组件中使用

1. <script setup>
2. import {useUserStore} from '@/store/modules/user';
3. const store = useUserStore();
4. // ...
5. store.setTokenKey({...}); // 直接调用是不是很方便
6. // ...
7. store.user.page; // 直接获取
8. </script>

复制代码

更多具体使用请点击此处

安装axios

1. pnpm i axios
2. // 或者
3. npm i axios

复制代码

创建文件： src\utils\request.ts

1. import axios from 'axios';
2. // 配置新建一个 axios 实例
3. const service = axios.create({
4.         baseURL: import.meta.env.VITE_API_URL, // 环境变量
5.         timeout: 50000,
6.         headers: { 'Content-Type': 'application/json' },
7. });
8. // 添加请求拦截器
9. service.interceptors.request.use(
10.         (config) => {
11.                 // 在发送请求之前做些什么
12.                 return config;
13.         },
14.         (error) => {
15.                 // 对请求错误做些什么
16.                 return Promise.reject(error);
17.         }
18. );
20. // 添加响应拦截器
21. service.interceptors.response.use(
22.         (response) => {
23.                 // 对响应数据做点什么
24.                 const res = response.data;
25.                 const {status, data, message} = response || {};
26.                 if (status !== 200) {
27.                         const {message: messageErr} = service.interceptors.response.data || {};
28.                         return Promise.reject(messageErr);
29.                 } else {
30.                         return {status, data};
31.                 }
32.         },
33.         (error) => {
34.                 const {data, status} = error.response || {};
35.                 // 对响应错误做点什么 ...
36.                 return Promise.reject(messageErr);
37.         }
38. );
39. // 导出 axios 实例
40. export default service;

复制代码

使用时：
创建

1. import request from "../../utils/request";
3. export function userlist(params) {
4.   return request({
5.     url: `/userlist`,
6.     method: "GET",
7.     params,
8.   });
9. }
11. export function addUser(params) {
12.   return request({
13.     url: `/addUser`,
14.     method: "POST",
15.     data: {
16.       ...params
17.     }
18.   });
19. }

复制代码

在组件中使用

1. <script setup>
2. import {deleteRoleApi} from '/@/api/...';
3. deleteRoleApi(id).then(res => {})
4. </script>

复制代码

安装vue-router

1. pnpm install vue-router --save

复制代码

创建文件：src\router\index.ts

1. import { createRouter, createWebHashHistory } from 'vue-router'
2. import type { RouteRecordRaw } from 'vue-router'
3. import type { App } from 'vue'
4. import { NO_RESET_WHITE_LIST } from '@/assets/constants'
6. const Layout = () => import('@/layout/Layout.vue')
8. export const constantRouterMap: AppRouteRecordRaw[] = [
9.   {
10.     path: '/',
11.     component: Layout,
12.     redirect: '/dashboard/analysis',
13.     name: 'Root',
14.     meta: {
15.       hidden: true
16.     }
17.   },
18.   {
19.     path: '/login',
20.     component: () => import('@/views/Login/Login.vue'),
21.     name: 'Login',
22.     meta: {
23.       hidden: true,
24.       noTagsView: true
25.     }
26.   },
27.   {
28.     path: '/personal',
29.     component: Layout,
30.     redirect: '/personal/personal-center',
31.     name: 'Personal',
32.     meta: {
33.       hidden: true,
34.       canTo: true
35.     },
36.     children: [
37.       {
38.         path: 'personal-center',
39.         component: () => import('@/views/Personal/PersonalCenter/PersonalCenter.vue'),
40.         name: 'PersonalCenter',
41.         meta: {
42.           hidden: true,
43.           canTo: true
44.         }
45.       }
46.     ]
47.   },
48.   {
49.     path: '/404',
50.     component: () => import('@/views/Error/404.vue'),
51.     name: 'NoFind',
52.     meta: {
53.       hidden: true,
54.       title: '404',
55.       noTagsView: true
56.     }
57.   }
58. ]
60. export const asyncRouterMap: AppRouteRecordRaw[] = [
61.   
62.   {
63.     path: '/error',
64.     component: Layout,
65.     redirect: '/error/404',
66.     name: 'Error',
67.     meta: {
68.       icon: 'ci:error',
69.       alwaysShow: true
70.     },
71.     children: [
72.       {
73.         path: '404-demo',
74.         component: () => import('@/views/Error/404.vue'),
75.         name: '404Demo',
76.         meta: {
77.           title: '404'
78.         }
79.       },
80.       {
81.         path: '403-demo',
82.         component: () => import('@/views/Error/403.vue'),
83.         name: '403Demo',
84.         meta: {
85.           title: '403'
86.         }
87.       },
88.       {
89.         path: '500-demo',
90.         component: () => import('@/views/Error/500.vue'),
91.         name: '500Demo',
92.         meta: {
93.           title: '500'
94.         }
95.       }
96.     ]
97.   },
98.   
99. ]
101. const router = createRouter({
102.   history: createWebHashHistory(),
103.   strict: true,
104.   routes: constantRouterMap as RouteRecordRaw[],
105.   scrollBehavior: () => ({ left: 0, top: 0 })
106. })
108. export const resetRouter = (): void => {
109.   router.getRoutes().forEach((route) => {
110.     const { name } = route
111.     if (name && !NO_RESET_WHITE_LIST.includes(name as string)) {
112.       router.hasRoute(name) && router.removeRoute(name)
113.     }
114.   })
115. }
117. export const setupRouter = (app: App<Element>) => {
118.   app.use(router)
119. }
121. export default router

复制代码

挂载到vue

1. import { createApp } from 'vue'
2. import '@/style.css'
3. import App from '@/App.vue'
4. import { setupStore } from '@/store'
5. import { setupRouter } from '@/router'
7. const app = createApp(App)
8. setupStore(app)
9. setupRouter(app)
10. app.mount('#app')

复制代码

安装scss

直接安装不需要node-sass 和 sass-loader

1. npm install -D sass

复制代码

安装 按需加载 element plus

1. npm install element-plus

复制代码

安装相关按需加载的插件

1. npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons vite-plugin-style-import consola

复制代码

vite.config.ts

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import { fileURLToPath, URL } from 'node:url'
4. import AutoImport from 'unplugin-auto-import/vite'
5. import Components from 'unplugin-vue-components/vite'
6. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
7. import { FileSystemIconLoader } from 'unplugin-icons/loaders'
8. import Icons from 'unplugin-icons/vite'
9. import IconsResolver from 'unplugin-icons/resolver'
10. import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
12. // https://vitejs.dev/config/
13. export default defineConfig({
14.   plugins: [
15.     vue(),
16.     AutoImport({
17.       imports: ['vue', 'vue-router'], // 自动引入相关api
18.       resolvers: [
19.         ElementPlusResolver(),
20.         IconsResolver({
21.           // 设置自动导入的图标组件前缀
22.           prefix: 'icon',
23.           // 标识自定义图标集
24.           customCollections: ['ci']
25.         })
26.       ],
27.     }),
28.     Components({
29.       resolvers: [
30.         ElementPlusResolver(),
31.         IconsResolver({
32.           // 设置自动导入的图标组件前缀
33.           prefix: 'icon',
34.           // 标识自定义图标集
35.           customCollections: ['ci']
36.         })
37.       ],
38.     }),
39.     Icons({
40.       compiler: 'vue3',
41.       autoInstall: true,
42.       // 自定义配置
43.       customCollections: {
44.         ci: FileSystemIconLoader('./src/assets/svg', svg => svg.replace(/^<svg /, '<svg fill="currentColor" '))
45.       }
46.     }),
47.     createStyleImportPlugin({
48.       resolves: [ElementPlusResolve()],
49.       libs: [
50.         {
51.           libraryName: 'element-plus',
52.           esModule: true,
53.           resolveStyle: (name) => {
54.             if (name === 'click-outside') {
55.               return ''
56.             }
57.             return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
58.           }
59.         }
60.       ]
61.     }),
62.   ],
63.   resolve: {
64.     alias: {
65.       '@': fileURLToPath(new URL('./src', import.meta.url))
66.     }
67.   },
68. })

复制代码

使用方式，直接用不需要import

1. <script setup>
3. import IconBaseline5g from '~icons/ep/edit'
5. </script>
7. <template>
8.   
10. <!-- 使用component 需要先引用 -->
11.   <el-icon :size="20">
12.     <component :is="IconBaseline5g" />
13.   </el-icon>
14.   <!--  直接使用，不需要引用 -->
15.   <!-- icon是头部（上面vite.config.js 配置的prefix: 'icon'）-->
16.   <!-- ep是element plus图标库的简称 edit是图标的名字 -->
17.   <el-icon :size="20">
18.     <iconEpEdit />
19.   </el-icon>
20.   <!--  使用本地自定义的svg -->
21.   <!-- icon是头部（上面vite.config.js 配置的prefix: 'icon'）-->
22.   <!-- Ci是自定义图标的集合（上面vite.config.js 配置的customCollections: {
23.       ci: FileSystemIconLoader...） vue是自定义目录下的svg文件的名称 -->
24.   <el-icon :size="20">
25.     <iconCiVue />
26.   </el-icon>
27. </template>

复制代码

静态资源动态引用：图片

vite官方推荐
使用require的可以用上面的方法更换
@vitejs/plugin-legacy

安装
必须安装 Terser，由于插件遗留版使用 Terser 举行缩小。

1. npm i -D @vitejs/plugin-legacy terser

复制代码

1. // vite.config.js
2. import legacy from '@vitejs/plugin-legacy'
4. export default {
5.   plugins: [
6.     legacy({
7.       targets: ['defaults', 'not IE 11'],
8.     }),
9.   ],
10. }

复制代码

vite-plugin-compression 压缩大文件

安装

1. npm i -D vite-plugin-compression

复制代码

1. import viteCompression from "vite-plugin-compression";
2. plugins: [
3.                         viteCompression({
4.                                 verbose: true,
5.                                 disable: false,
6.                                 deleteOriginFile: false,
7.                                 // 文件大于 100Kb 开启压缩
8.                                 threshold: 100000,
9.                                 algorithm: "gzip",
10.                                 ext: "gz",
11.                         }),
12.                 ],

复制代码

压缩文件需要搭配nginx 设置，详情请点击
rollup-plugin-visualizer 这是一个依赖分析插件

参考链接：https://blog.csdn.net/g18204746769/article/details/127431733
安装

1. pnpm install vite-plugin-cdn-import --save-dev

复制代码

1. import { visualizer } from 'rollup-plugin-visualizer';
2. plugins: [
3.         visualizer()
4. ]

复制代码

vite.config.js全部的设置

想了解设置想请点击

1. import { defineConfig, loadEnv } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import { fileURLToPath, URL } from 'node:url'
4. import AutoImport from 'unplugin-auto-import/vite'
5. import Components from 'unplugin-vue-components/vite'
6. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
7. import { FileSystemIconLoader } from 'unplugin-icons/loaders'
8. import Icons from 'unplugin-icons/vite'
9. import IconsResolver from 'unplugin-icons/resolver'
10. import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
11. import legacy from '@vitejs/plugin-legacy'
12. import viteCompression from "vite-plugin-compression";
14. // https://vitejs.dev/config/
15. export default defineConfig((mode): any => {
16.   const env = loadEnv(mode.mode, process.cwd())
17.   return {
18.     plugins: [
19.       vue(),
20.       AutoImport({
21.         imports: ['vue', 'vue-router'], // 自动引入相关api
22.         resolvers: [
23.           ElementPlusResolver(),
24.           IconsResolver({
25.             // 设置自动导入的图标组件前缀
26.             prefix: 'icon',
27.             // 标识自定义图标集
28.             customCollections: ['ci']
29.           })
30.         ],
31.       }),
32.       Components({
33.         resolvers: [
34.           ElementPlusResolver(),
35.           IconsResolver({
36.             // 设置自动导入的图标组件前缀
37.             prefix: 'icon',
38.             // 标识自定义图标集
39.             customCollections: ['ci']
40.           })
41.         ],
42.       }),
43.       Icons({
44.         compiler: 'vue3',
45.         autoInstall: true,
46.         // 自定义配置
47.         customCollections: {
48.           ci: FileSystemIconLoader('./src/assets/svg', svg => svg.replace(/^<svg /, '<svg fill="currentColor" '))
49.         }
50.       }),
51.       createStyleImportPlugin({
52.         resolves: [ElementPlusResolve()],
53.         libs: [
54.           {
55.             libraryName: 'element-plus',
56.             esModule: true,
57.             resolveStyle: (name) => {
58.               if (name === 'click-outside') {
59.                 return ''
60.               }
61.               return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
62.             }
63.           }
64.         ]
65.       }),
66.       legacy({
67.         targets: ['defaults', 'not IE 11'],
68.       }),
69.       viteCompression({
70.         verbose: true,
71.         disable: false,
72.         deleteOriginFile: false,
73.         // 文件大于 100Kb 开启压缩
74.         threshold: 100000,
75.         algorithm: "gzip",
76.         ext: "gz",
77.       }),
78.     ],
79.     resolve: {
80.       alias: {
81.         '@': fileURLToPath(new URL('./src', import.meta.url))
82.       }
83.     },
84.     server: {
85.       host: '0.0.0.0',
86.       port: env.VITE_PORT,
87.       open: false,
88.       proxy: {
89.         '/api': {
90.           target: 'https://gitee.com',
91.           ws: true,
92.           changeOrigin: true,
93.           rewrite: (path:string) => path.replace(/^\/gitee/, ''),
94.         },
95.       },
96.     },
97.     build: {
98.       outDir: 'dist',
99.       chunkSizeWarningLimit: 1500,
100.       rollupOptions: {
101.         output: {
102.           entryFileNames: `assets/[name].${new Date().getTime()}.js`,
103.           chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
104.           assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
105.           compact: true,
106.           // manualChunks: {
107.           //         vue: ['vue', 'vue-router', 'pinia'],
108.           //         echarts: ['echarts'],
109.           // antvG6: ['@antv/g6'],
110.           // elementPlus: ['element-plus'],
111.           // },
112.           manualChunks(id:string[]) {
113.             // if (id.includes("style.css")) {
114.             //         // 需要单独分割那些资源 就写判断逻辑就行
115.             //         return 'src/style.css';
116.             // }
117.             // if (id.includes("HelloWorld.vue")) {
118.             //         // 单独分割hello world.vue文件
119.             //         return 'src/components/HelloWorld.vue';
120.             // }
121.             // // 最小化拆分包
122.             if (id.includes('node_modules')) {
123.               return id
124.                 .toString()
125.                 .split('node_modules/')[1]
126.                 .split('/')[0]
127.                 .toString()
128.             }
129.           },
130.         },
131.       },
132.       minify: 'terser',
133.       terserOptions: {
134.         compress: {
135.           drop_console: mode.mode === 'prd',
136.           drop_debugger: mode.mode === 'prd',
137.         },
138.       },
139.       sourcemap: mode.mode !== 'prd',
140.     },
141.     css: {
142.       devSourcemap: true,
143.       preprocessorOptions: { css: { charset: false } },
144.     },
145.   }
146. })

复制代码

找不到模块“@/xxx/xxx.vue”或其相应的类型声明。ts(2307)

设置tsconfig.json：确保你的tsconfig.json文件中包罗了对.vue文件的支持。

1. {
2.   "compilerOptions": {
3.     "types": ["vue/vue3"] // 如果你使用的是Vue 3
4.     // 或者 "types": ["vue/vue2"] 如果你使用的是Vue 2
5.   }
6. }

复制代码

创建类型声明文件（如果主动处理不起作用）：如果主动处理不起作用，你可以手动创建一个声明文件，例如shims-vue.d.ts，并在此中添加以下内容

1. declare module '*.vue' {
2.   import type { DefineComponent } from 'vue'
3.   const component: DefineComponent<{}, {}, any>
4.   export default component
5. }

复制代码

安装eslint && prettier

根据个人需求，我参考的这几个链接：
https://blog.csdn.net/m0_53022813/article/details/137379423
https://juejin.cn/post/7118294114734440455#heading-1
https://blog.csdn.net/weixin_43459866/article/details/124249172
https://blog.csdn.net/weixin_43993776/article/details/132564724
无法找到模块 vite-plugin-eslint 插件中的 TS 声明文件，隐式含有 “any” 类型。
vscode使用eslint
源码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。