apec-fe-up-load-component

|`npm run <script>`|解释| |------------------|-----------| |`serve`|服务启动在8088端口| |`build`|编译程序到dist目录下（默认目录~/dist）。| |`test`|开启Karma测试并生成覆盖率报告。| |`lint`|Lints and fixes files|

Usage no npm install needed!

<script type="module">
  import apecFeUpLoadComponent from 'https://cdn.skypack.dev/apec-fe-up-load-component';
</script>

README

蜂网

npm run <script> 解释
serve 服务启动在8088端口
build 编译程序到dist目录下（默认目录~/dist）。
test 开启Karma测试并生成覆盖率报告。
lint Lints and fixes files

二、目录结构

这个项目的结构使用的是 fractal(不规则碎片形：适合大型项目)*，方法的分组主要是依照特性而不是文件类型。注意，这个目录结构只是一个指引，并不一定要按这个来。这种结构谐在让程序更容易扩展，想了解更多请点击这里。

.
├── public                   # 静态资源 （不经过webpack,只会被简单的复制）
│   └── index.html           # 项目页面模板
├──────────────────────────────────────────────────────────────────────────
├── src                      # 程序源文件
│   ├── main.js              # 程序启动和渲染入口文件
│   ├── components           # 全局可复用的组件(最好是 Presentational Components)
│   ├── views                # 主页结构 （页面）
│   │
│   ├── assert               # 静态文件 （会被打包处理）
│   ├── styles               # 全局通用样式
│   ├── https                 # 网络请求
│   ├── config               # 全局通用配置项
│   ├── utils                # 全局通用工具库
│   │
│   ├── store
│   │   ├── index.js         # 我们组装模块并导出 store 的地方, 可能还有根级别的代码
│   │   ├── modules          # 使用模块将单一状态树进行分割
│   └── routes               # 主路由和异步分割点
│       ├── index.js         # 路由入口
│       └── routes           # 路由定义
├── tests                    # 单元测试
└── vue.config               # 项目配置文件：所有打包配置项以及webpack配置

静态资源

  1. 使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖。 例如，在 <img src="./logo.png">和 background: url(./logo.png)以及CSS@import,"./logo.png" 是相对的资源路径, <img src="../image.png"> 会被编译成 createElement('img', { attrs: { src: require('../image.png') }})

  2. public文件的内容并不会被 webpack 处理：它们会直接被复制到最终的打包目录下。必须使用绝对路径引用这些文件。 参考： https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

三、打包优化

四、代码规范

协同规范

  1. 除了组件使用 PascalCase 命名， 其他使用 camelCase 命名
  2. 不要使用自创的英文，缩写请使用大家都懂的缩写，如desc,fnc,num,conf等。如果不确定请使用全称
  3. 提交代码时，必须清理所有的eslint报错，以及程序运行错误
  4. 提交代码的时候请认真看好每个文件的difference
  5. 拉取代码的时候也请看清楚每个文件的difference

代码组织

  1. 当我们这写原型，写demo的时候，将多个功能，多个模块的代码放在一个地方是合理的，但是一旦你的应用增长，你应该考虑将这些code放到合适的模块中去，只有这种方式你的应用才能扩展。

  2. 组件（页面）必须以文件夹的形式出现 例子： 在src/components/文件中，存放一个GoTop组件，我们期望这样的代码组织形式 入口文件： src/components/GoTop/index.js 主文件： src/components/GoTop/GoTop.vue 常量配置： src/components/GoTop/constant.js 图片： src/components/GoTop/image/*.png 其中，入口文件和主文件为必须

  3. 文件中的index.js表示它是这个文件夹的入口文件，这是来自Node社区的命名共识。index文件是一个模块的公共入口。它描述了一个模块的公共API。外部模块只允许通过index.js文件导入模块中的共享代码。 在这个模块结构中，一个组件被 .Vue组件声明,常量配置，图片资源共同定义

  4. 不要把你没有用的代码复制粘贴进项目。如果有，请不要提交，谢谢

  5. 代码只有两种形式，src目录下的源码，node_Modules下的插件库。对于src目录内的源码，无论是手写，还是复制粘贴得来的。对于该项目内的其他成员来说，都是硬编码。所以即使是复制粘贴而来的代码，也要一行一行看清，清理干净不需要的。对于node_Modules内的插件，请区分"dependencies"与"devDependencies"。

组件规范

  1. 非Element组件，必须采用PascalCase命名
  2. 组件必须使用为Props定义，且禁止使用数组定义
  3. 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
  4. 完整单词的组件名
  5. 组件选项按顺序写
  6. 每个组件必须有 name 选项
  7. 单个文件除去注释不要超过 250行

五、Setting 组件配置模块的约定

  1. 组件配置模块命名为 Modal${componentName}

  2. 统一引入 src/views/modalMixin.js 组件配置组件有强约束，必须先认真看modalMixin.js的内容

六、代码部署

测试:

sh deploy.sh development (发布到开发环境)

域名：

服务器：

目录：

七、git操作相关

多人合作流程： 先commit,再pull,再push

  1. commit 是为了告诉git,我这次提交了哪些东西，不然你只是改了，但是git不知道你改了，也就无从判断比较。
  2. pull 是为了本地 commit 和 远程 commit的对比记录，git是按照文件的行数操作进行对比的，如果同时操作了某文件的一行，那么就会产生冲突，git也会把这个冲突给标记出来，这个时候就需要先把你和冲突的那个人（本人）拉过来问问保留谁的代码，然后在 git add && git commit && git pull这三连，再次pull一次是为了防止再你们协商的时候另外一个人又给提交了一版东西，如果真发生了，那流程重复一遍，通常没有冲突的时候直接就给你合并了，不会把你的代码覆盖掉
  3. 出现代码覆盖或者丢失的情况，比如A B两人的代码 pull 时候的版本都是1，A在本地提交2,3并且推送到远程了，B 进行修改的时候没有 commit 操作，它先自己写了东西，然后git pull 这个时候 B本地版本已经到了3了，B在本地版本3的时候改了 A 写过的代码，再进行 git commit && git push那么在远程版本中就是4，而且A 的代码被覆盖了，所以说所有人都要commit 再 pull, 不然真的会覆盖代码的