# shopping-app 严选移动端 ## 前置环境 由于项目依赖问题,开发 `node` 版本必须是 `14` or `16`。 如果想安装多个版本,可以通过使用 `nvm` 进行版本管理。然具体安装可以参考下面教程 [window install nvm](https://juejin.cn/post/7074108351524634655) [mac install nvm](https://juejin.cn/post/7206882855200047161) ## 公共方法 utils - 公共方法统一放置 utils 文件夹内,可以按分类建方法文件 如:验证类 verify.js 请求类 request.js; - 所有公共方法采用大驼峰命名法 - 所有的方法都从 index.js 输出,引入时统一引入 index,不允许直接引入方法文件 - 所有方法文件如果导出的是多个方法,不允许在定义方法时导出,必须在文件底部一一导出,并附上方法简单的注释 ```js // 正确 import {Req, IsPhone} from '@/common/utils'; // 错误 import {Req} from '@/common/utils/request'; import {IsPhone} from '@/common/utils/utils'; // 正确 const IsPhone = (str) => {....} const IsEmail = (str) => {....} export { // 判断手机号 IsPhone, // 判断邮箱 IsEmail } // 错误 export const IsPhone = (str) => {....} export const IsEmail = (str) => {....} ``` ## 组件 - 请务必使用 easycom 模式引入第三方组件 - 根目录的 components 只放置真正的组件,某个页面的业务模块应该在 pages 的相应目录下新建 components 目录放置 - 所有的自定义组件文件名以大驼峰命名,且在 templet 中使用也用大驼峰形式使用 ## 请求 - 所有请求方法命名以(Api+请求类型+具体方) 法命名 - 所有请求使用 ToAsyncAwait 包裹 - 不允许使用 try catch 和 then 处理返回结果 ```js // 使用示例 // xxapi.js import {ToAsyncAwait, ReqestTk} from '@/common/utils' const ApiGetUserInfo = (parapms) => ToAsyncAwait(ReqestTk.get('xxxxUrl',{params})); exprot { // 获取用户信息 ApiGetUserInfo } // user.vue improt {ApiGetUserInfo} from '@/common/api/xxapi.js'; const getUserInfo = async () =>{ const {error, result} = await ApiGetUserInfo(); if(error){ alert(error); return false; } app.userInfo = result; } ``` ## 图片 - 按 pages 目录结果放置图片 - 有公共使用的图片请放到 static/common 文件夹内