更新记录

1.0.11（2024-05-25）

• 优化 page-view

1.0.10（2024-05-21）

• 优化 /stores/user.js

1.0.9（2024-05-13）

• 优化优化

平台兼容性

hi-uniapp-starter

介绍

• 一个基于 Vue3 + Vite + Pinia + hi-ui 的应用快速开发基本项目模板

使用的 Vue 相关全家桶

• Vue3 - 版本
• Pinia - 数据状态管理
• Vite - 构建工具

使用的 UI 框架

• hi-ui - 一个基于 Vue3 的轻量级 UI 框架

manifest.json 配置说明

// manifest.json
"mp-weixin": {
    // 合并组件虚拟节点外层属性
    "mergeVirtualHostAttributes": true,
    // 开启小程序按需注入特性
    "lazyCodeLoading": "requiredComponents"
},
"mp-alipay": {
    // 合并组件虚拟节点外层属性
    "mergeVirtualHostAttributes": true,
    // 开启小程序按需注入特性
    "lazyCodeLoading": "requiredComponents",
    // 组件样式隔离方式
    "styleIsolation": "shared"
}

main.js 配置说明

// main.js
import App from "./App";

// 引入 hi-ui
import "@/uni_modules/hi-config";

// 配置扩展图标前缀，支持多前缀
uni.$hi.config.icon.prefix = ["app-iconfont"];

// 引入 hiRouter 的 mixin 配置
import hiRouterMixin from "@/uni_modules/hi-router/mixin";

// #ifdef VUE3
import { createSSRApp } from "vue";

// 引入 Pinia
import * as Pinia from "pinia";

// 创建 Pinia 实例
const pinia = Pinia.createPinia();

// Pinia 持久化插件
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

// 使用 Pinia 持久化插件
pinia.use(piniaPluginPersistedstate);

export function createApp() {
    const app = createSSRApp(App);

    // 使用 Pinia
    app.use(pinia);

    // 在此处混入 hiRouter 的 mixin 配置
    app.mixin(hiRouterMixin);

    return {
        app
    };
}
// #endif

App.vue 配置说明

<!-- App.vue -->
<script setup>
    // 引入 HiRouter
    import { useHiRouter } from "@/uni_modules/hi-router";
    // 引入项目 HiRouter 配置
    import hiRouterConfig from "@/src/router/config";

    /**
     * 应用初始化时触发，全局只触发一次
     * @param {Object} opts 应用启动参数
     */
    onLaunch((opts) => {
        // 当应用初始化完成后再配置 HiRouter
        const hiRouter = useHiRouter(hiRouterConfig);

        // 将 HiRouter 函数挂载到全局
        uni.$hi.router = hiRouter;
    });
</script>

<style lang="scss">
    /* 引入 hi-ui 样式  */
    @import "@/uni_modules/hi-styles/index.scss";

    /* 引入项目全局样式 */
    @import "@/src/styles/index.scss";
</style>

开始

• 安装依赖 - npm install

使用到的 npm 包

• pinia-plugin-persistedstate - Pinia 状态数据持久化插件

项目目录结构

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |-- components: 组件目录 | |-- a-component: 一个基础的组件模板 | |-- page-view: 页面根元素组件，用来统一管理页面公共元素和逻辑等 |-- src: 资源目录 | |-- apis: 接口管理目录 | |-- constants: 常量管理目录 | |-- functions: 工具函数管理目录 | |-- hooks: 组合式工具函数管理目录 | |-- router: 路由管理目录 | |-- settings: 项目配置文件目录 | |-- stores: 状态数据管理目录 | |-- styles: 样式管理目录 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!