qidao123.com技术社区-IT企服评测·应用市场

登录 立即注册
qidao123.com技术社区-IT企服评测·应用市场»论坛 › 软件与程序人生 › 移动端开发 › vue3+ts uniapp小步伐项目搭建

vue3+ts uniapp小步伐项目搭建

[复制链接]
发表于 2025-6-8 13:13:47 | 显示全部楼层 |阅读模式
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企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

火影
+ 我要发帖

© 2001-2025 Discuz! Team. Powered by Discuz! X3.5

GMT+8, 2025-6-27 21:30 , Processed in 0.080343 second(s), 31 queries 手机版|qidao123.com技术社区-IT企服评测▪应用市场 ( 浙ICP备20004199 )|网站地图

快速回复 返回顶部 返回列表