# m-mall-pc

**Repository Path**: friendlyJesse/m-mall-pc

## Basic Information

- **Project Name**: m-mall-pc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-14
- **Last Updated**: 2021-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# nuxt2 + element dashboard

## Docs

项目框架 [Nuxt.js docs](https://github.com/nuxt/nuxt.js).

需要安装 vscode 插件：

- ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- Prettier - Code formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- Vetur: https://marketplace.visualstudio.com/items?itemName=octref.vetur

## Script

```bash
# 初始化公共组件submodule
# 本地开发环境执行：
$ npm run init:dev
# 服务器开发环境执行：
$ npm run init

# 执行 yarn 安装依赖
$ yarn

# 启动DEV环境调试
$ yarn DEV

# 切换调试环境 DEV/TEST/UAT/PRD
$ yarn TEST
$ yarn UAT
$ yarn PRD

# 编译生产环境
$ yarn build
```

## 项目目录结构规范

- pages 中的文件夹只能是 3 层，分别是：分类 -> 模块 -> 内容页
- 内容页中使用的静态资源（图片、字体等）应于当前目录下，静态资源过多时可在当前目录下增加静态资源目录用于存放静态资源。
- 每个内容页中包含 index.vue、index.const.js、index.less、index.service.js、index.js 文件。

  - 由于 nuxt 框架中，pages 中每个.vue 文件都会生成一个对应路由。所以在内容页文件夹下仅存放一个 vue 文件
  - index.js 文件用于将页面中脚本部分抽离出来，分开维护。
  - index.const.js 文件用于将脚本中固定常量抽离出来，分开维护。
  - index.service.js 文件用于将脚本中处理逻辑封装成服务抽离出来，分开维护。
  - index.less 文件用于将样式部分抽离出来，分开维护。
  - index.vue 文件用于 vue 页面入口，包含模板部分和样式与脚本的引入。

- 模块级（跨页面）可复用的组件拆分至 components 文件夹中，按照模块文件夹存放
-

```
/src/
├─assets              //资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
├─components          //可复用的业务组件
│ ├─financial         //分类
│ │ └─payables        //模块
│ │   └─a-b-c.vue     //模块级复用组件
│ └─purchase-order
│   └─whoesale
├─const
├─layouts             //布局目录 layouts 用于组织应用的布局组件。
├─middleware          //middleware 目录用于存放应用的中间件。
├─mixins              //用于存放 vue 混入的目录。
├─modules             //用于存放公共模块的目录。
│ ├─address           //模块功能
│ │ ├─index.js        //模块快捷入口
│ │ ├─address-add.dialog.module.js      //模块主入口
│ │ ├─address-add.dialog.service.js     //模块服务
│ │ └─address-add.dialog.component.vue  //模块组件
│ └─index.js          //全部模块入口
├─pages               //页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
│ ├─financial         //分类
│ │ └─payables        //模块
│ └─purchase-order    //分类
│   └─wholesale       //模块
│      ├─add          //内容页
│      │  ├─index.vue         //页面入口和模板
│      │  ├─index.js          //页面业务逻辑
│      │  ├─index.const.js    //脚本使用的常量
│      │  ├─index.service.js  //脚本抽离出的服务
│      │  └─index.less        //页面样式
│      ├─detail
│      └─list
├─plugins                     //插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
├─services                    //用于存放服务目录。
│ ├─api                       //服务功能
│ │ ├─index.js                //服务快捷入口
│ │ ├─api.js                  //服务入口
│ │ └─api.mMallWeb.js         //服务逻辑
│ └─index.js                  //全部服务入口
├─static                      //静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
└─store                       //vuex目录
```

## 环境变量

### 调试多环境

.env.DEV、.env.MOCK、.env.TEST、.env.PRD、.env.UAT
每个文件都配置了对应环境变量的值，只需要调整以上文件内容即可完成环境变量值的设置

### 环境变量配置

使用.env 设置环境变量, 即在项目根目录新建一个.env 文件, 填写环境变量即可。

.env 文件示例:

```sh
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=another
```

可以在项目的 vue 文件或 js 文件中读取

```js
mounted() {
  console.log(process.env.TESTING_VAR) // 输出 just-fot-testing
}
```

**自带的环境变量说明**

| 环境变量名  | 说明                                                                                                                        | 默认值 | 示例                      |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ------ | ------------------------- |
| API_SERVER  | axios 的 baseURL，可不传。不传时，则使用相对路径发送请求                                                                    |        | https://www.easy-mock.com |
| PUBLIC_PATH | 对应 webpack 的 publicPath，用于指定静态文件访问路径，一定要/结尾                                                           |        | http://cdn.deepexi.com/   |
| NO_LOGIN    | 是否登陆拦截，传 1 则不会有登录拦截                                                                                         |        | 1                         |
| COOKIE_PATH | 用于设置 cookie 的 path，如果多个项目需要共享 cookie，则应该保证项目在共同的目录下，且设置 COOKIE_PATH 为它们的共同目录地址 | /      | /xpaas                    |

## 构建

构建默认生成的是 hash 路由模式的 spa, 会读取根目录下的.env 文件获取环境变量

命令如下:

```sh
yarn build
```

devtest
pushtest

## yarn sub 命令使用方法

1、初始化项目子项目，也就是在子项目还不存在的时候使用
yarn subm initial <branchName>

2、切换子项目分支
yarn subm checkout <branchName>

3、更行子项目当前分支代码
yarn subm update