【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】

╰半夏微凉° 2024-02-28 07:58 23阅读 0赞

#### 目录 ####

*   *   *  1，背景
         *  2，版本号
         *  3，项目目录结构
         *  4，开发流程
         *   *  4.1，安装
             *  4.2，使用axios
             *  4.3，配置vue自动导入

#### 1，背景 ####

使用Vue3 + Vite4 + Pinia + Axios + Vscode模式开发之后，感叹真香！不用再单独去下载HBuilderX。废话不多说，直接上干货！

#### 2，版本号 ####

*  node: v16.18.0
 *  vue: ^3.3.4,
 *  vite: 4.1.4
 *  sass: ^1.62.1
 *  pinia: 2.0.36
 *  pinia-plugin-unistorage: ^0.0.17
 *  axios: ^1.4.0
 *  axios-miniprogram-adapter: ^0.3.5
 *  unplugin-auto-import: ^0.16.4  
    如遇到问题，请检查版本号是否一致!!!

#### 3，项目目录结构 ####

└── src \# 主目录  
├── api \# 存放所有api接口文件  
│ ├── user.js \# 用户接口  
├── config \# 配置文件  
│ ├── net.config.js \# axios请求配置  
├── pinia-store \# 配置文件  
│ ├── user.js \# axios请求配置  
├── utils \# 工具类文件  
│ ├── request.js \# axios请求封装

#### 4，开发流程 ####

建议去uni-preset-vue仓库下载vite分支zip包，熟练ts的童鞋下载vite-ts

##### 4.1，安装 #####

*  下载之后进入项目

cd uni-preset-vue

*  安装依赖

# pnpm
    pnpm install 
    # yarn 
    yarn
    # npm
    npm i

*  运行

pnpm dev:mp-weixin

打开微信开发者工具，找到dist/dev/mp-weixin运行，可以看到默认的页面

*  安装pinia

pnpm add pinia

*  使用pinia  
    在src目录下构建 pinia-store/user.js文件

/**
     * @description 用户信息数据持久化
     */
    import {
         defineStore } from 'pinia'
    
    export const useUserStore = defineStore('user', {
        
        state() {
        
            return {
        
                userInfo: {
        }
            }
        },
        actions: {
        
            setUserInfo(data) {
        
                this.userInfo = data
            }
        }
    })

*  修改main.js文件

import {
        
    	createSSRApp
    } from "vue";
    import * as Pinia from 'pinia';
    import App from "./App.vue";
    export function createApp() {
        
        const app = createSSRApp(App);
        const store = Pinia.createPinia();
        app.use(store);
    
        return {
        
            app,
            Pinia
        };
    }

*  pinia数据持久化  
    安装pinia-plugin-unistorage

pnpm add pinia-plugin-unistorage

修改main.js文件,增加如下代码：

// pinia数据持久化
    import {
         createUnistorage } from 'pinia-plugin-unistorage'
    store.use(createUnistorage());
    app.use(store);

完整代码如下：

import {
         createSSRApp } from "vue";
    
    import * as Pinia from 'pinia';
    // pinia数据持久化
    import {
         createUnistorage } from 'pinia-plugin-unistorage'
    import App from "./App.vue";
    export function createApp() {
        
        const app = createSSRApp(App);
    
        const store = Pinia.createPinia();
        store.use(createUnistorage());
        app.use(store);
    
        return {
        
            app,
            Pinia
        };
    }

在页面中使用：

*  安装axios

pnpm add axios

适配小程序，需要另外安装axios-miniprogram-adapter插件

pnpm add axios-miniprogram-adapter

##### 4.2，使用axios #####

在utils创建utils/request.js文件

import axios from 'axios';
    import mpAdapter from "axios-miniprogram-adapter";
    axios.defaults.adapter = mpAdapter;
    import {
         netConfig } from '@/config/net.config';
    const {
         baseURL, contentType, requestTimeout, successCode } = netConfig; 
    
    let tokenLose = true;
    
    const instance = axios.create({
        
      baseURL,
      timeout: requestTimeout,
      headers: {
        
        'Content-Type': contentType,
      },
    });
    
    // request interceptor
    instance.interceptors.request.use(
      (config) => {
        
        // do something before request is sent
        return config;
      },
      (error) => {
        
        // do something with request error
        return Promise.reject(error);
      }
    );
    
    // response interceptor
    instance.interceptors.response.use(
      /**
       * If you want to get http information such as headers or status
       * Please return  response => response
       */
      (response) => {
        
        const res = response.data;
    
        // 请求出错处理
        // -1 超时、token过期或者没有获得授权
        if (res.status === -1 && tokenLose) {
        
          tokenLose = false;
          uni.showToast({
        
            title: '服务器异常',
            duration: 2000
        });
    
          return Promise.reject(res);
        }
        if (successCode.indexOf(res.status) !== -1) {
        
          return Promise.reject(res);
        }
        return res;
      },
      (error) => {
        
        return Promise.reject(error);
      }
    );
    
    export default instance;

其中net.config.js文件需要在src/config目录下创建，完整代码如下：

/**
     * @description 配置axios请求基础信息
     * @author hu-snail 1217437592@qq.com
     */
    export const netConfig = {
        
        // axios 基础url地址
        baseURL: 'https://xxx.cn/api',
        // 为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用
        cors: true,
        // 根据后端定义配置
        contentType: 'application/json;charset=UTF-8',
        //消息框消失时间
        messageDuration: 3000,
        //最长请求时间
        requestTimeout: 30000,
        //操作正常code，支持String、Array、int多种类型
        successCode: [200, 0],
        //登录失效code
        invalidCode: -1,
        //无权限code
        noPermissionCode: -1,
      };

在src目录下创建src/api/user.jsapi文件

import request from '@/utils/request'
     
    /**
     * @description 授权登录
     * @param {*} data 
     */
    export function wxLogin(data) {
        
    	return request({
        
    		url: '/wx/code2Session',
    		method: 'post',
    		params: {
        },
    		data
    	})
    }
    
    /**
     * @description 获取手机号
     * @param {*} data 
     */
    export function getPhoneNumber(data) {
        
    	return request({
        
    		url: '/wx/getPhoneNumber',
    		method: 'post',
    		params: {
        },
    		data
    	})
    }

在页面中使用

##### 4.3，配置vue自动导入 #####

安装unplugin-auto-import插件

pnpm add unplugin-auto-import -D

修改vite.config.js文件：

import AutoImport from 'unplugin-auto-import/vite'
     plugins: [
        AutoImport({
        
          imports: ["vue"]
        })
      ],

页面中使用，需要注意的事每次导入新的vue指令，需要重新运行！！

*  安装uni-ui

pnpm add @dcloudio/uni-ui

*  使用uni-ui  
    修改pages.json文件，增加如下代码：

"easycom": {
        
            "autoscan": true,
            "custom": {
        
                    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
            }
    },

在页面中使用

到此已基本可以完成程序的开发，其他功能按照自己的需求做增删改查即可。