一、技术栈(包含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> - 语言属性
<!-- English --> <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） -
字体库统一使用
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. */
网友评论