代码拉取完成，页面将自动刷新
同步操作将从 Sam-meng/vue-cli 高级模板 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
npm install
npm run serve 或 npm start
npm run build:stage
npm run build
npm run lint
npm run test:unit
VUE_APP_MOCK = true
VUE_APP_BASEURL_API = /api
DEV_PROXY_TARGET_API = http://10.25.73.159:8081
ESLintVeturPrettier - Code formatterpath Autocompletevscode-element-helper (element-ui 专用)Debugger for ChromeGitLens -- Git superchargedvue-devtoolsjson-formatterPostman
单个组件的数据流
props、data/$store、computed (由前面派生)
↓
template/render
↓
用户交互事件、初始化的异步回调
↓
data/$store
组件间的数据流
组件、混入 ... 应使用局部注册
局部注册可保持清晰的依赖关系，并且 IDE 智能感知更为友好
名称大小写
<script>
import MyComponent from '@/components/MyComponent.vue' // 文件名使用 PascalCase 命名法
export default {
name: 'ComponentName', // 必须有 name
components: { MyComponent },
}
</script>
<template>
<div>
<!-- 在 template 中一律使用 kebab-case 方式调用 -->
<my-component />
<el-input />
</div>
</template>
使用前缀
使用 CSS Modules，基于如下考虑：
使用方式
语法
/* 默认为局部 */
.xxx {
}
/* 从局部转到全局 */
:global(.yyy) {
}
// or
:global {
}
/* 从全局转到局部 */
:local(.zzz) {
}
// or
:local {
}
单个组件专属
<style lang="less" module></style>
多个组件共用 (*.module.less)
import style from './style.module.less'
url 定义准则：path 对应视图变化 (使用 kebab-case 命名法)，query 对应数据变化，hash 对应滚动条位置
如：/project-list?type=1&search=keyword#position
路由的 name 值 (命名路由) 使用 kebab-case 命名法
视图跳转尽量使用声明式
<router-link :to="path | { path, ... }">使用声明式</router-link>
<!-- 不推荐的做法 -->
<a @click="$router.push(...)">使用命令式</a>
当组件依赖 $route 时 (特别是 $route.params)，要使用路由组件传参，与 $route 解耦
需要由 vuex 管理的数据
getter、mutation、action、module 使用驼峰命名法
module 应避免嵌套，尽量扁平化
module 应该启用命名空间 namespaced: true
避免重复造轮子，多使用成熟的现成工具/类库/组件，如：lodash、qs、url-parse 等
模块设计原则：
方法接口的设计
// 参数类型与个数要保持稳定
// 建议参数不要超过3个，且预留一个 options 对象，以提高扩展性
// 方法尽量纯净 (纯函数思想)
export function myMethod1(a, options) {} // 当必选参数只有一个时
export function myMethod2(a, b, options) {} // 当必选参数只有两个时
export function myMethod3(options) {} // 当必选参数有两个以上时
export function myMethod4(options) {} // 当所有参数都是可选时
// 有时为了提高灵活性，参数类型可以是两重，一重是期望值，另一重是返回期望值的函数 (可带参)
export function myMethod5(a) {
a = typeof a === 'function' ? a() : a
}
扩展/包装第三方开源组件或内部公共库组件
IDE 统一使用 VSCode，并统一使用相关插件及配置
js 变量声明尽量使用 const
js 变量或对象属性使用驼峰命名法
js 私有变量或对象私有属性使用 _ 前缀 (注意: vue 组件属性不要使用 _ 前缀)
// 表明该变量仅在 createId 方法中使用 (与 createId 方法紧挨着)
let _count = 0
const createId = () => `${Date.now()}_${++_count}`
// 适时使用立即执行函数可以简洁作用域及保护私有变量
const createId = (() => {
let count = 0
return () => `${Date.now()}_${++count}`
})()
导入模块时不要省略后缀（js 除外），利于 IDE 感知
当导入父层及以上目录中的模块时，建议使用'@'别名
// js
import XxxXxx from '@/components/XxxXxx.vue'
<!-- template -->
<img src="@/assets/logo.png" />
/* style */
@import '~@/styles/vars.less';
.xxx {
background: url('~@/assets/logo.png');
}
严格遵守 ESLint 语法校验，警告级别的也要处理 (暂时用不到的代码可以先注释掉)
css
文档头部注释
脚本文件、样式文件
/**
* 说明
* @author 作者
*/
vue 文件
<!-- 说明 -->
<!-- @author 作者 -->
js 注释 (使用 JSDoc 注释标准，还能帮助 IDE 智能感知)
注释格式
/**
* 大的区块、文档头部、JSDoc
*/
/* 一般的区块 */
// 小的区块、行
/**
* 说明
* @author 作者
* @param {类型} a
* @param {Object} options
* @param {类型} options.x
* @param {类型} options.y
* @param {类型} [options.z] 可选参数
*/
export function myMethod(a, options) {}
/**
* 类型参考：https://www.tslang.cn/docs/handbook/basic-types.html
*
* 基本
* @param {boolean}
* @param {number}
* @param {string}
* @param {1|2|3}
* @param {'a'|'b'|'c'}
*
* 数组
* @param {Array}
* @param {Array<string>}
*
* 函数
* @param {Function}
* @param {(data)=>void}
* @param {(data:Array)=>void|boolean}
*
* 对象
* @param {Object}
* @param {any}
*
* 联合
* @param {number|string}
* @param {boolean|(()=>boolean)}
*/
待完成的功能
/* TODO 说明 */
css 注释
全局样式一定要写注释
/* 说明 */
.g-class1 {
}
/* 说明 */
.g-class2 {
}
vue template
适当使用注释与空行
<!-- 说明 -->
<div>block1</div>
<!-- 说明 -->
<div>block2</div>
|-- .env.development ------------ dev 环境变量
|-- .env.development.local ------ dev 本地环境变量 (被 git 忽略，需手动新建，用来重写部分环境变量)
|-- .env.production-stage ------- stage 环境变量
|-- .env.production ------------- prod 环境变量
|-- .env.test
|-- static-server.js ------------ 静态资源服务 (node 运行)，通常用于预览/检查打包结果
|-- README.html ----------------- 由 README.md 手动生成 (使用 VSCode 插件 Markdown Preview Enhanced)
|-- .vscode --------------------- 统一 VSCode 配置
|-- public
| |-- favicon.ico
| |-- index.html
| |-- libs -------------------- 不支持模块化加载的 ES5 类库 (只能通过全局变量引用)
|-- src
|-- main.js
|-- App.vue
|-- libs -------------------- 支持模块化加载但是无法通过 npm 安装的 ES5 类库
|-- assets
|-- styles
| |-- global.less
| |-- reset.less
| |-- vars.less ----------- less 全局变量
| |-- xxx.less
|-- scripts
| |-- utils --------------- 通用方法
| |-- constants ----------- 常量 (多使用 Object.freeze)
| |-- xxx.js
| |-- http ---------------- axios 实例
| |-- index.js
| |-- http.js
| |-- createAxios.js
| |-- xxx.js
|-- injects ----------------- vue 全局注册 (慎用)
| |-- index.js
| |-- $xxx.js
| |-- v-xxx.js
| |-- mixin_xxx.js
| |-- xxx.js
|-- element-ui
| |-- index.js
| |-- rewrite ------------- 主题样式复写
| |-- index.less
| |-- xxx.less
|-- vant
| |-- index.js
| |-- vars.less ----------- 内置变量复写
| |-- rewrite ------------- 主题样式复写
| |-- index.less
| |-- xxx.less
|-- router
| |-- index.js
| |-- routes.js
| |-- registerInterceptor.js
|-- store
| |-- index.js
| |-- root.js
| |-- xxx.js
|-- api
| |-- xxx.js
| |-- mock ---------------- 模拟数据
| |-- index.js
| |-- createMock.js
| |-- xxx.js
|-- components
| |-- BaseXxx.vue --------- 非业务通用组件
| |-- TheXxx.vue ---------- 单例组件
| |-- ExXxx.vue ----------- 扩展/包装第三方开源组件或内部公共库组件
| |-- XxxXxx.vue
| |-- ComponentExamples --- 非单例公共组件需要在这里写示例
| | |-- index.vue
| | |-- XxxXxx.vue
| |-- SvgIcon ------------- svg-sprite 图标组件
| | |-- index.vue
| | |-- icons
| |-- directives ---------- 可复用的自定义指令（局部注册）
| | |-- xxx.js
| |-- mixins -------------- 可复用的混入（局部注册）
| |-- xxx.js
|-- views
|-- Xxx.vue
|-- Xxx ----------------- 除了 api 和 vuex，其它的专属模块要内聚在同一目录下
|-- index.vue
|-- Xxx.vue --------- 子路由组件
|-- xxx.js
|-- xxx.module.less
|-- components ------ 存放私有组件
跨域处理
history 模式路由处理
客户端缓存处理 (配置响应头)
静态资源
不缓存 /index.html
Cache-Control: no-store
强缓存 /static-hash/**/*
Cache-Control: public,max-age=31536000
协商缓存 (默认)
Cache-Control: no-cache
Etag: xxx
Last-Modified: xxx
XHR (解决 IE 缓存问题)
Cache-Control: no-cache
gzip 压缩
静态资源：启用 gzip 压缩 (除了像素型图片)
XHR：发给客户端的响应数据超过指定阀值时应启用 gzip 压缩
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。