2019-03-05

2019-03-05 本文已影响0人程序员清欢

一、技术栈(包含Ui组件库)

PC端

Vue + ElementUi + ES6 + VueRouter + VueX + Axios + less

Vue快速构建项目
  # 全局安装 vue-cli
  $ npm install -g vue-cli
  # 创建一个基于 "webpack" 模板的新项目
  $ vue init webpack my-project
  # 安装依赖
  $ cd my-project
  $ npm install
  $ npm run dev

桌面软件

Vue + Electron + ES6 + VueRouter + VueX + Axios + less + Inno(编译成安装包)

快速构建Electron-vue项目
  # Install vue-cli and scaffold boilerplate
  npm install -g vue-cli
  vue init simulatedgreg/electron-vue my-project

  # Install dependencies and run your app
  cd my-project
  yarn # or npm install
  yarn run dev # or npm run dev

Eslint

ESLint是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
在我们使用vue-cli脚手架创建项目时，选择ESLint代码检测工具，可统一代码规范，提高代码整洁度。

如果你想使 ESLint 适用于你所有的项目，全局安装 ESLint。你可以使用 npm：

$ npm install -g eslint

紧接着你应该设置一个配置文件：

$ eslint --init

之后，你可以在任何文件或目录运行 ESLint：

$ eslint yourfile.js

使用全局安装的 ESLint 时，你使用的任何插件或可分享的配置也都必须在全局安装。

二、调试工具

Chrome
跨域浏览器，主要解决日常开发中，调用后端API跨域问题，后端代码不修改的情况下，浏览器可跨域调用API。

兼容浏览器

Firefox
360安全浏览器
搜狗浏览器
IE浏览器

三、代码

1. HTML

Class 与 ID
  class 应以功能或内容命名，不以表现形式命名；
  class 单词字母小写，多个单词组成时，采用中划线-分隔；
  ID使用驼峰式，首单词首字母小写，后面的首字母大写；
  使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
  属性的定义，统一使用双引号。
  
  <!-- 不正确 -->
  <div class='j-hook left contentWrapper'></div>

  <!-- 正确 -->
  <div id="jHook" class="sidebar content-wrapper"></div>

HEAD

文档类型，<!DOCTYPE html>
语言属性
```

<html lang="en">
```
IE 兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO优化

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!-- SEO -->
  <title>Style Guide</title>
  <meta name="keywords" content="your keywords">
  <meta name="description" content="your description">
  <meta name="author" content="author,email address">
</head>

viewport
- viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
- width: 浏览器宽度，输出设备中的页面可见区域宽度；
- device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
- initial-scale: 初始缩放比例；
- maximum-scale: 最大缩放比例；
```
  <meta name="viewport" content="width=device-width, initial-scale=1.0"
```
favicon <link rel="shortcut icon" href="path/to/favicon.ico">
语义化

语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。

     <body>
         <main>
             <header></header>
             <aside></aside>
             <section></section>
             <footer></footer>
         </main>
     </body>

2. CSS

浏览器样式重置

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   width: 100%;
   font-size: 14px;
   font-family: 'Microsoft YaHei';
}
a, a:hover {
   text-decoration: none;
}
ul {
   list-style: none;
}
/*手势*/
.pointer {
   cursor: pointer;
}
/*对齐方式*/
.text-center {
   text-align: center;
}
/*清除浮动*/
.clear::after {
   content: '';
   display: block;
   width: 0;
   height: 0;
   clear: both;
}
.fl {
   float: left;
}
.fr {
   float: right;
}
/*定位*/
.pos-re {
   position: relative;
}
.pos-ab {
   position: absolute;
}
.pos-fix {
   position: fixed;
}
.font-14 {
   font-size: 14px;
}
.col-fff {
   color: #fff;
}

声明顺序
相关属性应为一组，推荐的样式编写顺序

Positioning
Box model
Typographic
Visual

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}

链接的样式顺序：
a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
字体库统一使用

阿里巴巴矢量库或Font Awesome

3. Less

代码组织

@import
变量声明
样式声明

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
  .container {
      width: 100%;
  }
}

@import语句

@import 语句引用的文需要写在一对引号内，.less 后缀不得省略。引号使用 ' 和 " 均可，但在同一项目内需统一。
```
/* 不正确 */
@import "mixins/size";
@import 'mixins/grid.less';

/* 正确 */
@import "mixins/size.less";
@import "mixins/grid.less";
```

4. JavaScript

命名

变量, 使用 Camel(驼峰式) 命名法。var loadingModules = {};

私有属性、变量和方法以下划线 _ 开头。 var _privateMethod = {};

常量, 使用全部字母大写，单词间下划线分隔的命名方式。var HTML_ENTITY = {};

函数, 使用 Camel 命名法。函数的参数, 使用 Camel 命名法。
```
function stringFormat(source) {}

function hear(theBells) {}
```
类, 使用 Pascal 命名法, 类的方法 / 属性, 使用 Camel 命名法
```
function TextNode(value, engine) {
  this.value = value;
  this.engine = engine;
}

TextNode.prototype.clone = function () {
  return this;
};
```
由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
```
function XMLParser() {}

function insertHTML(element, html) {}

var httpRequest = new HTTPRequest();
```

OOP面向对象编程

function People (name, age) {
  this.name = name;
  this.age = age;
}
People.prototype = {
  sayName: function () {
    return this.name;
  }
}
var people = new People('小明', 20);
people.sayName();

5. 注释

HTML

模块注释

<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>

区块注释

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->

CSS

/* ==========================================================================
组件块
============================================================================ */

/* 子组件块
============================================================================ */
.selector {
    padding: 15px;
    margin-bottom: 15px;
}

/* 子组件块
============================================================================ */
.selector-secondary {
    display: block; /* 注释*/
}

.selector-three {
    display: span;
}

JavaScript

/**
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，比较长
*     那就换行了.
* @param {number=} p3 参数3的说明（可选）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

文件

/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2015 Meizu Inc. All Rights Reserved.
*/