一、技術(shù)棧(包含Ui組件庫)
PC端
Vue + ElementUi + ES6 + VueRouter + VueX + Axios + less
Vue快速構(gòu)建項目
# 全局安裝 vue-cli
$ npm install -g vue-cli
# 創(chuàng)建一個基于 "webpack" 模板的新項目
$ vue init webpack my-project
# 安裝依賴
$ cd my-project
$ npm install
$ npm run dev
桌面軟件
Vue + Electron + ES6 + VueRouter + VueX + Axios + less + Inno(編譯成安裝包)
快速構(gòu)建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腳手架創(chuàng)建項目時，選擇ESLint代碼檢測工具，可統(tǒng)一代碼規(guī)范，提高代碼整潔度。
如果你想使 ESLint 適用于你所有的項目，全局安裝 ESLint。你可以使用 npm：
$ npm install -g eslint
緊接著你應該設(shè)置一個配置文件：
$ eslint --init
之后，你可以在任何文件或目錄運行 ESLint：
$ eslint yourfile.js
使用全局安裝的 ESLint 時，你使用的任何插件或可分享的配置也都必須在全局安裝。
二、調(diào)試工具
- Chrome
跨域瀏覽器，主要解決日常開發(fā)中，調(diào)用后端API跨域問題，后端代碼不修改的情況下，瀏覽器可跨域調(diào)用API。
兼容瀏覽器
- Firefox
- 360安全瀏覽器
- 搜狗瀏覽器
- IE瀏覽器
三、代碼
1. HTML
Class 與 ID
class 應以功能或內(nèi)容命名，不以表現(xiàn)形式命名；
class 單詞字母小寫，多個單詞組成時，采用中劃線-分隔；
ID使用駝峰式，首單詞首字母小寫，后面的首字母大寫；
使用唯一的 id 作為 Javascript hook, 同時避免創(chuàng)建無樣式信息的 class；
屬性的定義，統(tǒng)一使用雙引號。
<!-- 不正確 -->
<div class='j-hook left contentWrapper'></div>
<!-- 正確 -->
<div id="jHook" class="sidebar content-wrapper"></div>
HEAD
- 文檔類型，
<!DOCTYPE html> - 語言屬性
<!-- English --> <html lang="en"> - IE 兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - SEO優(yōu)化
<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: 一般指的是瀏覽器窗口內(nèi)容區(qū)的大小，不包含工具條、選項卡等內(nèi)容；
- width: 瀏覽器寬度，輸出設(shè)備中的頁面可見區(qū)域?qū)挾龋?/li>
- device-width: 設(shè)備分辨率寬度，輸出設(shè)備的屏幕可見寬度；
- 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 結(jié)構(gòu)，有助于機器（搜索引擎）理解，另一方面多人協(xié)作時，能迅速了解開發(fā)者意圖。
<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;
}
-
聲明順序
相關(guān)屬性應為一組，推薦的樣式編寫順序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）字體庫統(tǒng)一使用
3. Less
-
代碼組織
- @import
- 變量聲明
- 樣式聲明
@import "mixins/size.less"; @default-text-color: #333; .page { width: 960px; margin: 0 auto; .container { width: 100%; } } -
@import語句
@import 語句引用的文需要寫在一對引號內(nèi)，.less 后綴不得省略。引號使用 ' 和 " 均可，但在同一項目內(nèi)需統(tǒng)一。
/* 不正確 */ @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 = {};函數(shù), 使用 Camel 命名法。函數(shù)的參數(shù), 使用 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; };由多個單詞組成的 縮寫詞，在命名中，根據(jù)當前命名法和出現(xiàn)的位置，所有字母的大小寫與首字母的大小寫保持一致。
function XMLParser() {} function insertHTML(element, html) {} var httpRequest = new HTTPRequest();
OOP面向?qū)ο缶幊?/p>
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>- 區(qū)塊注釋
<!-- @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
/** * 函數(shù)描述 * * @param {string} p1 參數(shù)1的說明 * @param {string} p2 參數(shù)2的說明，比較長 * 那就換行了. * @param {number=} p3 參數(shù)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. */
