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

  '~': __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

约定

• 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