art-template
chalk
cz-conventional-changelog
execa
inquirer
commitizen
IDE: HBuilder X
HBuilder X插件:
|—— 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
文件中一个至少包含以下几项内容,其他可自行增加
对可出现错误的 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
命令将提交推送到远程仓库
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。