vue3+ts uniapp小步伐项目搭建

1.搭建脚手架

1. npx degit dcloudio/uni-preset-vue#vite-ts my-uniapp-project

复制代码

2.安装依靠

1. npm install

复制代码

 3.配置.eslintrc.js、.eslintignore、.prettierrc.js、.prettierignore文件

1. npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier

复制代码

• .eslintrc.js文件
  1. module.exports = {
  2.   root: true,
  3.   env: {
  4.     browser: true,
  5.     node: true,
  6.     es2021: true,
  7.   },
  8.   extends: [
  9.     'plugin:vue/vue3-recommended',
  10.     'eslint:recommended',
  11.     '@vue/typescript/recommended',
  12.     'prettier',
  13.     'plugin:prettier/recommended',
  14.   ],
  15.   parserOptions: {
  16.     ecmaVersion: 2021,
  17.     parser: '@typescript-eslint/parser',
  18.   },
  19.   rules: {
  20.     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  21.     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  22.     'vue/multi-word-component-names': 'off',
  23.     '@typescript-eslint/no-explicit-any': 'off',
  24.     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
  25.     'vue/no-v-html': 'off',
  26.   },
  27. }

  复制代码
•  .eslintignore文件
  1. node_modules
  2. dist
  3. unpackage
  4. .hbuilderx
  5. .git
  6. *.d.ts

  复制代码
•  .prettierrc.js文件
  1. {
  2.   "semi": false,
  3.   "singleQuote": true,
  4.   "printWidth": 100,
  5.   "trailingComma": "es5",
  6.   "arrowParens": "avoid",
  7.   "endOfLine": "auto",
  8.   "tabWidth": 2,
  9.   "useTabs": false
  10. }

  复制代码
•  .prettierignore文件
  1. node_modules
  2. dist
  3. unpackage
  4. .hbuilderx
  5. .git
  6. *.d.ts
  7. package-lock.json

  复制代码

4. 安装sass（编写sass/scss样式）

1. npm install -D sass sass-loader

复制代码

5.对uni-ui的支持

1. npm install @dcloudio/uni-ui

复制代码

 6.增长uiapp对ts的支持

1. npm install @uni-helper/uni-types

复制代码

• 在tsconfig.json文件中配置 TypeScript 编译器，使其在处理 Vue 文件时可以或许利用 @uni-helper/uni-types/volar-plugin 插件提供的额外支持和增强功能。通过这种方式，开辟者可以得到更精确的类型检查、代码补全和其他相关的开辟体验改进，特别是在利用 UniApp 框架时。 
  

1. "vueCompilerOptions": {
2.         "plugins": [
3.             "@uni-helper/uni-types/volar-plugin"
4.         ]
5.     }

复制代码

• tsconfigjson 
  

1. {
2.   // "extends": "@vue/tsconfig/tsconfig.json",
3.   "compilerOptions": {
4.     "sourceMap": true,
5.     "module": "ESNext",
6.     /* Bundler mode */
7.     "moduleResolution": "Bundler",
8.     "baseUrl": ".",
9.     "paths": {
10.       "@/*": ["./src/*"]
11.     },
12.     "lib": ["esnext", "dom"],
13.     "types": ["@dcloudio/types", "@uni-helper/uni-types"]
14.   },
15.   //加入配置，将标签视为原始组件
16.   "vueCompilerOptions": {
17.     "plugins": ["@uni-helper/uni-types/volar-plugin"]
18.   },
19.   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
20. }

复制代码

7.环境配置.env

1. # Node 运行环境
2. NODE_ENV=development
4. # 后端接口地址
5. VITE_APP_BASE_URL=https://xxx.xxxx.com
7. # oss资源地址
8. VITE_APP_OSS_URL=https://xxx.com
10. # 接口基础地址
11. VITE_APP_BASE_API=/app-api
13. # 自定义环境标识
14. VITE_APP_ENV=development

复制代码

8.配置pinia

1. npm i pinia
2. npm i pinia-plugin-persistedstate

复制代码

 

• store文件夹下index.ts
  

1. import { createPinia } from 'pinia'
2. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
4. // 创建 pinia 实例
5. const pinia = createPinia()
7. // 使用持久化插件
8. pinia.use(piniaPluginPersistedstate)
10. export default pinia

复制代码

• main.ts配置
  

1. import { createSSRApp } from 'vue';
2. import App from './App.vue';
3. import pinia from './store';
5. export function createApp() {
6.     const app = createSSRApp(App);
7.     app.use(pinia);
8.     return {
9.         app,
10.     };
11. }

复制代码

• 利用以user.ts为实例
  

1. import { defineStore } from 'pinia';
2. import { ref } from 'vue';
3. import type { UserInfo } from '../types/user';
5. // 用户状态管理
6. export const useUserStore = defineStore('user', () => {
7.     // 用户信息
8.     const userInfo = ref<UserInfo | null>(null);
9.     // 登录状态
10.     const isLoggedIn = ref(false);
12.     // 设置用户信息
13.     const setUserInfo = (info: UserInfo | null) => {
14.         userInfo.value = info;
15.         isLoggedIn.value = !!info;
17.         if (info?.token) {
18.             // 保存到本地存储
19.             uni.setStorageSync('token', info.token);
20.         }
21.     };
23.     // 清除用户信息
24.     const clearUserInfo = () => {
25.         userInfo.value = null;
26.         isLoggedIn.value = false;
27.         // 清除本地存储
28.         uni.removeStorageSync('token');
29.     };
31.     // 初始化状态
32.     const storedToken = uni.getStorageSync('token');
33.     if (storedToken) {
34.         isLoggedIn.value = true;
35.     }
37.     return {
38.         userInfo,
39.         isLoggedIn,
40.         setUserInfo,
41.         clearUserInfo,
42.     };
43. });

复制代码

9.封装哀求（基于 `luch-request` 封装的同一哀求模块，提供同一的接口调用方式和错误处理机制)

• request/index.ts
  

1. import Request from 'luch-request';
2. import type { RequestFunction, ErrorResponse, RequestConfig } from './types';
4. const baseUrl = import.meta.env.VITE_API_BASE_URL;
5. const baseApi = import.meta.env.VITE_API_BASE_API;
7. const options = {
8.     // 显示操作成功消息 默认不显示
9.     showSuccess: false,
10.     // 成功提醒 默认使用后端返回值
11.     successMsg: '',
12.     // 显示失败消息 默认显示
13.     showError: true,
14.     // 失败提醒 默认使用后端返回信息
15.     errorMsg: '',
16.     // 显示请求时loading模态框 默认不显示
17.     showLoading: false,
18.     // loading提醒文字
19.     // 需要授权才能请求 默认放开
20.     auth: false,
21. };
23. // 创建请求实例
24. const httpRequest = new Request({
25.     baseURL: `${baseUrl}${baseApi}`,
26.     timeout: 10000,
27.     header: {
28.         Accept: 'text/json',
29.         'Content-Type': 'application/json;charset=UTF-8',
30.     },
31.     custom: options,
32. });
34. // 请求拦截器
35. httpRequest.interceptors.request.use(
36.     config => {
37.         // 获取登录状态
38.         const isLoggedIn = !!uni.getStorageSync('token');
39.         if (config?.custom?.auth && !isLoggedIn) {
40.             // 未登录，弹出登录弹窗
41.             return Promise.reject();
42.         }
43.         // 在发送请求之前做些什么
44.         const token = uni.getStorageSync('token');
45.         if (token) {
46.             config.header = config.header || {};
47.             config.header.Authorization = `Bearer ${token}`;
48.         }
49.         return config;
50.     },
51.     error => {
52.         return Promise.reject(error);
53.     },
54. );
56. // 响应拦截器
57. httpRequest.interceptors.response.use(
58.     response => {
59.         // 对响应数据做点什么
60.         return response;
61.     },
62.     error => {
63.         // 处理错误
64.         const { statusCode, data } = error as ErrorResponse;
66.         switch (statusCode) {
67.             case 401:
68.                 // 未授权，跳转到登录页
69.                 uni.navigateTo({
70.                     url: '/pages/login/index',
71.                 });
72.                 break;
74.             case 403:
75.                 // 权限不足，显示自定义弹窗
76.                 uni.showModal({
77.                     title: '提示',
78.                     content: data.message || '您没有权限执行此操作',
79.                     showCancel: false,
80.                 });
81.                 break;
83.             case 500:
84.                 // 服务器错误，显示系统提示
85.                 uni.showToast({
86.                     title: '服务器错误，请稍后重试',
87.                     icon: 'none',
88.                 });
89.                 break;
91.             default:
92.                 // 其他错误，显示错误信息
93.                 uni.showToast({
94.                     title: data.message || '请求失败',
95.                     icon: 'none',
96.                 });
97.         }
99.         return Promise.reject(error);
100.     },
101. );
103. const request: RequestFunction = config => {
104.     return httpRequest.middleware(config);
105. };
107. export { request };

复制代码

• request/request.ts
  

1. import { RequestInstanceConfig } from './types';
3. // 请求实例配置
4. export const requestConfig: RequestInstanceConfig = {
5.     // 基础URL
6.     baseURL: import.meta.env.VITE_APP_BASE_API,
7.     // 超时时间
8.     timeout: 10000,
9.     // 请求头
10.     header: {
11.         'Content-Type': 'application/json;charset=UTF-8',
12.     },
13. };
15. // 响应状态码
16. export const ResponseCode = {
17.     SUCCESS: 200,
18.     UNAUTHORIZED: 401,
19.     FORBIDDEN: 403,
20.     NOT_FOUND: 404,
21.     SERVER_ERROR: 500,
22. };
24. // 响应消息
25. export const ResponseMessage = {
26.     SUCCESS: '请求成功',
27.     UNAUTHORIZED: '未授权，请重新登录',
28.     FORBIDDEN: '拒绝访问',
29.     NOT_FOUND: '请求错误，未找到该资源',
30.     SERVER_ERROR: '服务器错误',
31.     NETWORK_ERROR: '网络错误，请检查您的网络连接',
32.     TIMEOUT: '请求超时，请重试',
33. };

复制代码

• request/types.ts
  

1. import type { HttpRequestConfig, HttpTask, HttpData } from 'luch-request';
3. // 响应数据基础接口
4. export interface BaseResponse<T = any> {
5.     code: number;
6.     data: T;
7.     message: string;
8. }
10. // 请求配置扩展
11. export type RequestConfig<T = any> = Omit<HttpRequestConfig<HttpTask>, 'data'> & {
12.     data?: T extends HttpData ? T : HttpData;
13. };
15. // HTTP 请求方法类型
16. export type HttpMethod =
17.     | 'GET'
18.     | 'POST'
19.     | 'PUT'
20.     | 'DELETE'
21.     | 'OPTIONS'
22.     | 'HEAD'
23.     | 'TRACE'
24.     | 'CONNECT';
26. // 请求函数类型
27. export type RequestFunction = <T = any, R = any>(
28.     config: RequestConfig<T>,
29. ) => Promise<BaseResponse<R>>;
31. // 错误响应类型
32. export interface ErrorResponse {
33.     statusCode: number;
34.     data: {
35.         code: number;
36.         message: string;
37.     };
38. }
40. // 请求实例配置接口
41. export interface RequestInstanceConfig {
42.     baseURL: string;
43.     timeout: number;
44.     header: Record<string, string>;
45. }
47. export interface RequestError {
48.     statusCode: number;
49.     data: any;
50.     config: HttpRequestConfig;
51.     errMsg: string;
52. }
54. export type ErrorMiddleware = (
55.     error: RequestError,
56.     next: (error: RequestError) => void,
57. ) => Promise<void> | void;
59. // 请求实例类型

复制代码

• api/user.ts 
  

1. import { request } from '@/utils/request';
2. import type { LoginRequest, LoginResponse } from './types';
3. // 登录接口
4. export const login = (data: LoginRequest) => {
5.   return request<LoginRequest, LoginResponse>({
6.       url: '/user/login',
7.       method: 'POST',
8.       data,
9.   });
10. };

复制代码

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

继续阅读请点击广告