Web前端开发规范
1.文件书写规范
1.1 基本要求
1) 页面标签的属性和值用双引号引起来
2) 所有页面编码均采用utf-8
1.2 书写规范
1)文档类型声明及编码：统一为html5声明<!DOCTYPE html>；编码统一为<meta charset=“utf-8”>
2)避免页面里面用<style></style>这种方式引入样式。外链的样式统一写在<head></head>里面。非特殊的js文件。统一放在页面底部。
3)引入的js库文件
压缩版格式：jquery-1.8.2.min.js
非压缩：jquery-1.8.2.js
4)class或者id命名规则： class=“right_nav”。
Js文件名称用驼峰规则。如：leftMenu.js。
5）对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。每个选 择器和属性声明总是使用新的一行。
/* 单行 */ .span1{width:60px;} .span2{width:140px;}
/* 多行 */ .sprite {
display:inline-block;
width:16px;
height:15px;
background-image:url(../img/sprite.png); }
6）一般情况下一个页面ID不应该被多次应用于样式，使用ID唯一有效的是确定网页或整个站点中的位置。
7）使用4个空格，而不使用tab或者混用空格+tab作为缩进。
8）js禁止全局定义变量。
2.命名规范
1）页面结构
容器: container 页头：header 内容：content/container
页面主体：main 页尾：footer 导航：nav 侧栏：sidebar
栏目：column 页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav 主导航：mainbav 子导航：subnav
顶导航：topnav 边导航：sidebar 左导航：leftsidebar
右导航：rightsidebar 菜单：menu 子菜单：submenu
标题: title 摘要: summary
(3)功能
标志：logo 广告：banner 登陆：login 登录条：loginbar
注册：regsiter 搜索：search 功能区：shop 标题：title
加入：joinus 状态：status 按钮：btn 滚动：scroll
标签页：tab 文章列表：list 提示信息：msg 当前的: current
小技巧：tips 图标: icon 注释：note 指南：guild
服务：service 热点：hot 新闻：news 下载：download
投票：vote 合作伙伴：partner 友情链接：link 版权：copyright
3、vue规范
（1）实例定义规范
export default{
data(){
return {
//实例参数定义（在组件中需要用时间return 参数的方法定义 *object类型只能监听和渲染自身的子元素）
}
}，
methods:{
todosomething(){
//实例事件定义（注：在实例事件的子事件中调用实例参数需要注意参数的this指向）
}
}，
computed:{
computedData(){
//计算属性定义（注：每个function必须要有返回值）
}
},
created(){
//dom及el准备初始化时调用事件
}，
mounted(){
//dom及el准备完成后调用事件（推荐使用）
}
}
（2）vue 文件引入规范
<script>
import 定义名称 from 路径 （注在使用webpack打包时需要使用相对路径）
</script>
<style>
@import 文件名称（注：引用路径需要使用相对路径）
</style>
（3）vue-router 配置规范
vue-router 异步加载方式
const App = r => require.ensure([], () => r(require('./App.vue')), 'app') //采用异步调用的方式进行调用
4.webpack配置文件规范
（1）根据路由配置的异步加载将出口配置进行改写
output: {
path: path.resolve(__dirname, './dist'), //配置压缩路径
publicPath: '/dist/', //配置压缩根路径
filename: '[name].js', //配置压缩文件名称
chunkFilename: '[name].js?[hash]' //配置异步加载名称及hash值
}
（2）将html文件进行配置（为了更好的配置webpack全自动化，将index.html动态渲染到压缩文件中）
引入html-webpack-plugin npm install html-webpack-plugin --save-dev webpack.config.js:const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ //配置插件
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
（3）将css或者scss进行单独打包以获得更好的优化效果
引入extract-text-webpack-plugin npm install extract-text-webpack-plugin --save-dev webpack.config.js :const ExtractTextPlugin=require('extract-text-webpack-plugin');
{
test: /\.css$/, //编写css/scss打包规则
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
plugins: [
new ExtractTextPlugin("styles.css"), //配置插件-出口文件配置
]
1、 基本原则
1.1、结构、样式、行为分离
1.2、统一四个空格缩进（缩进统一即可）,不要使用 Tab 或 Tab、空格混搭
1.3、代码注释统一写在要注释代码的右部(若很长一段代码需要注释可前后加一对注释：/*xxx start*/与/*xxx end*/，短代码使用单行注释 // 注释内容，放在行内)
1.4、命名规范：使用语义化变量方式进行变量定义，子变量定义时采用 父命名_子语义进行定义变量
2、 HTML(.vue)
2.1、 HTML 属性应该按照特定的顺序出现以保证易读性。由于使用vue框架，同一将vue指令放在HTML属性的后面,如id,class,name,vue-指令及事件触发。
2.2、class 与 id 单词字母小写，多个单词组成时，采用下划线_分隔
2.3、class 应以功能或内容命名，不以表现形式命名
2.4、属性的定义，统一使用双引号
3、 CSS
3.1、使用scss编译
3.2、代码组织，以组件为单位组织代码段
3.3、制定一致的注释规范 如：
/*------------------------组块-----------------------------*/
/*----------------------子组块一------------------------*/
代码
/*----------------------子组块二------------------------*/
代码
4、 平台主要技术
4.1、使用Axios ^0.15.3做数据请求渲染
4.2、使用elment-ui ^1.0.5框架搭建SPA页面
4.3、使用VUE ^2.1.0框架构建SPA应用平台
4.4、使用webpack ^2.1.0-beta.25 构建工具
