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

4.3 KiB Raw Blame History

uni-templete使用说明

环境准备

目录说明

scss

约定

4.3 KiB

Raw Blame History