You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.3 KiB
111 lines
4.3 KiB
5 years ago
|
# 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
|