# 源代码

**Repository Path**: gongsixiao_admin/source-code

## Basic Information

- **Project Name**: 源代码
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-28
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 技术
hbuilderX 3.4.6+
node 版本^14.18.0 || >=16.0.0
uniapp v3
typescript "^4.9.4"
vite "4.0.4"
sass "^1.62.0"
sass-loader "^10.1.1"
uni-ui 
# 步骤
1. npm安装uni-ui框架
	* npm i sass -D
	* npm i sass-loader@10.1.1 -D
	* npm i @dcloudio/uni-ui
	* Tip：使用vue3 + vite 项目不需配置vue.config.js
2. 安装eslit 和 prettier
	* npx eslint --init 初始化eslint文件
	* npm i --save-dev prettier
	* npm i --save-dev eslint-plugin-prettier eslint-config-prettier
	* 修改.eslinttrc
	`{
		"extends": [
			"plugin:prettier/recommended"
			]
	}`
3. 分包
	* 配置manifest.json 下 mp-weixin -> optimization -> subPackages:true 开启分包优化
	* 同 uniapp v2分包步骤，主包（main）只放初始化组件，用于判断跳转引导页（guide）还是项目首页，当使用uniapp自带tabbar，则tabbar页面也放在主包；
	* pages.json文件配置 preloadRule 分包预加载优化，根据项目配置进入init文件后要同时预加载的分包
4. 全局守卫封装
5. vuex模块化安装
	* store不能像vue2般使用map..辅助函数，或者需要自行封装hook函数
	* vue3推荐使用pinia，hbuilder已内置，cli创建方式需自行安装
	* pinia持久化安装测试，h5默认缓存在session，可更改local，也可单独为某个变量配置。 [pinia-plugin-persist-uni](https://allen-1998.github.io/pinia-plugin-persist-uni/)
6. 请求封装
7. 样式穿透与安装原子化样式，并且支持更换主题


# 使用vscode开发可安装uni-app-snippets扩展
# 安卓模拟器调试
* 使用雷电模拟器闪退白屏
* 使用mumu模拟器需要开启虫子调试模式，否则会报错
* 使用真机调试无异常
# vue和nvue开发选择
## vue
* vue是基于webview渲染的页面
* vue适用于开发H5、小程序和App端的页面
## nvue
* nvue是基于原生渲染的页面
* nvue只适用于开发App端的页面
* nvue只支持vue2的语法
* nvue只支持flex布局和class选择器
* nvue有更高的性能和流畅度，有更好的原生体验，可以解决原生控件层级问题
* nvue只适用于开发App端的页面
* nvue页面控制显隐只可以使用v-if，不可以使用v-show
* nvue页面只能使用text组件来显示文本，并且不能换行写内容
* nvue页面使用image标签来显示图片，并且支持使用base64，但不支持svg格式图片
* nvue页面可以直接使用plus的API，并且不需要等待plus ready，而vue页面需要等待plus ready后才能使用plus的API
* nvue页面不支持在style中引入字体文件，需要使用DOM.addRule来加载自定义字体
* nvue页面不支持在css里写背景图background-image，需要使用image组件来实现背景图效果
* 更多区别：[更多nvue介绍](https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html)
# ui框架挑选
## [vant3简介](https://vant-contrib.gitee.io/vant/v3/#/zh-CN)
* 不支持nvue，但文档详情，功能齐全
* 微信小程序对应的是vant weapp版本 [vant weapp简介](https://vant-contrib.gitee.io/vant-weapp/#/home)
## [uview2简介](https://www.uviewui.com/components/intro.html)
* uni-app生态专用的UI框架，提供部分常用api
* 适用vue2，因为不支持vue3语法和特性
## [uview-plus简介](https://uiadmin.net/uview-plus/components/intro.html)
* 支持vue3，更新于2022-07-09
## [uni-ui简介](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)
* ucloud推荐，基础组件的扩展