开发规范的目的
- 提高团队开发效率
- 有利于项目的后期维护
- 使开发更加标准化
- 使开发更加流程化
前端使用的技术栈
- vue（2.0+）
- vue-router
- vueX
- axios
- es6
- webpack(4.0+)
- less
- elementUI(按需加载的方式)
- vue-cli(2.0+)
- 运用vuecli2.0+搭建的项目(webpack 3.0+)
规范前首先要参考vue的风格指南
链接描述es6参考阮一峰ES6
链接描述
项目结构（基于脚手架）
├── build// 项目构建(webpack)相关代码
│ ├── build.js// 生产环境构建代码
│ ├── check-versions.js// 检查node、npm等版本
│ ├── utils.js// 构建工具相关
│ ├── vue-loader.conf.js// webpack loader配置
│ ├── webpack.base.conf.js// webpack基础配置
│ ├── webpack.dev.conf.js// webpack开发环境配置,构建开发本地服务器
│ └── webpack.prod.conf.js// webpack生产环境配置
├── config// 项目开发环境配置
│ ├── dev.env.js// 开发环境变量
│ ├── index.js// 项目一些配置变量
│ └── prod.env.js/ 生产环境变量
├── dist//项目打包后的文件
├── node_modules//依赖
├── src// 源码目录
│ ├── assets//资源目录
│ │ │── img//图片目录
│ │ │── js//js目录
│ │ │── font//字体和字体图标目录
│ │ └── css//css目录
│ ├── less//less目录
│ │ │── reset.less//重置css样式
│ │ │── public.less//定义一些公关的颜色、字体大小等变量，方便以后统一改风格
│ │ └── commonElement.less//重置elementUI样式
│ ├── components//组件目录
│ │ │── public//公共组件
│ │ └── Module//单个页面，或者单独模块的组件
│ ├── page//页面目录
│ │ └── Module//单个页面
│ ├── request
│ │ └── api.js//ajax请求全局封装位置(统一用axios)
│ ├── config//配置页面
│ │ └── config.js//ajax请求路径以及环境的配置（统一管理）
│ ├── router//路由文件
│ │ └── index.js//路由管理
│ ├── store//vueX目录(如果使用vuex)
│ │ │── state.js//状态管理
│ │ │── mutation.js//更改 Vuex 的 store 中的状态的唯一方法
│ │ │── action.js//Action 提交的是 mutation，而不是直接变更状态（异步操作）
│ │ └── module//也可以根据页面或者组件分模块
│ ├── util//工具函数文件
│ │ └── util.js//工具函数
│ ├── APP.vue // 页面入口文件
│ └── main.js // 程序入口文件，加载各种公共组件
├── static// 静态文件
├── .babelrc// ES6语法编译配置
├── .editorconfig// 定义代码格式
├── .postcsssrc// postcss配置文件
├── index.html// 入口页面
├── package.json// 项目基本信息,包依赖信息等
├── README.md// 项目说明github模板地址：
https://github.com/suidagang/…
引入less
引入
npm install less less-loader --D
//引入注意（@前面加~）
@import "~@/less/variable.less";基于组件化开发
- 组件化开发的好处
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
使其高内聚，低耦合，达到分治与复用的目的。- vue组件化开发规范
单文件系统，样式局部作用域
基本组成结构：<template/> <script/> <style scoped/>- 组件命名规范
1、有意义的名词、简短、具有可读性
2、以小写开头，采用驼峰式命名(camelCase)
3、公共组件命名(publicXX.vue)
4、文件夹命名主要以功能模块代表命名。 - vue文件基本结构
<template>
<div>
<!--必须在div中编写页面-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
mounted() {
}
methods: {
test () {
}
},
}
</script>
<!--声明语言，并且添加scoped-->
<style lang="less" scoped>
</style>- vue文件方法声明顺序（可按个人实际情况而定）
- components
- props
- data
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods
- filter
- computed
- watch- 组件引入规范
如果在build/webpack.base.config.js中设置
resolve: {
extensions: ['*', '.js', '.json', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '../src'),
}
};
设置了@后，引用方式统一为：
import NowTime from "@/components/public/nowTime.vue"
<NowTime></NowTime>
代码注释规范
代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。以下情况，务必添加注释。 1.公共组件使用说明
2.各组件中重要函数或者类说明
3.复杂的业务逻辑处理说明
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
5.注释块必须以/**（至少两个星号）开头**/
6.单行注释使用//- 单行注释
普通方法一般使用单行注释// 来说明该方法主要作用- 多行注释
组件使用说明，和调用说明
<!--公用组件：数据表格
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param {Object} - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
* <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
*/
-->编码规范
- 使用ES6风格编码源码
定义变量使用let ,定义常量使用const
使用export ，import 模块化- 组件 props传值
Prop 验证
命名应该始终使用驼峰命名 (camelCase)
props: {
// 多个可能的类型
propB: {
type:[String, Number],
required:true
},
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}- 调试信息
console.log() debugger 使用完及时删除- 指令缩写
指令缩写
用 : 表示 v-bind:
用 @ 表示 v-on:
用 # 表示 v-slot: - Css要求
1）vue以局部css来写<style lang="less" scoped></style>只作用于当前vue文件。
2）公共使用的css要单独放在一个文件夹里（less.css）。将 this 赋值给 component 变量 (统一使用es6)
在 Vue.js 组件上下文中，this指向了组件实例。因此当你切换到了不同的上下文时，要确保 this 指向一个可用的 component 变量。
换句话说，如果你正在使用 ES6 的话，就不要再编写 var self = this; 这样的代码了，您可以安全地使用 Vue 组件。
- 使用 ES6，就不再需要将 this 保存到一个变量中了。
- 一般来说，当你使用箭头函数时，会保留 this 的作用域。（箭头函数没有它自己的 this 值，箭头函数内的 this 值继承自外围作用域）
- 如果你没有使用 ES6，当然也就不会使用 箭头函数 啦，那你必须将 “this” 保存到到某个变量中。这是唯一的例外。强烈建议（方便以后代码整理风格）
- 推荐使用vs code进行前端编码，规定Tab大小为4个空格
- vs code配置
{
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
"svn.enableProposedApi": "product",
"editor.fontFamily": "Comic Sans MS",
"editor.fontSize": 22,
"workbench.iconTheme": "vscode-icons",
"vetur.format.defaultFormatter.html": "prettier",
"git.ignoreMissingGitWarning": true,
"files.autoSave": "onFocusChange",
"vetur.validation.template": false,
"git.path": "C:/software/git/Git/cmd/git.exe",
"gitlens.advanced.messages": {
"suppressShowKeyBindingsNotice": true,
"suppressWelcomeNotice": true
},
"git.enableSmartCommit": true,
"gitlens.keymap": "alternate",
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontFamily": "Consolas, 'Courier New', monospace",
"window.zoomLevel": -1,
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"editor.accessibilitySupport": "off",
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
}
}- vs code 插件
- Auto Close Tag
- Auto Rename Tag
- Beautify
- Chinese (Simplified) Language Pack for Visual Studio Code
- Live Server
- open in browser
- Path Intellisense
- SVN
- TortoiseSVN
- Vetur
- vscode-icons
- Vue 2 Snippets
- Vue Peek
- VueHelper
- wpy-beautify
