# uni-templete

**Repository Path**: mongos/uni-templete

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-07-15
- **Last Updated**: 2022-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-templete使用说明

## 环境准备

+ 使用HbuilderX作为构建开发环境, 主要使用HX的编译环境, 也可以使用vscode编码 + HX编译的搭配
+ HX需要安装插件
  +  es6编译
  +  Eslint-js
  +  Eslint-plugin-vue
  +  git
  +  prettier
  +  **Scss/sass编译**
+  微信小程序开发工具
+  appId申请

## 目录说明

+ **api** 

  + api接口统一管理文件夹，不允许在组件中直接定义api地址，必须在api文件夹下进行统一管理
  + 不同的模块，分成不同的js文件进行管理
  + 采用`export const signin = params => http.post('/api/xxx', params);`格式，封装请求方法及请求地址，方便统一管理

+ **colorui** colorui样式库引入，如果不需要直接删除，注意删除app.vue里的引用

+ **common** 存放公用的css js font等文件，工具类js建议封装到utils文件里

+ **components**

  + 组件存放文件夹
  + 统一格式 `组件/组件.vue ` 文件夹与组件同名，在页面或组件中引入就不用再`import`和在`components`注册了
  + 如果是某个组件特用的子组件，确定不公用的情况下，建议封装到 `组件/components`文件夹里

+ **config** 配置信息文件，一些复杂对象或复杂数组的配置信息，不要在组件内直接定义，公用的建议提到config文件夹下（分模块管理），确定非公用的直接写到组件的文件夹内部即可

+ **pages** 页面存放目录

+ **plugins** 插件，request插件是封装的类似axios请求处理插件，跟axios用法一致，**注意返回值**：成功的返回对象是res.data.data，失败的返回值是res.data.msg，可根据后台接口对应修改。请求做了header里的token处理

+ **static** 存放静态文件

+ **store** vuex文件，注意分模块处理，参考模板中的user，组件中使用store文件时，优先使用mapState等解构方法

+ **utils** 公用工具类，注意分模块，如：`ui.js` `time.js` ` query.js`等

+ **.eslintrc.js** eslint代码格式检测配置文件

+ **.gitignore** 上传git仓库忽略的文件

+ **.prettierrc** prettier自动格式化代码风格的插件配置文件

+ App.vue 入口文件

+ Main.js 入口文件 

+ **Manifest.json** 项目配置文件

+ **package.json** 项目中有使用到npm包，初始时先运行`npm i`

+ **uni.scss** scss样式遍历定义文件，在组件中可直接使用其变量而不需要导入

+ **Vue.config.js** vue配置文件，定义了常用的alias，使用时尽量使用alias的绝对路径代替相对路径，如：`api/user.js`代替`./api/user.js`

  ```js
  '~': __dirname,
  config: resolve('config'),
  api: resolve('api'),
  store: resolve('store'),
   components: resolve('components'),
  pages: resolve('pages'),
  common: resolve('common'),
  plugins: resolve('plugins'),
   utils: resolve('utils'),
  ```

  

## scss

+ 使用scss代替css样式
+ HX必须要安装`scss插件`
+ 项目开发前应该先定义好uni.scss里的变量，统一引用这里的变量，有利用界面风格统一及后期维护

[官方文档uni.scss](https://uniapp.dcloud.io/collocation/uni-scss)

## 约定

+ Package.json里内置了时间处理插件`moment.js`，统一使用`moment.js`进行时间处理

+ 使用scss进行样式开发

+ 样式变量（颜色，字体大小，间距等）统一定义到`uni.scss`文件里

+ 尽量使用alias定义的绝对路径代替相对路径，如：`api/user.js`代替`./api/user.js`

+ 保持代码风格统一，建议使用vscode + prettier插件，自动格式化代码

+ 代码提交前，进行lint检测，不允许有eslint未通过提交的情况

+ `components`里的组件统一格式 `组件/组件.vue ` 文件夹与组件同名，在页面或组件中引入就不用再`import`和在`components`注册了

+ 页面及组件中分割出来的子组件，确定不公用的情况下，建议封装到 `组件/components`文件夹里

+ 一些复杂对象或复杂数组的配置信息，不要在组件内直接定义，公用的建议提到config文件夹下（分模块管理），确定非公用的直接写到组件的文件夹内部即可

+ api 参考上文目录说明中的api项

+ git提交规范参考前端规范里的代码提交规范

  https://kdocs.cn/l/saAjmwvzT?f=130
  [文档] 1-前端技术规范-v1.0-20200618.docx