This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

关于依赖

npm

  • art-template

  • chalk

  • cz-conventional-changelog

  • execa

  • inquirer

  • commitizen

编译

IDE: HBuilder X

HBuilder X插件:

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

css库

关于目录结构

|—— 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 命令将提交推送到远程仓库

Empty file

About

帮帮帮前端 expand collapse
JavaScript and 4 more languages
Cancel

Releases

No release

Contributors

All

Activities

can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化