ToB企服应用市场:ToB评测及商务社交产业平台

标题: 从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios [打印本页]

---

作者: 北冰洋以北    时间: 2024-10-9 10:24
标题: 从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
项目同步git：vue3+vite+ts+pinia+vant+less: 空白的vue3架子，利用vant ui，适用于移动端一类的开发。 架子没有任何页面，基本无需删除任何代码，拉取便可直接用于开发。 假如有资助到各位朋友还请点个警惕心哦
 以为有资助的小伙伴请点下警惕心哦

为避免赘述，过于基础的点会直接省略或贴图，比如创建文件夹/文件的路径/路由一类
配置相应功能，也只管只贴相关代码，并不代表整个文件内容
我会只管把每一步都记录下来，让跟随文档操作的朋友也能还原项目
项目不尽完善，但是主体功能应该都可以有所参考
一.当地初始情况

二.利用vite脚手架，创建vue3+ts

1. yarn create vite

复制代码

输入项目名，回车确认

选择Vue和TypeScript

文件目次如下，项目创建成功！

 三.启动项目：根据提示进入项目运行项目，或自行利用编码器输入指令进行启动

1. yarn    // 安装依赖
2. yarn dev // 运行项目

复制代码

浏览器打开地点，运行成功！

四.必备依赖
This package contains type definitions for Node.js (Node.js — Run JavaScript Everywhere)

1. yarn add @types/node -S -D

复制代码

五.配置路径别名@
1.位置：直接改写vite.config.ts -- 顺便就添加alias

1. // vite.config.ts
3. import vue from "@vitejs/plugin-vue";
4. import { resolve } from "path";
6. function pathResolve(dir: string) {
7.   return resolve(process.cwd(), ".", dir);
8. }
10. // https://vitejs.dev/config/
11. export default () => {
12.   return {
13.     resolve: {
14.       alias: [
15.         {
16.           find: "@",
17.           replacement: pathResolve("src"),
18.         },
19.         {
20.           find: "views",
21.           replacement: pathResolve("src/views"),
22.         },
23.       ],
24.     },
25.     plugins: [vue()],
26.   };
27. };

复制代码

2.位置：tsconfig.json -- 修改baseUrl及paths

1. // tsconfig.json
2. {
4.   "compilerOptions": {
6.      ......
8. 　 "baseUrl": "./",
10.     "paths": {
12.       "@/*": ["src/*"],
14.       "views/*": ["src/views/*"],
16.       "components/*": ["src/components/*"],
18.       "assets/*": ["src/assets/*"]
20.     }
22.   },
24.   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
26.   "references": [{ "path": "./tsconfig.node.json" }]
28. }

复制代码

六.配置vue-router

1. yarn add vue-router -S

复制代码

推荐一个很好的插件nprogress【进度条】

1. yarn add @types/nprogress nprogress -D

复制代码

main.ts引入router

1. // main.ts
3. import { createApp } from 'vue'
4. import './style.css'
6. import App from './App.vue'
7. import router from "./router";
9. const app = createApp(App as any);
10. app.use(router)
12. app.mount('#app')

复制代码

src下创建router文件夹，项目往往须要模块化，以是代码只管不要杂糅在一起

1. /router/index.ts
3. import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
4. import NProgress from "nprogress";
5. import "nprogress/nprogress.css";
7. const modules: any = import.meta.glob("./modules/**/*.ts", { eager: true });
9. const routes: Array<RouteRecordRaw> = [];
10. for (const key in modules) {
11.     routes.push(...modules[key].default);
12. }
14. const router = createRouter({
15.     history: createWebHashHistory(), // history 模式则使用 createWebHistory()
16.     routes,
17. });
19. router.beforeEach(async (_to, _from, next) => {
20.     NProgress.start();
21.     next();
22. });
24. router.afterEach((_to) => {
25.     NProgress.done();
26. });
28. export default router;
29. /router/typings.d.ts 路由meta格式受控
31. /router/typing.d.ts
33. import "vue-router";
35. declare module "vue-router" {
36.     interface RouteMeta {
37.         // options
38.         　　title?: string;
39.         // every route must declare
40.         　　show?: boolean; //
41.     }
42. }

复制代码

然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view
test/index.ts

app.vue

 test/index.vue

查看页面

页面正确表现，路由摆设成功！

七.配置css预处理惩罚：less

1. yarn add less less-loader -D

复制代码

为了配置全局的less样式文件，同时引入fs模块

1. yarn add fs -D

复制代码

进入项目根目次的配置文件 
位置：vite.config.ts -- css

1. // vite.config.ts
3. import vue from "@vitejs/plugin-vue";
4. import { resolve } from "path";
5. import fs from 'fs'
7. function pathResolve(dir: string) {
8.   return resolve(process.cwd(), ".", dir);
9. }
11. // https://vitejs.dev/config/
12. export default () => {
13.   const lessResources: Array<String> = []
14.   fs.readdirSync('src/assets/styles').map((dirname) => {
15.     if (fs.statSync(`src/assets/styles/${dirname}`).isFile()) {
16.       lessResources.push(`@import "src/assets/styles/${dirname}";`)
17.     }
18.   })
19.   return {
20.     ......,
21. 　　// css
22.     css: {
23.       preprocessorOptions: {
24.         less: {
25.           charset: false,
26.           additionalData: lessResources.join(''),
27.           modifyVars: {
28.             'primary-color': '#0080FF',
29.             'link-color': '#0080FF',
30.             'border-radius-base': '4px',
31.           },
32.           javascriptEnabled: true,
33.         },
34.       },
35.     },
36.   };
37. };

复制代码

这里配置的公共less文件路径为src/assets/styles，创建styles文件夹和index.less文件

 进入index.less声明全局样式，测试less配置是否成功

 进入test/index.vue利用声明

 查看页面

盒子背景颜色改变，less及全局less配置成功！

八.配置svg

1. yarn add vite-plugin-svg-icons -D
2. yarn add fast-glob -D

复制代码

1. vite.config.ts引入插件

复制代码

1. // vite.config.ts
3. import vue from "@vitejs/plugin-vue";
4. import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
5. import path from "path";

复制代码

1. // https://vitejs.dev/config/
2. export default () => {
3.   return {
4.     ......,
5.     plugins: [
6.       vue(),
7.       createSvgIconsPlugin({
8.         // 指定需要缓存的图标文件夹
9.         　　iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
10.         // 指定symbolId格式
11.         　　symbolId: "icon-[dir]-[name]",
12.       }),
13.     ],
14.   };
15. };

复制代码

根据config配置创建存放svg的目次文件，并创建SvgIcon组件

 SvgIcon组件

1. // SvgIcon/index.vue
3. <template>
4.     <svg aria-hidden="true" class="svg-icon">
5.         <use :xlink:href="symbolId" :fill="color" />
6.     </svg>
7. </template>
9. <script lang="ts" setup>
10. import { computed } from "vue";
12. const props = defineProps({
13.     prefix: {
14.         type: String,
15.         default: "icon",
16.     },
17.     name: {
18.         type: String,
19.         required: true,
20.     },
21.     color: {
22.         type: String,
23.         default: "#333",
24.     },
25. });
26. const symbolId = computed(() => `#${props.prefix}-${props.name}`);
27. </script>
28. <style lang="less" scoped>
29. .svg-icon {
30.     width: 1em;
31.     height: 1em;
32.     fill: v-bind(color);
33.     vertical-align: middle;
34.     color: v-bind(color);
35. }
36. </style>

复制代码

在main.ts中注册SvgIcon为全局组件

1. // main.ts
3. import { createApp } from 'vue'
4. import './style.css'
5. import "virtual:svg-icons-register";
6. import SvgIcon from "@/components/SvgIcon/index.vue";
8. import App from './App.vue'
9. import router from "./router";
11. const app = createApp(App as any);
12. app.use(router)
14. app.mount('#app')
15. app.component("SvgIcon", SvgIcon);

复制代码

在test/index.vue中引入组件

1. // test/index.vue
3. <svg-icon name="test-vue" />

复制代码

查看页面，测试是否成功

 页面表现svg图标，svg组件配置成功！

九.配置pinia

1. pinia: 类似vuex的仓库
2. pinia-use-persist: 持久加密缓存pinia数据

复制代码

1. yarn add pinia pinia-use-persist -S

复制代码

main.ts中引入pinia

1. // main.ts
3. import { createApp } from 'vue'
4. import { createPinia } from 'pinia'
5. import { usePersist } from 'pinia-use-persist'
7. import App from './App.vue'
9. const app = createApp(App as any);
10. const pinia = createPinia()
11. pinia.use(usePersist)
12. app.use(pinia)

复制代码

src下创建store目次存放相关文件

 /store/modules下存放项目差异模块须要通过pinia通信的数据，冒充项目有一个test模块，存放了一个数据number

1. // store/modules/test/index.ts
3. import { defineStore } from "pinia";
5. interface stateType {
6.   number: number;
7. }
9. const useTestStore = defineStore("user", {
10.   state: (): stateType => ({
11.     number: 0,
12.   }),
14.   getters: {},
16.   actions: {
17.     setNumber(number: number): void {
18.       this.number = number;
19.     },
20.   },
22.   persist: {
23.     enabled: true,
24.     encryptionKey: "vueTest",
25.   },
26. });
28. export { useTestStore };

复制代码

store/index.ts引入各模块

1. // store/index.ts
3. import { createPinia } from "pinia";
4. import { useTestStore } from "./modules/test";
6. const pinia = createPinia();
8. export { useTestStore };
9. export default pinia;

复制代码

回到test/index.vue，测试pinia配置是否成功

1. // test/index.vue
3. <template>
4.     <!-- 测试pinia -->
5.     <button @click="number += 1">{{ number }}</button>
6.   </div>
7. </template>
9. <script setup lang="ts">
10. import { computed } from 'vue'
11. import { useTestStore } from '@/store'
13. const store = useTestStore()
14. const number = computed<number>({
15.   get() {
16.     return store.number
17.   },
18.   set(value) {
19.     store.setNumber(value)
20.   },
21. })
22. </script>

复制代码

点击按钮，革新后查看页面是否变革

页面数据没有初始化，pinia配置成功！

十.配置vant ui
vant ui：https://vant-contrib.gitee.io/vant/v4/#/zh-CN/home

1. yarn add vant

复制代码

这里再推荐一个插件，unplugin-vue-components【自动引入】，引入ui可以省去很多贫苦

1. yarn add unplugin-vue-components -D

复制代码

vite.config.ts中引入vant ui

1. // vite.config.ts
3. import vue from '@vitejs/plugin-vue';
4. import Components from 'unplugin-vue-components/vite';
5. import { VantResolver } from 'unplugin-vue-components/resolvers';
7. export default {
8.   plugins: [
9.     vue(),
10.     Components({
11.       resolvers: [VantResolver()],
12.     }),
13.   ],
14. };

复制代码

回到test/index.vue测试vant ui引入是否成功

1. // test/index.vue
3. <!-- 测试vant ui -->
4. <div>
5.   <van-button type="primary">vant button</van-button>
6. </div>

复制代码

革新页面查看

 按钮有样式，vant ui引入成功！
但是官方描述：Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在利用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此须要手动引入样式。
以是，这几个组件须要利用的话须要在main.ts中引入样式

1. // main.ts
3. // Toast
4. import 'vant/es/toast/style';
5. // Dialog
6. import 'vant/es/dialog/style';
7. // Notify
8. import 'vant/es/notify/style';
9. // ImagePreview
10. import 'vant/es/image-preview/style';

复制代码

回到test/index.vue测试，示例toast

1. // test/index.vue
3. import { Toast } from 'vant'
5. Toast('使用vant')

复制代码

查看页面

 toast有样式，vant ui引入成功！
但是，利用vant ui多是移动端，以是还要做移动端做以下适配
参考： https://vant-contrib.gitee.io/vant/v4/#/zh-CN/advanced-usage
1.适配安全距离
根据vant ui提供，在根文件index.html修改

1. // index.html
3.   <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
4.   <meta name="viewport"
5.     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />

复制代码

2.Viewport 布局
postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件，用于将 px 单元转化为 vw/vh 单元。

1. yarn add postcss-px-to-viewport-8-plugin -D

复制代码

vite.config.ts中更改配置

1. // vite.config.ts
3. import pxtovw from 'postcss-px-to-viewport-8-plugin'
4. const loder_pxtovw = pxtovw({
5. //这里是设计稿宽度 自己修改
6.   viewportWidth: 375,
7.   viewportUnit: 'vw'
8. })
9. export default defineConfig({
10.   ......,
11.   css: {
12.     postcss: {
13.       plugins: [loder_pxtovw]
14.     }
15.   }
16. })

复制代码

创建一个types/index.d.ts，用于处理惩罚包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖

1. // src/types/index.d.ts
3. declare module "postcss-px-to-viewport-8-plugin"

复制代码

革新页面，F12查看样式

 px已被转换，vant ui 及 移动端配置成功！

十一.配置axios

1. yarn add axios

复制代码

 tsconfig.json：types里加上"vite/client"

1. // tsconfig.json
3. {
4.   "compilerOptions": {
5.     ......,
6.     "types": ["vite/client", "vite-plugin-svg-icons/client"]
7.   },
8.   "include": [
9.     "src/**/*.ts",
10.     "src/**/*.d.ts",
11.     "src/**/*.tsx",
12.     "src/**/*.vue",
13.     "*.ts",
14.   ],
15.   "exclude": ["node_modules", "dist"],
16.   "references": [{ "path": "./tsconfig.node.json" }]
17. }

复制代码

src下创建axios哀求文件

 创建axios

1. // utils/http/axios/index.ts
3. import axios, {
4.   AxiosInstance,
5.   AxiosRequestConfig,
6.   AxiosResponse,
7.   AxiosError,
8. } from "axios";
9. import { IResponse } from "./type";
11. // 如果请求超过 `timeout` 的时间，请求将被中断
12. axios.defaults.timeout = 5000;
14. const axiosInstance: AxiosInstance = axios.create({
15.   baseURL: import.meta.env.VITE_APP_API_BASEURL + "",
16. });
18. // axios实例拦截请求
19. axiosInstance.interceptors.request.use(
20.   (config: AxiosRequestConfig) => {
21.     // 配置headers
22.     config.headers = {
23.       ...config.headers,
24.     };
25.     return config;
26.   },
27.   (error: any) => {
28.     return Promise.reject(error);
29.   }
30. );
32. // axios实例拦截响应
33. axiosInstance.interceptors.response.use(
34.   // 请求成功
35.   (response: AxiosResponse) => {
36.     return response;
37.   },
38.   // 请求失败
39.   (error: AxiosError) => {
40.     const { response } = error;
41.     console.error(response, "response error");
42.     if (response) {
43.       return Promise.reject(response.data);
44.     }
45.   }
46. );
48. const request = <T = any>(config: AxiosRequestConfig): Promise<T> => {
49.   const conf = config;
50.   return new Promise((resolve) => {
51.     axiosInstance
52.       .request<any, AxiosResponse<IResponse>>(conf)
53.       .then((res: AxiosResponse<IResponse>) => {
54.         const {
55.           data: { result },
56.         } = res;
57.         resolve(result as T);
58.       });
59.   });
60. };
62. export function get<T = any>(config: AxiosRequestConfig): Promise<T> {
63.   return request({ ...config, method: "GET" });
64. }
66. export function post<T = any>(config: AxiosRequestConfig): Promise<T> {
67.   return request({ ...config, method: "POST" });
68. }
70. export default request;
71. export type { AxiosInstance, AxiosResponse };
72. // utils/http/axios/type.ts
74. export interface RequestOptions {
75.     // Whether to process the request result
76.     isTransformResponse?: boolean;
77. }
79. // 返回res.data的interface
80. export interface IResponse<T = any> {
81.     code: number | string;
82.     result: T;
83.     data: T;
84.     message: string;
85.     status: string | number;
86. }

复制代码

根目次创建.env.development配置开发哀求地点

1. // .env.development
3. # 开发环境
5. VITE_APP_API_BASEURL = 你的请求地址
7. NODE_ENV = development
8. vite.config.ts配置server
10. // vite.config.ts
12.     server: {
13.       hmr: { overlay: false }, // 禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层
14.             // 服务配置
15.             port: 3030, // 类型： number 指定服务器端口;
16.             open: false, // 类型： boolean | string在服务器启动时自动在浏览器中打开应用程序；
17.             cors: false, // 类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
18.            host: "0.0.0.0", // IP配置，支持从IP启动
19.            ["/api"]: {
20.         target: process.env.VITE_APP_API_BASEURL,
21.         changeOrigin: true,
22.         rewrite: (path: string) => path.replace(new RegExp("^/api"), ""),
23.       },
24.     },

复制代码

创建api存放目次

  创建一个api

1. // api/test/index.ts
3. import { post } from "@/utils/http/axios";
4. import { IResponse } from "@/utils/http/axios/type";
6. export interface LoginData {
7.   username?: string;
8.   password?: string;
9. }
11. enum URL {
12.   login = "/api/user_center/testLogin",
13. }
15. /**
16. * @description: 用户登录
17. * @params {LoginData} params
18. * @return {Promise}
19. */
21. const login = async (data: LoginData) =>
22.   post<IResponse>({ url: URL.login, data });
24. export { login };

复制代码

回到test/index.vue调用api测试axios

1. // test/index.vue
3. <script setup lang="ts">
4. import { login } from '@/api/test'
6. login({})
7. </script>

复制代码

回到页面，查看network

 接口哀求成功，axios配置成功！
 最后，配置一下打包

1. // vite.config.ts
3. import { UserConfig, ConfigEnv, loadEnv } from "vite";
5. // https://vitejs.dev/config/
6. export default ({ command, mode }: ConfigEnv): UserConfig => {
7.   const env = loadEnv(mode, __dirname);
8.   return {
9.     base: env.NODE_ENV === "development" ? "/" : "./",
10.     build: {
11.       outDir: "dist",
12.       assetsDir: "assets", //指定静态资源存放路径
13.       　　sourcemap: false, //是否构建source map 文件
14.     },
15.   };
16. };

复制代码

启动dist，没问题！

结语：
项目到此主体功能就已经配置完毕了，细节之处大家多多查看官网和众多网友的分享
项目另有很多不美满甚至错误的地方，踩坑还会继续，后续有时间还会继续优化，现实利用中另有很多地方须要改进

项目同步git：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git

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

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4