前言
这次改造的主要目标：
- 解决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后的变化：
- 面向组件写样式，不会影响其他样式
- 不会被全局样式污染
相关文献：
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
让我们尽情的享受业务和技术碰撞而迸发出的灿烂烟火吧！！
网友评论