更新记录
3.0.4(2024-09-09)
下载此版本
3.0.3(2024-08-30)
下载此版本
3.0.2(2024-08-28)
下载此版本
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
× |
× |
× |
× |
hi-uniapp-starter
- 一个基于
Vue3 + Vite + Pinia + HiUi
的应用快速开发基本项目模板
使用的 Vue 相关全家桶
Vue3
- 版本
Pinia
- 数据状态管理
Vite
- 构建工具
使用的 UI 框架
HiUi
- 一个基于 Vue3
的轻量级 UI
框架
manifest.json 配置说明
"mp-weixin": {
// 合并组件虚拟节点外层属性
"mergeVirtualHostAttributes": true,
// 开启小程序按需注入特性
"lazyCodeLoading": "requiredComponents"
},
"mp-alipay": {
// 合并组件虚拟节点外层属性
"mergeVirtualHostAttributes": true,
// 开启小程序按需注入特性
"lazyCodeLoading": "requiredComponents",
// 组件样式隔离方式
"styleIsolation": "shared"
}
main.js 配置说明
import App from "./App";
// 引入 HiUi 主文件
import "@/uni_modules/hi-ui/index";
// 配置扩展图标
uni.$hi.config.icon.prefix = ["app-iconfont"];
// HiRouter
import hiRouter from "@/uni_modules/hi-router"; // 引入 HiRouter
import hiRouterConfig from "@/router/config"; // HiRouter 配置
// Pinia
import * as Pinia from "pinia"; // 引入 Pinia
const pinia = Pinia.createPinia(); // 创建 Pinia 实例
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; // Pinia 持久化插件
pinia.use(piniaPluginPersistedstate); // 使用持久化插件
import { createSSRApp } from "vue";
export function createApp() {
const app = createSSRApp(App);
// 使用 HiRouter
app.use(hiRouter, hiRouterConfig);
// 使用 Pinia
app.use(pinia);
return {
app
};
}
<style lang="scss">
/* 引入 HiUi 主样式 */
@import "@/uni_modules/hi-ui/index.scss";
/* 引入项目主样式 */
@import "@/styles/index.scss";
</style>
<br/>
## pages.json 配置说明
页面 meta 配置说明:
- `needLogin`: `true/false` : 是否需要登录。
- `defaultWebviewPage`: `true/false` : 是否为默认接收 `webview` 跳转的页面路径。
- `defaultLoginPage`: `true/false` : 是否为默认登录页面路径。
- `homePage`: `true/false` : 是否为默认首页路径,登录时如果没有设置登录后的目标路径,默认跳转到此页面。
## 开始
- 安装依赖 - `npm install`
<br/>
### 使用到的 npm 包
- `pinia-plugin-persistedstate` - `Pinia` 状态数据持久化插件
- `HiUi` 使用到的 `npm` 包,具体情查看 [`HiUi` 文档](http://hi.jinanchenshuang.com/hi-uniapp-ui-doc/)
<br/>
## 仓库
![Gitee](/static/images/icons/gitee.png) [Gitee:https://gitee.com/chenshuang-jinli/hi-uniapp-starter](https://gitee.com/chenshuang-jinli/hi-uniapp-starter)