|
|
|
@ -5,29 +5,58 @@
|
|
|
|
* @LastEditTime: 2022-05-07 11:39:38
|
|
|
|
* @LastEditTime: 2022-05-07 11:39:38
|
|
|
|
* @Description: file content
|
|
|
|
* @Description: file content
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
# shop-pc
|
|
|
|
# shop-pc
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 前置环境
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
由于项目依赖问题，开发 `node` 版本必须是 `14`。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
如果电脑安装 `Node 18`，那么怎么添多个 `node` 版本，可以使用 `nvm` 版本管理工具。具体安装可以参考下面教程
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[window install nvm](https://juejin.cn/post/7074108351524634655)
|
|
|
|
|
|
|
|
[mac install nvm](https://juejin.cn/post/7206882855200047161)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 修改前端接口请求地址
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
进入到 ` plugins/config/env.js` 中：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
|
|
// 修改对应值即可
|
|
|
|
|
|
|
|
const ENV = {
|
|
|
|
|
|
|
|
base_url: "https://k8s-horse-gateway.mashibing.cn",
|
|
|
|
|
|
|
|
imUrl: "wss://k8s-horse-gateway.mashibing.cn",
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ENV;
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> `注意 ⚠️`：通常本地开发访问线上接口地址时会出现跨越(协议、域名、端口不一样时就会出现跨越问题)，此时后端服务需要配置跨域相关的内容。
|
|
|
|
|
|
|
|
|
|
|
|
## 运行&打包
|
|
|
|
## 运行&打包
|
|
|
|
|
|
|
|
|
|
|
|
- 运行直接执行 npm run dev 打包执行 npm run build 即可，会根据分支读取不同环境变量配置；
|
|
|
|
- 运行直接执行 npm run dev 打包执行 npm run build 即可，会根据分支读取不同环境变量配置；
|
|
|
|
|
|
|
|
|
|
|
|
## 环境变量配置
|
|
|
|
## 环境变量配置
|
|
|
|
|
|
|
|
|
|
|
|
- 环境变量配置文件 env.config;
|
|
|
|
- 环境变量配置文件 env.config;
|
|
|
|
- 配置与分支对应关系：msb_prod -> prod msb_beta -> beta msb_test -> test msb-其他 -> dev
|
|
|
|
- 配置与分支对应关系：msb_prod -> prod msb_beta -> beta msb_test -> test msb-其他 -> dev
|
|
|
|
- 输出的环境变量文件：plugins/config/env.js
|
|
|
|
- 输出的环境变量文件：plugins/config/env.js
|
|
|
|
- 修改环境变量配置后需要执行 “ node env.config " 输出的环境变量才会更新
|
|
|
|
- 修改环境变量配置后需要执行 “ node env.config " 输出的环境变量才会更新
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
// 直接引入输出的配置文件即可
|
|
|
|
// 直接引入输出的配置文件即可
|
|
|
|
import ENV from '@/plugins/config/env.js';
|
|
|
|
import ENV from "@/plugins/config/env.js";
|
|
|
|
// 直接访问你在配置文件中定义的属性
|
|
|
|
// 直接访问你在配置文件中定义的属性
|
|
|
|
console.log(ENV.baseUrl);
|
|
|
|
console.log(ENV.baseUrl);
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 公共方法 utils
|
|
|
|
## 公共方法 utils
|
|
|
|
|
|
|
|
|
|
|
|
- 公共方法统一放置 utils 文件夹内，可以按分类建方法文件 如：验证类 verify.js 请求类 request.js；
|
|
|
|
- 公共方法统一放置 utils 文件夹内，可以按分类建方法文件 如：验证类 verify.js 请求类 request.js；
|
|
|
|
- 所有公共方法采用大驼峰命名法
|
|
|
|
- 所有公共方法采用大驼峰命名法
|
|
|
|
- 所有的方法都从 index.js 输出，引入时统一引入 index，不允许直接引入方法文件
|
|
|
|
- 所有的方法都从 index.js 输出，引入时统一引入 index，不允许直接引入方法文件
|
|
|
|
- 所有方法文件如果导出的是多个方法，不允许在定义方法时导出，必须在文件底部一一导出，并附上方法简单的注释
|
|
|
|
- 所有方法文件如果导出的是多个方法，不允许在定义方法时导出，必须在文件底部一一导出，并附上方法简单的注释
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
// 正确
|
|
|
|
// 正确
|
|
|
|
import {Req, IsPhone} from '@/common/utils';
|
|
|
|
import {Req, IsPhone} from '@/common/utils';
|
|
|
|
@ -46,20 +75,24 @@ export {
|
|
|
|
IsEmail
|
|
|
|
IsEmail
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 组件
|
|
|
|
## 组件
|
|
|
|
|
|
|
|
|
|
|
|
- 根目录的 components 只放置真正的组件，某个页面的业务模块应该在 pages 的相应目录下新建 module 目录放置
|
|
|
|
- 根目录的 components 只放置真正的组件，某个页面的业务模块应该在 pages 的相应目录下新建 module 目录放置
|
|
|
|
- 所有的自定义组件文件名以大驼峰命名，且在 templet 中使用也用大驼峰形式使用(包括页面内的模块组件)
|
|
|
|
- 所有的自定义组件文件名以大驼峰命名，且在 templet 中使用也用大驼峰形式使用(包括页面内的模块组件)
|
|
|
|
|
|
|
|
|
|
|
|
## storage 的使用
|
|
|
|
## storage 的使用
|
|
|
|
- 不要在页面内直接使用loaclStorage，全都放置到vuex中做一次管理
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 不要在页面内直接使用 loaclStorage，全都放置到 vuex 中做一次管理
|
|
|
|
|
|
|
|
|
|
|
|
## 请求
|
|
|
|
## 请求
|
|
|
|
|
|
|
|
|
|
|
|
- 项目中有两个 axios 请求实例，一个事 nuxt 自带的（不需要 Token 请使用这个），一个是额外封装的（需要 Token 请使用这个）；
|
|
|
|
- 项目中有两个 axios 请求实例，一个事 nuxt 自带的（不需要 Token 请使用这个），一个是额外封装的（需要 Token 请使用这个）；
|
|
|
|
- 需要 Token 的请求，不要写在 asyncData 中；
|
|
|
|
- 需要 Token 的请求，不要写在 asyncData 中；
|
|
|
|
- 所有请求方法命名以（Api+请求类型+具体方） 法命名
|
|
|
|
- 所有请求方法命名以（Api+请求类型+具体方） 法命名
|
|
|
|
- 所有请求使用 ToAsyncAwait 包裹
|
|
|
|
- 所有请求使用 ToAsyncAwait 包裹
|
|
|
|
- 不允许使用 try catch 和 then 处理返回结果
|
|
|
|
- 不允许使用 try catch 和 then 处理返回结果
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
// 使用示例
|
|
|
|
// 使用示例
|
|
|
|
// xxapi.js
|
|
|
|
// xxapi.js
|
|
|
|
@ -82,10 +115,13 @@ export {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## css
|
|
|
|
## css
|
|
|
|
|
|
|
|
|
|
|
|
- 采用 BEM 命名法
|
|
|
|
- 采用 BEM 命名法
|
|
|
|
|
|
|
|
|
|
|
|
### 兼容 CSS
|
|
|
|
### 兼容 CSS
|
|
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
```css
|
|
|
|
/* 以下兼容方式的样式请使用util.css中的adj方法 */
|
|
|
|
/* 以下兼容方式的样式请使用util.css中的adj方法 */
|
|
|
|
.my-class {
|
|
|
|
.my-class {
|
|
|
|
@ -100,19 +136,19 @@ export {
|
|
|
|
.my-class {
|
|
|
|
.my-class {
|
|
|
|
@include adj(transform, translate3d(-50%, 0, 0));
|
|
|
|
@include adj(transform, translate3d(-50%, 0, 0));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 登录相关
|
|
|
|
## 登录相关
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
```javascript
|
|
|
|
// 访问token
|
|
|
|
// 访问token
|
|
|
|
this.$store.state.token
|
|
|
|
this.$store.state.token;
|
|
|
|
// 设置token
|
|
|
|
// 设置token
|
|
|
|
this.$store.commit('setToken')
|
|
|
|
this.$store.commit("setToken");
|
|
|
|
// 退出登录
|
|
|
|
// 退出登录
|
|
|
|
this.$store.commit('setLoginOut')
|
|
|
|
this.$store.commit("setLoginOut");
|
|
|
|
// 获取登录的用户信息
|
|
|
|
// 获取登录的用户信息
|
|
|
|
this.$store.state.userInfo
|
|
|
|
this.$store.state.userInfo;
|
|
|
|
|
|
|
|
|
|
|
|
// 登录拦截
|
|
|
|
// 登录拦截
|
|
|
|
// 示例：点击购买课程前需要判断当前用户是否登录，未登录则弹出登录弹窗
|
|
|
|
// 示例：点击购买课程前需要判断当前用户是否登录，未登录则弹出登录弹窗
|
|
|
|
@ -122,6 +158,4 @@ function onPurchaseCourse() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 此处省略其他业务代码...
|
|
|
|
// 此处省略其他业务代码...
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
王景
2 years ago