CSII vue2 template web 模版工程

在使用之前，请务必详细阅读此说明文档，代码提交规范请按照代码提交规范的要求书写，每次提交信息均会进行校验，若不符合规范的将无法提交

[TOC]

提交问题

该脚手架有问题请在issues中提交反馈

脚手架说明

目录结构及说明

.
├── .browserslistrc                                         # 浏览器兼容性文件
├── .editorconfig                                           # 通用编辑器配置文件
├── .env                                                    # 全局环境配置文件
├── .env.development                                        # 开发环境配置文件
├── .env.local                                              # 本地环境配置文件
├── .env.production                                         # 以微前端子应用部署时生产环境配置文件
├── .env.single                                             # 独立部署时生产环境配置文件
├── .eslintrc.js                                            # eslint配置文件
├── .gitignore                                              # git提交忽略文件
├── README.md                                               # 说明文档
├── babel.config.js                                         # babel配置文件
├── config                                                  # 配置
│   ├── alias.config.js                                       # 目录代理配置
│   └── proxy.config.js                                       # 反向代理配置
├── package-lock.json                                       # 依赖锁文件
├── package.json                                            # npm项目配置文件
├── public                                                  # 静态资源目录
├── src                                                     # 主目录
│   ├── App.vue                                             # vue入口sfc
│   ├── apis                                                # api管理目录
│   │   ├── index.js                                          # api入口文件
│   │   └── modules                                           # api子模块
│   │       └── demo.apis.js                                    # 示例api配置文件
│   ├── assets                                              # 资源文件目录
│   │   └── theme                                             # 主题目录
│   │       └── customer.theme.styl                             # 自定义主题
│   ├── common                                              # 公共模块
│   │   ├── index.js                                          # 公共模块入口文件
│   │   ├── request                                           # request模块
│   │   └── utils                                             # 工具类
│   │       └── index.js                                        # 工具类入口文件
│   ├── components                                          # 公共组件目录
│   ├── main.js                                             # vue工程入口文件
│   ├── router                                              # 路由模块
│   │   ├── index.js                                          # 路由入口文件
│   │   └── modules                                           # 路由子模块配置
│   │       └── demo.routes.js                                  # 示例路由
│   ├── store                                               # 状态管理模块
│   │   ├── index.js                                          # 状态管理入口文件
│   │   └── modules                                           # 状态管理子模块
│   │       ├── demo.store.js                                   # 示例子状态管理配置文件
│   │       └── root.store.js                                   # 全局状态管理配置文件
│   └── views                                               # 页面
│       ├── Home.vue                                          # Home页面
│       └── demo                                              # 示例子模块页面目录
└── vue.config.js                                           # vue工程配置文件

开发规范

环境变量

请自行查看工程下的.env*文件内的变量名和注释

注意

打包命令有两个，分别是

1. npm run build 默认打包方式，会以微前端子应用模式打包，打包时调用 .env.production 配置文件
2. npm run build:single 独立部署时打包方式，打包时调用 .env.single 配置文件

差异在 publicPath 属性，用于方便又需独立部署又需集成微前端的用户

config配置

alias目录路径代理配置

目录路径代理在/config/alias.config.js文件中配置，新增配置项规则参考以下示例：

// 请在下新增反向代理配置
module.exports = {
  'alias_name': resolve('/dir_path'),
  // ...
}

alias.config.js文件会在vue.config.js中自动引入并配置，若无效路径会抛错

alias配置规则

<alias_name代理名称>: <代理目录路径>

proxy反向代理配置

反向代理在/proxy.config.js文件中配置，新增配置规则参考以下示例：

const bashHost = process.env.PROXY_HOSTNAME

// 请在下新增反向代理配置
module.exports = {
  '/api': {
    target: bashHost,
    pathRewrite: {
      '^/api': '/'
    }
  }
}

proxy.config.js文件会在vue.config.js中自动引入并配置，若无效配置则会不生效

配置规则

'/<router_path本地路由地址>': {
  target: <base_host目标路由地址>,
  pathRewrite: {
    '^/<before_rewrite_router本地替换路由>': '<after_rewrite_router替换后路由>'
  }
}

代理地址替换

在根目录中的/.env.local中修改PROXY_HOSTNAME属性，具体参考示例，修改完成之后重启 vue 工程

mockjs配置(使用mockServer代替)

mockjs在根目录下/mock/目录中配置，其中index.js为入口文件，以实现配置自动引入，无需手动引入配置生效

新增配置

在/mock/modules/目录下新增配置文件，文件命名规则为[moduleName].mock.js，在modules目录下符合该命名规则的文件将会被引入并初始化

在xxx.mock.js文件中编写具体的 mock 接口，编写完成之后通过ES6 Module方式导出，示例如下：

// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random

// demo mock示例
const DemoMock = () => {
  const articles = []
  for (let i = 0; i < 100; i++) {
    const newArticleObject = {
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
      author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    articles.push(newArticleObject)
  }
  return {
    data: articles
  }
}

// 导出 mock 接口
export default {
  path: '/mock-demo.do',
  method: 'post',
  mock: DemoMock
}

导出规则

必须使用ES6 Module的方式导出，其中导出值为Object类型，并包含三个属性path、method、mock

• path mock 路由
• method 请求方式，如post、get等
• mock mock 实例

示例如下：

export default {
  path: '/mock-demo.do',
  method: 'post',
  mock: DemoMock
}

apis接口管理模块配置

apis在src目录下/src/apis/目录中配置，其中index.js为入口文件，以实现配置自动引入，无需手动引入配置生效

新增子模块

在/src/apis/modules/目录下新增配置文件，文件命名规则为[moduleName].apis.js，在modules目录下符合该命名规则的文件将会被引入并初始化

默认请求方法为post和get方法，可直接通过this.post()和this.get()方法调用，若需要新增请自行继承父类并调用父类this.request.[method]对象使用

在xxx.api.js文件中编写具体的请求配置，编写完成之后通过ES6 Module方式导出，同时会自动添加子模块，示例如下：

// 引入请求模块
import { Request } from '@/common/request'

/**
 * 继承请求接口并自定义请求方法
 */
class DemoApi extends Request {
  constructor () {
    super({})
  }

  /* post请求demo */
  postDemo (data, config) {
    return this.post('/post-demo.do', data, config)
  }

  /* get请求demo */
  getDemo (data, config) {
    return this.get('/get-demo.do', data, config)
  }

  /* 自定义option请求 */
  optionDemo (data, config) {
    return this.request.option('/mock-demo.do', data, config)
  }
}

// 导出接口类
export default DemoApi

使用方式

因为apis已经在common公共模块中引入并挂载在 vue 实例上，并通过this.$apis.[moduleName].[requestFuncName]

例子如下：

this.$apis.child.postDemo(
  '/demo.do',
  { 
    name: '张三'
  },
  { 
    headers: {
      'Content-Type': 'application/json; charset=utf8'
    } 
  }
)
  .then(res => {
    // TODO
  })
  .catch(err => {
    console.error(err)
  })

接口业务错误码拦截

默认接口返回数据的code字段为业务错误码，属性路径为:response.data.code，若需修改请修改src/common/request/index.js中的ERROR_KEY常量的值，若有其他数据结构请自行修改

关闭请求切面管理

在该脚手架中默认启用请求切面管理，会将短时间内重复请求终止，若要进行配置则需在/.env文件内修改VUE_APP_REQUEST_ASPECT属性，具体可配置选项请查看.env文件

工具类拓展

在/src/common/utils/index.js中添加对应的工具类方法，具体参考例子：

const utils = {
  /**
   * demo示例
   * @method demoUtil
   * @param {string} str 待修改字符串
   * @return {string}
   */
  demoUtil (str) {
    return str + '_customer'
  }
}

export default utils

使用方法

utils工具类已经在common公共模块中引入并绑定在 vue 实例中，可以在 vue 页面中通过$utils对象使用：

const str = this.$utils.demoUtil('str')

或者可以直接引入utils工具类文件使用

import Utils from '@/common/utils'

Utils.demoUtil

router配置

vue-router在src目录下/src/router/目录中配置，其中index.js为入口文件，以实现配置自动引入，无需手动引入配置生效

新增路由

在/src/router/modules/目录下新增配置文件，文件命名规则为[moduleName].routes.js，在modules目录下符合该命名规则的文件将会被引入并初始化

示例如下：

export default [
  {
    path: '',
    redirect: 'demo-home'
  },
  {
    path: 'demo-home',
    name: 'DemoHome',
    component: () => import('@/views/demo/DemoHome'),
    meta: {
      title: '示例'
    }
  },
  {
    path: 'validate-demo',
    name: 'ValidateDemo',
    component: () => import('@/views/demo/ValidateDemo'),
    meta: {
      title: '表单校验示例'
    }
  },
  {
    path: 'mock-demo',
    name: 'MockDemo',
    component: () => import('@/views/demo/MockDemo'),
    meta: {
      title: 'mock示例'
    }
  },
  {
    path: 'request-demo',
    name: 'RequestDemo',
    component: () => import('@/views/demo/RequestDemo'),
    meta: {
      title: '请求示例'
    }
  }
]

如有非业务模块路由，如：登录、注册等，请直接在/src/route/index.js对应代码块中添加

store状态管理配置

vuex在src目录下/src/store/目录中配置，其中index.js为入口文件，以实现配置自动引入，无需手动引入配置生效

新增状态管理配置

在/src/store/modules/目录下新增配置文件，文件命名规则为[moduleName].store.js，在modules目录下符合该命名规则的文件将会被引入并初始化，并根据前缀自动添加命名空间

示例如下：

// demo.store.js
export default {
  state: {
    text: ''
  },
  getters: {
    getText ({ text }) {
      return text
    }
  },
  mutations: {
    setText (state, newValue) {
      state.text = newValue
    }
  }
}

demo.store.js会被自动添加至demo命名空间中

取值参考vuex官方文档

其中/src/store/modules/global.store.js文件中配置的状态管理为全局状态管理，不携带namespaced命名空间

iconfont

默认引入 Font Awesome 图标库 Free 版，可用图标请点击这里查看

组件库

默认使用 Ant Design Vue，若有其他组件库需求请自行引入

antdv 主题修改

以引入自定义主题，主题色为#383838，若修改其他内容请修改 /src/assets/theme/theme.less 文件内的变量，可修改变量请点击这里查看

git提交规范

在添加提交文件的时候，请勿使用git add .或者git add -A命令，应避免全部提交，提交文件应与本次提交内容相关，在提交之前应确定哪些文件需要提交

提交日志格式

代码提交规范请按照代码提交规范的要求书写，每次提交信息均会进行校验，若不符合规范的将无法提交

该工程提交日志校验规则遵循 commitlint 和 Google Angular 的默认格式

# 注意：冒号前面是需要一个空格的, 带 ？ 表示非必填信息
type(scope?): subject
body?
footer?

各关键字含义如下:

• scope 指 commit 的范围（哪些模块进行了修改）
• subject 指 commit 的简短描述
• body 指 commit 主体内容（长描述）
• footer 指 commit footer 信息
• type 指当前 commit 类型，一般有下面几种可选类型:

提交示例

# 使用status参数打印修改内容
git status

然后通过git add 文件路径的方式提交

$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   README.md        # 该文件被修改
	modified:   test.txt         # 该文件被修改

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	'

no changes added to commit (use "git add" and/or "git commit -a")

添加README.md文件至提交队列

git add README.md

使用 git commit 指令提交时

接下来在commit操作中添加提交信息，提交信息应包含提交类型、模块、功能名称、提交内容简述，commit类型选项参考上文

# 提交模块1
$ git add src/views/transfer/main.vue

# 提交模块2
$ git add src/plugin/cidc-mobile/components/index.js
$ git add src/plugin/cidc-mobile/components/inputItem/index.vue
$ git commit # 直接进入详细提交编辑模式，推荐这一步在GitBash.exe程序中实现
           # 或者直接通过webstorm的vcs代码提交实现

# 此时会打开vim（在win下是打开对应的终端编辑器，该教程win环境下仅考虑在GitBash.exe中实现）

    > # 移动光标至空行头部
    > # 按下 A 键
    > feat(上传模块): 更新上传功能
    > # 隔开一行
    > - 已实现上传文件的功能
    > - 已实现文件合并的功能
    > - 优化上传页面交互逻辑

# 尽量保证每次提交只有与功能相关的内容

# 推送
$ git push

使用 git cz 指令提交时 推荐！

1. 选择提交类型

   ▶ git cz   
   cz-cli@4.2.2, cz-customizable@6.3.0
   
   All lines except first will be wrapped after 100 characters.
   ? 选择更改类型:
    (Use arrow keys)
   ❯ build:     主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交 
     ci:        主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交 
     docs:      文档更新 
     feat:      新增功能 
     merge:     分支合并 Merge branch <branch> of <branch> 
     fix:       bug 修复 
     perf:      性能, 体验优化 
   (Move up and down to reveal more choices)
   

2. 选择更改范围，若无可选择empty

   ▶ git cz   
   cz-cli@4.2.2, cz-customizable@6.3.0
   
   All lines except first will be wrapped after 100 characters.
   ? 选择更改类型:
    docs:      文档更新
   ? 更改的范围:
    (Use arrow keys)
   ❯ 脚手架 
     文档 
     公共模块 
     ──────────────
     empty 
     custom 
   

3. 输入简短描述

   ▶ git cz   
   cz-cli@4.2.2, cz-customizable@6.3.0
   
   All lines except first will be wrapped after 100 characters.
   ? 选择更改类型:
    docs:      文档更新
   ? 更改的范围:
    文档
   ? 简短描述:
    (docs(文档): docs(文档): 更新READEME.md文档) 
   

4. 输入详细描述，使用|换行

   ▶ git cz   
   cz-cli@4.2.2, cz-customizable@6.3.0
   
   All lines except first will be wrapped after 100 characters.
   ? 选择更改类型:
    docs:      文档更新
   ? 更改的范围:
    文档
   ? 简短描述:
    docs(文档): docs(文档): 更新READEME.md文档
   ? 详细描述. 使用"|"换行:
    (- 更新组件库说明|- 更新iconfont说明) 
   

5. 选择关闭的issues，若无可不输入

   ▶ git cz   
   cz-cli@4.2.2, cz-customizable@6.3.0
   
   All lines except first will be wrapped after 100 characters.
   ? 选择更改类型:
    docs:      文档更新
   ? 更改的范围:
    文档
   ? 简短描述:
    docs(文档): docs(文档): 更新READEME.md文档
   ? 详细描述. 使用"|"换行:
    - 更新组件库说明|- 更新iconfont说明
   ? 关闭的issues列表. E.g.: #31, #34:
   

6. 确认提交信息，若信息无误回车提交即可

   ▶ git cz   
   cz-cli@4.2.2, cz-customizable@6.3.0
   
   All lines except first will be wrapped after 100 characters.
   ? 选择更改类型:
    docs:      文档更新
   ? 更改的范围:
    文档
   ? 简短描述:
    docs(文档): docs(文档): 更新READEME.md文档
   ? 详细描述. 使用"|"换行:
    - 更新组件库说明|- 更新iconfont说明
   ? 关闭的issues列表. E.g.: #31, #34:
    
   
   ###--------------------------------------------------------###
   docs(文档): docs(文档): docs(文档): 更新READEME.md文档
   
   - 更新组件库说明
   - 更新iconfont说明
   ###--------------------------------------------------------###
   
   ? 确认提交? (Yneh) 
   

每次提交的时候务必严格按照单次提交单个功能，单次提交仅提交关联文件的规范进行

假如本次提交包含多个功能模块或者多个业务，应分开提交

推荐直接使用git cz命令提交，按照流程操作提示即可!

微前端

该脚手架已集成微前端模块乾坤qiankun并且已经完成main.js修改，可实现独立部署或者以子应用形式嵌入主应用中，.env.local本地环境变量配置文件会在依赖安装结束之后生成，若已有则不会生成

在修改之前请务必阅读qiankun子应用改造指南 ，如出现其他问题是因为未阅读文档而造成的，均不协助处理

可能会出现的错误和问题阅读qiankun子应用对接常见问题

修改子应用信息

如遇到部署之后单独访问能够加载但是嵌入主应用无法加载的情况，请排查以下问题:

1. 子应用的配置是否正确
2. Galaxy Studio是否配置子应用入口

修改子应用信息主要有以下几个内容：

1. /package.json中的name属性需要修改为系统名称

2. /.env.local中修改PORT属性端口号

3. /.env.production中修改PUBLIC_PATH属性为真实线上部署的地址，如

   • //hostname:port/
   • //hostnmae:port/web/

当以子应用接入时监听项目信息改变

仅在微前端情况下作为子应用接入时可使用

在window对象上监听 change-project 事件并提取 detail 属性获取修改后的项目信息

// 当子应用情况启动时新增项目改变时事件传递
if (window.__POWERED_BY_QIANKUN__) {
  window.addEventListener('change-project', e => {
    // 获取项目信息
    const projectMsg = e.detail
    console.log(projectMsg)
    // TODO
  })
}

Current Tags

• 1.0.2                                ...           latest (3 years ago)

2 Versions

• 1.0.2                                ...           3 years ago
• 1.0.1                                ...           3 years ago