Compare commits

...

14 Commits

@ -1,4 +1,4 @@
FROM node:12.13.1 FROM node:14.17.0
WORKDIR /workload WORKDIR /workload
COPY nuxt.config.js /workload/nuxt.config.js COPY nuxt.config.js /workload/nuxt.config.js

@ -5,30 +5,59 @@
* @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;
- 配置与分支对应关系msb_prod -> prod msb_beta -> beta msb_test -> test msb-其他 -> dev - 环境变量配置文件 env.config;
- 配置与分支对应关系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,21 +75,25 @@ export {
IsEmail IsEmail
} }
``` ```
## 组件 ## 组件
- 根目录的components 只放置真正的组件某个页面的业务模块应该在pages的相应目录下新建module目录放置
- 所有的自定义组件文件名以大驼峰命名且在templet中使用也用大驼峰形式使用(包括页面内的模块组件)
## storage的使用 - 根目录的 components 只放置真正的组件,某个页面的业务模块应该在 pages 的相应目录下新建 module 目录放置
- 不要在页面内直接使用loaclStorage全都放置到vuex中做一次管理 - 所有的自定义组件文件名以大驼峰命名,且在 templet 中使用也用大驼峰形式使用(包括页面内的模块组件)
## storage 的使用
- 不要在页面内直接使用 loaclStorage全都放置到 vuex 中做一次管理
## 请求 ## 请求
- 项目中有两个axios请求实例一个事nuxt自带的不需要Token请使用这个一个是额外封装的需要Token请使用这个
- 需要Token的请求不要写在asyncData中 - 项目中有两个 axios 请求实例,一个事 nuxt 自带的(不需要 Token 请使用这个),一个是额外封装的(需要 Token 请使用这个);
- 需要 Token 的请求,不要写在 asyncData 中;
- 所有请求方法命名以Api+请求类型+具体方) 法命名 - 所有请求方法命名以Api+请求类型+具体方) 法命名
- 所有请求使用ToAsyncAwait 包裹 - 所有请求使用 ToAsyncAwait 包裹
- 不允许使用try catch 和 then 处理返回结果 - 不允许使用 try catch 和 then 处理返回结果
``` js
```js
// 使用示例 // 使用示例
// xxapi.js // xxapi.js
import {ToAsyncAwait, ReqestTk} from '@/common/utils' import {ToAsyncAwait, ReqestTk} from '@/common/utils'
@ -82,46 +115,47 @@ export {
} }
``` ```
## css ## css
- 采用BEM命名法
### 兼容CSS - 采用 BEM 命名法
``` css
### 兼容 CSS
```css
/* 以下兼容方式的样式请使用util.css中的adj方法 */ /* 以下兼容方式的样式请使用util.css中的adj方法 */
.my-class{ .my-class {
transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);
-webkit-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0);
-moz-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0);
-o-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0);
-ms-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0);
} }
/* 使用以下方法 */ /* 使用以下方法 */
@import "~/assets/scss/util.scss"; @import "~/assets/scss/util.scss";
.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;
// 登录拦截 // 登录拦截
// 示例:点击购买课程前需要判断当前用户是否登录,未登录则弹出登录弹窗 // 示例:点击购买课程前需要判断当前用户是否登录,未登录则弹出登录弹窗
function onPurchaseCourse() { function onPurchaseCourse() {
if (!this.$isLoginValidate()) { if (!this.$isLoginValidate()) {
return; return;
} }
// 此处省略其他业务代码... // 此处省略其他业务代码...
} }
``` ```

@ -18,6 +18,8 @@
<div class="layout-footer-wrap__address"> <div class="layout-footer-wrap__address">
© 2020 马士兵北京教育科技有限公司 © 2020 马士兵北京教育科技有限公司
地址北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1 地址北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1
<a href="https://oss-cdn.mashibing.com/teacher_attachment/user_00020172/yyzz.jpg" target="_blank">营业页执照</a>
<a href="https://oss-cdn.mashibing.com/default/cbwxkz.jpg" target="_blank">出版物经营许可证新出发京零字第海210140号</a>
</div> </div>
</div> </div>
</div> </div>
@ -89,6 +91,9 @@ export default {
color: #999999; color: #999999;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
a{
color: #999;
}
} }
} }
} }

@ -2,96 +2,90 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-03 22:14:16 * @Date: 2022-05-03 22:14:16
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-07-15 11:39:08 * @LastEditTime: 2023-04-21 16:14:15
* @Description: file content * @Description: file content
*/ */
export default { export default {
// Global page headers: https://go.nuxtjs.dev/config-head // Global page headers: https://go.nuxtjs.dev/config-head
head: { head: {
title: '马士兵严选', title: "马士兵严选",
htmlAttrs: { htmlAttrs: {
lang: 'zh' lang: "zh",
}, },
meta: [ meta: [
{ charset: 'utf-8' }, { charset: "utf-8" },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: 'description', name: 'description', content: '' }, { hid: "description", name: "description", content: "" },
{ name: 'format-detection', content: 'telephone=no' } { name: "format-detection", content: "telephone=no" },
], ],
link: [ link: [{ rel: "icon", type: "image/x-icon", href: "/logo.ico" }],
{ rel: 'icon', type: 'image/x-icon', href: '/logo.ico' } },
] router: {
}, extendRoutes(routes, resolve) {
router: { routes.push({
extendRoutes(routes, resolve) { name: "custom",
routes.push({ path: "/",
name: 'custom', component: resolve(__dirname, "pages/index/index.vue"),
path: '/', });
component: resolve(__dirname, 'pages/index/index.vue') },
}) middleware: ["redirect"],
}, },
middleware: ['redirect']
},
// Global CSS: https://go.nuxtjs.dev/config-css // Global CSS: https://go.nuxtjs.dev/config-css
css: [ css: ["@assets/scss/global.scss", "element-ui/lib/theme-chalk/index.css"],
'@assets/scss/global.scss',
'element-ui/lib/theme-chalk/index.css'
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [ plugins: [
'@/plugins/element-ui', "@/plugins/element-ui",
'@/plugins/axios', "@/plugins/axios",
'@/plugins/axiosTk.js', "@/plugins/axiosTk.js",
'@plugins/vue-inject.js', "@plugins/vue-inject.js",
'@/plugins/v-distpicker', "@/plugins/v-distpicker",
'@/plugins/router', "@/plugins/router",
'@/plugins/im', "@/plugins/im",
'@/plugins/chat' "@/plugins/chat",
], ],
// Auto import components: https://go.nuxtjs.dev/config-components // Auto import components: https://go.nuxtjs.dev/config-components
components: true, components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [ buildModules: [],
],
build: { build: {
vendor: ['v-distpicker'] vendor: ["v-distpicker"],
}, },
styleResources: { styleResources: {
scss: '@/assets/scss/global.scss' scss: "@/assets/scss/global.scss",
}, },
// Modules: https://go.nuxtjs.dev/config-modules // Modules: https://go.nuxtjs.dev/config-modules
modules: [ modules: [
'@nuxtjs/axios', "@nuxtjs/axios",
'cookie-universal-nuxt', "cookie-universal-nuxt",
'@nuxtjs/style-resources' "@nuxtjs/style-resources",
], ],
// Build Configuration: https://go.nuxtjs.dev/config-build // Build Configuration: https://go.nuxtjs.dev/config-build
build: { build: {
transpile: [/^element-ui/], transpile: [/^element-ui/],
}, },
axios: { axios: {
// 表示开启代理 // 表示开启代理
// proxy: true, // proxy: true,
}, },
proxy: { proxy: {
// '/mall/': { // '/mall/': {
// target: 'https://you-gateway.mashibing.com/', // 目标接口域名 // target: 'https://you-gateway.mashibing.com/', // 目标接口域名
// // target: 'https://k8s-horse-gateway.mashibing.cn/', // 目标接口域名 // // target: 'https://k8s-horse-gateway.mashibing.cn/', // 目标接口域名
// pathRewrite: { // pathRewrite: {
// changeOrigin: true, // 表示是否跨域 // changeOrigin: true, // 表示是否跨域
// }, // },
// }, // },
}, },
server: { server: {
port: 3000, port: 3000,
host: '0.0.0.0' host: "0.0.0.0",
}, },
} };

28305
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -21,26 +21,26 @@
"element-ui": "^2.15.8", "element-ui": "^2.15.8",
"js-util-all": "^1.0.6", "js-util-all": "^1.0.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"nuxt": "^2.15.8", "nuxt": "2.15.8",
"qrcode": "^1.5.0", "qrcode": "^1.5.0",
"v-distpicker": "^1.2.13", "v-distpicker": "^1.2.13",
"vue": "^2.6.14", "vue": "2.6.14",
"vue-server-renderer": "^2.6.14", "vue-server-renderer": "2.6.14",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "2.6.14"
}, },
"devDependencies": { "devDependencies": {
"@vue/test-utils": "^1.3.0", "@vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"webpack": "^4.46.0",
"node-sass": "^4.14.1",
"sass": "^1.32.13",
"sass-loader": "^7.3.1",
"babel-jest": "^27.4.4", "babel-jest": "^27.4.4",
"eslint": "^8.15.0", "eslint": "^8.15.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"git-repo-info": "^2.1.1", "git-repo-info": "^2.1.1",
"jest": "^27.4.4", "jest": "^27.4.4",
"node-sass": "^4.14.1",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"vue-jest": "^3.0.4" "sass": "^1.32.13",
"sass-loader": "^7.3.1",
"vue-jest": "^3.0.4",
"webpack": "^4.46.0"
} }
} }

Loading…
Cancel
Save