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

前言

这次改造的主要目标：

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

技术准备

基础

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 是一个免费的开源分布式版本控制系统，旨在快速，高效地处理从小型到大型项目的所有事务。

进阶

拓展

Eslint Githook Yargs

为什么选择pug

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

为什么选择stylus

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

// 外部变量
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;
}

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

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

为什么选择 CSS Modules

CSS Scoped

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

CSS Modules

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>
<style module>
.red {
  color: red;
}
</style>

转换结果

<template>
  <p class="_1VyoJ-uZOjlOxP7jWUy19_0">
    This should be red
  </p>
</template>
<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
    // an identifier generated based on filename and className.
  }
}
</script>
<style module>
._1VyoJ-uZOjlOxP7jWUy19_0 {
  color: red;
}
</style>

使用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

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