关于依赖

npm

• art-template

• chalk

• cz-conventional-changelog

• execa

• inquirer

• commitizen

编译

IDE: HBuilder X

HBuilder X插件：

• less编译
• scss编译
• uni-app编译

css库

• uviewui

关于目录结构

|—— api （api相关文件目录）
| |—— index.js (api接口和请求配置)
| |—— requestAxios.js （封装的请求方法）
|—— assets （静态文件目录，存放业务相关的）
| |—— languages （语言相关）
| | |—— Chinese.json （中文字典）
| | |—— English.json （英语字典）
| | |—— index.js （对字典的载入与配置）
| | |—— vue-i18n.js （国际化工具）
| |—— style （样式相关）
| | |—— global.scss （全局的工具样式）
| |—— themes （主题相关）
|—— cliShell （封装的命令行工具）
| |—— comTem （组件模板）
| |—— pageTem （页面模板）
| |—— createComponents.js （模板创建工具主题）
|—— components （自定义组件存放的目录）
| |—— ...
|—— node_modules （npm依赖项存放的目录）
| |—— ...
|—— pages （各个页面存放的目录）
| |—— ...
|—— static （开放的全局静态目录，与assets 相似，存放显示相关的）
| |—— icon （图标、svg、字体等）
| | |—— ...
| |—— images （图片）
| | |—— ...
| |—— style （样式）
| | |—— ...
| |—— test （测试用的所有静态文件存放目录）
| | |—— ...
|—— tools (封装的工具函数存放目录)
| |—— prototypeTools （被加载到原型链上的工具函数）
| | |—— DateTools.js
| | |—— ArrayTools.js
| | |—— ObjectTools.js
| |—— mapApi.js （地图的工具函数）
|—— uview-ui （uview-ui库）
| |—— ...
|—— .gitignore （git提交忽略文件的规则）
|—— App.vue （全局根组件）
|—— main.js （入口）
|—— manifest.json （针对多端的不同配置）
|—— package.json （npm包管理文件）
|—— pages.json （页面配置文件）
|—— uni.scss （全局css文件）

关于开发流程

组件开发流程

使用 npm run cct 命令创建公共组件

组件前缀选择

components 目录中的 c- 前缀的组件可以在使用时免去引入操作，禁止创建 u- 前缀的组件，因为 u- 组件再不引用的情况下会被定位到 uview-ui/components目录下。

如果原先的 u- 组件无法满足你的要求，你可以将其复制到 components 目录，更名为 c- 组件，然后进行源码修改。或者创建一个新的 c- 组件

维护README.md

每一个自定义组件都应该维护一个README.md文件

README.md 文件中一个至少包含以下几项内容，其他可自行增加

• 标题（组件全名）
• 对改组件的基本介绍文字（用来干嘛）
• 一个使用/测试案例
• 需要传递的参数
• 提供的事件回调
• 使用的注意事项
• 已知bug

对可出现错误的 props 做处理

对可能出现的默认值做默认值处理或者在使用时做判断处理

在test页面中维护一个测试用例

每一个公共组件一个在test页面中维护一个测试案例

页面开发流程

使用 npm run cct 命令创建页面

在 pages.json 文件中添加当前页面的配置， 在 test页面添加向当前页面转跳的按钮

具体的页面配置请参考 c-page 组件的文档

关于国际化

字典查询 this.$t(key)

在任何使用静态文字的地方都应该进行字典查询操作

以下是几个例子

<text>{{ $t('test.goLogin') }}<text>
    
<text :v-text="$t('test.goLogin')"><text>
    
    
//组件js中
console.log(this.$t('test.goLogin'))

每一个组件的静态文字应该在各个语言的字典 components 中创建对应的组件字典

例如 c-page 组件中使用了 “返回” 文字

那么我一个在每一个字典中 components 字段中添加一个 CPage 字段，然后再其中加入"break":"返回"

关于主题颜色

建议每一个组件或者页面中不要使用太多种颜色，尽量在 uviewui color 中选择颜色使用( scss变量 )

这样有利于减少后期加入主题切换功能时的工作量

关于代码提交

参考 宇宙互联代码提交规范

拉取最新代码 git push命令或者直接点webstorm的拉取按钮
使用 npm run addAll 命令将所有文件添加至git变更中
使用 npm run commit 命令提交当前变更
选择 提交类型
输入 当前提交影响的主模块（页面/组件）
输入 本次提交的简介（描述主要更新了什么 <90字）
输入 本次提交的详情（可以不写）
后面全部按 Enter 默认即可

使用 git push 命令将提交推送到远程仓库