https://github.com/atqq/uni-app-template
开箱即用的uni-app cli 模板，Vue3 + Vite + Pinia 模板项目
https://github.com/atqq/uni-app-template
uni-app vue-cli
Last synced: about 1 month ago
JSON representation
开箱即用的uni-app cli 模板，Vue3 + Vite + Pinia 模板项目
- Host: GitHub
- URL: https://github.com/atqq/uni-app-template
- Owner: ATQQ
- License: mit
- Created: 2021-04-18T04:10:09.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-03T03:45:32.000Z (almost 3 years ago)
- Last Synced: 2025-04-10T01:07:40.460Z (about 1 month ago)
- Topics: uni-app, vue-cli
- Language: JavaScript
- Homepage:
- Size: 390 KB
- Stars: 27
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# uni-vue3-template
uni-app Vue3 + Vite + Pinia 模板项目
支持小程序，H5，App
| H5 | 微信小程序 | App(iOS) | App(Android) |
| :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
|  |  |  | 
|
其它模板
* Vue3的 `uni-app` TS模板：[uni-vue3-ts-template](https://github.com/ATQQ/uni-vue3-ts-template)
* Vue3的 Web 应用模板：[vite-vue3-template](https://github.com/ATQQ/vite-vue3-template)
## Use This Template
```sh
npx degit atqq/uni-app-template#main my-uni-vue3-project
```
## Feature
### Prod
* [x] [Vue3](https://vuejs.org/)
* [x] [Pinia](https://pinia.vuejs.org/) - replace vuex
* [x] [Axios](https://github.com/axios/axios)
* UI/组件库
* [uView](https://vkuviewdoc.fsq.pub/) - vk-uview-ui
* [uni-ui](https://github.com/dcloudio/uni-ui) - 待接入
### Dev
* [x] [Vite](https://github.com/vitejs/vite)
* [x] [Sass](https://github.com/sass/sass)
* [x] [Less](https://github.com/less/less.js)
* [x] [Eslint](https://eslint.org/)
* [x] [Prettier](https://prettier.io/)
* [x] [Vitest](https://vitest.dev/) - replace jest
## 使用
### 安装依赖
```sh
npm i -g pnpm
```
```sh
pnpm install
```
## 本地启动
### 微信小程序
```sh
# 构建出产物
pnpm dev:mp-weixin
```
然后将编译结果`dist/dev/mp-weixin`导入微信开发者工具即可运行
点击查看 导入详细步骤
### H5
```sh
# CSR
pnpm dev:h5
# SSR
pnpm dev:h5:ssr
```
根据提示，打开对应地址即可访问
### App
#### 安装一些必要工具
需要使用 `uni-app` 官方提供的 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 启动项目
**Android模拟器在MacOSX、Windows上都可以安装；iOS模拟器只能在MacOSX上安装。**
先安装相关模拟器，[详细参考文档](https://hx.dcloud.net.cn/Tutorial/App/installSimulator)
* 安卓：[夜神模拟器](https://www.yeshen.com/blog/)
* iOS：Mac上安装Xcode
准备就绪后，使用 HBuilderX 打开项目
#### iOS模拟器运行
通过顶部菜单栏，找到运行入口
选择一个目标设备，点击启动即可
#### Android模拟器运行
这里以[夜神模拟器](https://www.yeshen.com/blog/)为例
点击查看 详细步骤
先通过 HBuilderX 修改模拟器端口为 `62001`
打开夜神模拟器
选择运行到 Android 基座
选择已经打开的模拟器，点击运行即可
## 打包构建
### 微信小程序
```
pnpm build:mp-weixin
```
### H5
```sh
# CSR
pnpm build:h5
# SSR
pnpm build:h5:ssr
```
### App
基于 `HBuilderX` 参考[官方文档](https://hx.dcloud.net.cn/Tutorial/App/SafePack)进行进一步的操作
其它更多运行脚本 查看 [package.json](./package.json)中的scripts