新版前端工程开发指南[未完待续]

前言

这次改造的主要目标：

1. 解决CSS样式在项目中大量重复引入的问题
2. 解决对功能样式引用不明确的问题
3. 全局样式污染问题
4. 解决代码过大，组价化程度过低的问题
5. 解决编码过程中，格式化代码问题
6. 解决eslint检查没有通过代码就上传到代码仓库
7. 文件代码分离向关注点分离过渡
8. 优化整体代码风格

---

技术准备

基础

• ES6 http://es6.ruanyifeng.com/
• Vue.js https://cn.vuejs.org/v2/guide/
• Vue-router https://router.vuejs.org/zh/
• Vuex https://vuex.vuejs.org/zh/
• Element-ui http://element-cn.eleme.io/#/zh-CN/component/quickstart

基础+

• Pug 是一款健壮、灵活、功能丰富的模板引擎,专门为 Node.js 平台开发。Pug 是由 Jade 改名而来。
• Stylus 是一个CSS预处理框架
• CSS Modules 是一个用于模块化和组合 CSS 的流行系统。
• Git 是一个免费的开源分布式版本控制系统，旨在快速，高效地处理从小型到大型项目的所有事务。

进阶

• vue-loader
• vue-cli v3
• Webpack v4.x
• Babel.js v7.x
• Node.js v10.x

拓展

Eslint Githook Yargs

---

为什么选择pug

1. 无需结束标签
   在html中，几乎每个标签都需要写相应的结束标签，这既耗费时间和精力又使代码更加冗长，而且万一忘了写结束标签会导致不可预期又难以定位的错误。相比之下，pug没有结束标签，代码更加简洁高效。
2. 强制缩进
   强制缩进有人喜欢有人不喜欢，但是它带来的好处却是无可置疑的：它使得团队中所有人的风格都统一了起来，使得阅读别人的代码不再那么恐怖，让所有人都养成了缩进代码的好习惯，也减少了因为代码格式化产生的冲突等问题。

为什么选择stylus

1. 语法简洁干净
   语法和 Sass 有一点点类似，但是最大的特点便是没有分号，没有冒号，没有大括号，通过缩进和换行。
2. 编程式的变量调用
   一切的定义方式都是按照编程的风格定义的，像编程一样的函数调用，像编程一样的变量定义，像编程一样的书写方式。

// 外部变量
font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font, sans-serif

//编译前
.onemorepaddedbox
  padding-left 20px
  padding-right 30px
  width 1200px - @padding-left - @padding-right
//编译后
.onemorepaddedbox {
  padding-left: 20px;
  padding-right: 30px;
  width: 1150px;
}

3. 语法容易上手
   官方推荐的是无分号，无冒号，无大括号，但是他可以有分号，可以有冒号，也可以有大括号，也就是说你愿意的话，你完全可以当做普通的 CSS 文件来写，甚至是 Less,Sass 等其他预处理器的风格。

相关文献
[译]为什么使用Stylus

为什么选择 CSS Modules

CSS Scoped

转换结果

CSS Modules

转换结果

使用CSS Modules后的变化：

• 面向组件写样式，不会影响其他样式
• 不会被全局样式污染

相关文献：
vue-loader CSS Modules介绍
关于CSS Modules的一些介绍和实现

---

开始

• 下载并安装nodejs
• 安装yarn 命令： npm install -g yarn
• 下载并安装 git
• 拉工程 命令： git clone {项目地址}
• 命令：cd {项目文件夹}
• 命令：yarn
• 命令：yarn dev

PS:实际使用中，还需要切换到开发分支。

---

项目结构介绍

---

编码规范

使用了微调后的 JavaScript Standard Style

• 无须配置 史上最便捷的统一代码风格的方式，轻松拥有。
• 自动代码格式化 只需运行 standard --fix 从此和脏乱差的代码说再见。
• 提前发现风格及程序问题 减少代码审查过程中反反复复的修改过程，节约时间。

---

插件支持

提高开发效率，关注于业务本身。
stylus-assist 辅助开发编码
Typinator 辅助输入

---

格式化代码的相关配置

把script加入 'Do not indent children of' 的配置项中

Function deflaration parentheses 选项不要勾上

---

PS

让我们尽情的享受业务和技术碰撞而迸发出的灿烂烟火吧！！