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.
shop-pc/README.md

4.5 KiB

shop-pc

前置环境

由于项目依赖问题,开发 node 版本必须是 14

如果电脑安装 Node 18,那么怎么添多个 node 版本,可以使用 nvm 版本管理工具。具体安装可以参考下面教程

window install nvm mac install nvm

修改前端接口请求地址

进入到 plugins/config/env.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 即可,会根据分支读取不同环境变量配置;

环境变量配置

  • 环境变量配置文件 env.config;
  • 配置与分支对应关系msb_prod -> prod msb_beta -> beta msb_test -> test msb-其他 -> dev
  • 输出的环境变量文件plugins/config/env.js
  • 修改环境变量配置后需要执行 “ node env.config " 输出的环境变量才会更新
// 直接引入输出的配置文件即可
import ENV from "@/plugins/config/env.js";
// 直接访问你在配置文件中定义的属性
console.log(ENV.baseUrl);

公共方法 utils

  • 公共方法统一放置 utils 文件夹内,可以按分类建方法文件 如:验证类 verify.js 请求类 request.js
  • 所有公共方法采用大驼峰命名法
  • 所有的方法都从 index.js 输出,引入时统一引入 index不允许直接引入方法文件
  • 所有方法文件如果导出的是多个方法,不允许在定义方法时导出,必须在文件底部一一导出,并附上方法简单的注释
// 正确
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
}

组件

  • 根目录的 components 只放置真正的组件,某个页面的业务模块应该在 pages 的相应目录下新建 module 目录放置
  • 所有的自定义组件文件名以大驼峰命名,且在 templet 中使用也用大驼峰形式使用(包括页面内的模块组件)

storage 的使用

  • 不要在页面内直接使用 loaclStorage全都放置到 vuex 中做一次管理

请求

  • 项目中有两个 axios 请求实例,一个事 nuxt 自带的(不需要 Token 请使用这个),一个是额外封装的(需要 Token 请使用这个);
  • 需要 Token 的请求,不要写在 asyncData 中;
  • 所有请求方法命名以Api+请求类型+具体方) 法命名
  • 所有请求使用 ToAsyncAwait 包裹
  • 不允许使用 try catch 和 then 处理返回结果
// 使用示例
	// 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;
	}

css

  • 采用 BEM 命名法

兼容 CSS

/* 以下兼容方式的样式请使用util.css中的adj方法 */
.my-class {
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  -moz-transform: translate3d(-50%, 0, 0);
  -o-transform: translate3d(-50%, 0, 0);
  -ms-transform: translate3d(-50%, 0, 0);
}
/* 使用以下方法 */
@import "~/assets/scss/util.scss";
.my-class {
  @include adj(transform, translate3d(-50%, 0, 0));
}

登录相关

// 访问token
this.$store.state.token;
// 设置token
this.$store.commit("setToken");
// 退出登录
this.$store.commit("setLoginOut");
// 获取登录的用户信息
this.$store.state.userInfo;

// 登录拦截
// 示例:点击购买课程前需要判断当前用户是否登录,未登录则弹出登录弹窗
function onPurchaseCourse() {
  if (!this.$isLoginValidate()) {
    return;
  }
  // 此处省略其他业务代码...
}