UniAPP + Vite + TS + Vue3 + axios-miniprogram(小程序) + Vant-weapp 项目配置

配置列表

1.技术框架 uni-app + Vue3 + TS
2.脚手架 vite
3.UI框架 uni-ui + vant-weapp
4.接口请求 axios-miniprogram(小程序版axios)配置请求重发以及文件# UniAPP + Vite + TS + Vue3 + axios-miniprogram(小程序) + Vant-weapp

## 配置列表

```text
1.技术框架 uni-app + Vue3 + TS
2.脚手架 vite
3.UI框架 uni-ui + vant-weapp
4.接口请求 axios-miniprogram(小程序版axios)配置请求重发以及文件上传
5.长连接 WebSockit + Vuex实现
6.权限控制 v-pm(自定义组件)
7.全局loading v-loading(自定义组件)

1.模板下载

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

yarn install 初始化

2.安装 css 预处理 sass

yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass
（模板没有默认安装sass, 如果不安装直接使用会报错）

全局参数使用 在uni.scss文件中引入
@import "@/styles/index.scss";

3.安装 uni-ui 组件库，配置 easycom 模式无引入使用

1. yarn add @dcloudio/uni-ui
2.src/package.json 文件配置easycom模式(组件无需import | require直接使用)
"easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }

4.配置使用微信小程序 API

由于安装的uniapp-ts项目只会包含uni-app本身的@types声明，如果想直接使用wx或小程序的api的话就需要自行添加，以微信小程序为例

1. yarn add @types/weixin-app

2.打开tsconfig.json文件，在types选项中添加weixin使用的声明

 "types": [
        "@dcloudio/types",      //这一项是原本包含的
        "weixin-app",           //wx-app的TypeScript定义  新添加
        /******************以下包需要先安装***************************/
        "miniprogram-api-typings",//微信小程序api的typescript类型定义文件，和weixin-app同；可选
        "mini-types",             //支付宝小程序的typescript类型定义文件
    ],

5. 配置文件路径别名 | 可选


1.
打开vite.config.ts文件，使用resolve选项配置：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

2.tsconfig.json中配置

//compilerOptions中配置
"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

3. 发现在vite.config.ts中无法使用关键字 require；要重启编辑器）
安装依赖包：yarn add @types/node -D
重启编辑器

6. 运行 + 打包项目

1. yarn run dev:mp-weixin 微信开发者工具打开dist/mp-weixin文件夹
2. yarn run build:mp-weixin 在开发工具中打开dist/build/mp-weixin ，点上传，再在微信公众平台选为体验版

7. Vant UI

1. yarn add @vant/weapp
在 src目录下创建 wxcomponents 文件夹
拷贝node_modules/@vant 到 wxcomponents中

2. src/App.vue中引入样式文件
<style>
    /*每个页面公共css */
    /* vant - weapp */
    @import '/wxcomponents/@vant/weapp/dist/common/index.wxss';
</style>

3. 在src/pages.json中全局注册引用的组件
{
  "globalStyle": {
    "usingComponents": {
      "van-button": "/wxcomponents/@vant/weapp/dist/button/index"
    }
  }
}

4. 使用
<van-button type="primary">测试</van-button>

8. vuex

1. index.ts
import { createStore, Store } from "vuex";
import { InjectionKey } from "vue";

export const key: InjectionKey<Store<state>> = Symbol("key");

export type state = {
  count: number;
};

export default createStore({
  state: {
    count: 0,
  },

  mutations: {
    add(state) {
      state.count += 1;
    },
  },
});

2. main.ts
import Store, { key } from "./store/index";
app.use(Store, key);


3. .vue使用
import { useStore } from "vuex";
import { key } from "@/store";
const store = useStore(key);
const count = computed(() => store.state.count);

9. axios

由于 axios 只兼容 Node 与 Web 两端，在 uni-app 中无法直接使用，uni-app 收口的网络请求方法是 uni.request 调研找到一个根据 Axios API 风格，封装的 uni-app 可用的请求库 axios-miniprogram 这里限制一下版本，经测试最新的版本还存在一些小问题，无法正常使用

yarn add axios-miniprogram@1.3.0

1.在 src 下创建 api 目录，在 api 目录下创建 http.ts,index.ts,modules

src/api
├── http.ts 封装的调用方法
├── index.ts # 对外统一暴露各个业务模块的接口调用方法
└── modules
   └── user.ts # user模块的接口调用方法

2.http.ts 其中请求的 baseURL 通过环境变量配置文件(.env)注入

.env (Vite + TS 配置 .env 环境文件)

VITE_BASE_URL = 'http://app.user.ach18.com/'

为 axios 注册请求/响应拦截器，设置默认请求头

在请求拦截器中添加鉴权身份令牌，响应拦截器中根据返回的状态做进一步处理（统一的警告弹窗，权限校验）

import axios from "axios-miniprogram";
const http = axios;
// 请求base路径
http.defaults.baseURL = import.meta.env.VITE_BASE_URL;
http.defaults.headers = {
  "content-Type": "application/json",
};
http.interceptors.request.use(
  (config) => {
    // 所有请求都携带token
    config.headers = { ...config.headers, token: uni.getStorageSync("token") };
    // 发送之前操作config
    return config;
  },
  (err) => {
    if (err.status !== 200) {
      // 处理错误
    }
    return Promise.reject(err);
  }
);
/**
 * 响应拦截
 */
http.interceptors.response.use(
  (response: any) => {
    // 对拿到的数据做一些额外操作操作 (如无权限,直接跳转首页)
    const { code, msg } = response.data;
    if (code !== 0) {
      if (msg) {
        proxy!.$toast({
          title: msg,
        });
      }
      // 走catch逻辑
      return Promise.reject(response.data);
    }
    // 返回前操作
    return response.data;
  },
  (err) => Promise.reject(err)
);
export default http;

3.接口模块化

modules目录下主要编写各个业务模块请求方法例如 modules/login.ts

import http from "../http";

class Login {
  login(data) {
    return http.post("/login/password", {
      ...data,
    });
  }
}

export default new Login();

通过 api/index.ts 统一对业务方暴露

export { default as loginApi } from "./modules/login";

4.业务调用

import { loginApi } from "@/api";

const add = async () => {
  try {
    const res = await loginApi.login({
      account: 000,
      password: 000,
    });
    console.log(res);
  } catch (error) {
    console.log(error);
  }
};

10 小程序使用多色图标 symbol (mini-program-iconfont-cli)

1.生成配置文件 iconfont.json

npx iconfont init

2.配置

{
  "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
  "save_dir": "./iconfont", // 生成的组件保存的路径
  "use_rpx": false, // 是否使用微信提供的尺寸单位rpx还是普通的像素单位px
  "trim_icon_prefix": "icon-",
  "default_icon_size": 18 // 默认字体大小
}

3.使用命令生成小程序组件

npx iconfont

4.全局组件应用

"usingComponents": {
   "iconfont": "./iconfont/iconfont"
}

上传 5.长连接 WebSockit + Vuex实现 6.权限控制 v-pm(自定义组件) 7.全局loading v-loading(自定义组件)


## 1.模板下载

```cmd
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

yarn install 初始化