一、简介

  团队合作中规范文档是必须的,在多人合作的项目只有定义好一定的编码规范才会使得开发井井有序,代码一目了然,下边将谈一下个人对vue使用规范的一些看法。

二、规范案例

1.组件命名

  组件文件名应该始终以单词大写开头(PascalCase),组件名也是以单词大写开头,当多个单词拼写成的组件时,单词开头大写,采用驼峰式命名规则。一般是多个单词全拼,减少简写的情况,这样增加可读性。组件应该都放到components文件夹下,单个页面独立一个文件夹,用来放相对应的vue文件以及页面相关的样式文件,样式少可直接写到页面组件里边,这样更符合组件化的思想。文件夹名称应统一格式,小写开头,统一以page结尾,比如homePage,loginPage,listPage这样子的命名。公用组件应该统一放到public文件下,下边是例子:

  公共的样式文件应该抽取放到统一的文件去统一管理。

2.基础组件命名

  2.1当项目中需要自定义比较多的基础组件的时候,比如一些button,input,icon,建议以一个统一的单词Base开头,或者放到base文件夹统一管理,这样做的目的是为了方便查找。例如:

  2.2页面级组件应该放到相对应页面文件夹下,比如一些组件只有这个页面用到,其他地方没有用到的,可以直接放到页面文件夹,然后以父组件开发命名,例如:

  2.3项目级组件一般放到公共文件夹public下给所有的页面使用。

3.组件结构

  组件结构一个遵循从上往下是template,script,style的结构

<template>
<div></div>
</template> <script>
</script> <style>
</style>

4.组件样式

  单个组件样式一般可直接写到组件下style标签下,为了防止样式污染,可添加scoped 属性,也可以通过设置作用域来防止样式污染,写样式的时候尽量少写元素选择器,为了提高代码查找速度,可以用类选择器。

<template>
<div class="homePage">
<div class="list"></div>
<div class="banner"></div>
</div>
</template> <script>
</script> <style lang="scss" scoped>
.homePage{
.list{ }
.banner{ }
}
</style>

5.多属性编写格式

  当组件定义很多的props值时,应该每个特性属性一行。

<SelectExportItem
v-bind="$attrs"
:selectItemList="selectItemList"
@hideSelectItem="$emit('hideSelectItem')"
@exportReport="exportReport"
></SelectExportItem>

6.props定义

  当定义组件时,应该对传入组件的props进行严格的定义,至少指定类型,设定默认值,定义好规范方便他人使用。

props:{
modelflag:{
type:Number,
default:0
}
}

7.位v-for 增加键值Key,这样加快查找速度。

<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>

8.当页面用到一些共享的状态的时,建议使用vuex

9.vue推荐使用axios进行接口请求,然后对项目中做统一的接口拦截处理,封装适合项目使用的get,post 方法。

import Vue from 'vue'
import axios from 'axios'
import { encode, decode,toEncode,toDecode} from './base64.js'
import Qs from 'qs';
import router from './router' let timeout = 30000;
var instance = axios.create({
//baseURL: 'https://some-domain.com/api/',
timeout: timeout,
responseType: 'json', // default,
//headers: {'apikey': 'foobar'},
transformRequest: function(data, headers) {
// 为了避免qs格式化时对内层对象的格式化先把内层的对象转为
// 由于使用的form-data传数据所以要格式化
if(!(data instanceof FormData)) {
if (typeof data === "string") {
headers.post['Content-Type'] = "application/json";
} else {
headers.post['Content-Type'] = "application/x-www-form-urlencoded";
for(let key in data) {
if(data[key] === undefined) {
data[key] = null;
}
}
data = Qs.stringify(data);
}
}
return data;
}
}); instance.interceptors.request.use(function(config) {
// Do something before request is sent //header 添加Request-Token //配置请求头tocken //配置get请求 return config;
}, function(error) {
// Do something with request error return Promise.reject(error);
})
// Add a response interceptor
instance.interceptors.response.use(function(response) {
// Do something with response data if (response.data.status===400001) { //access tocken过期30天
vm.$router.push({path:'/login'})
}
return response;
}, function(error) {
// Do something with response error return Promise.reject(error);
}); export default instance;

10.后续继续完善。。。

  

vue开发规范的更多相关文章

  1. vue 开发规范

    本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了 ...

  2. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  3. Vetur:VSCode下强大的Vue开发工具

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优 ...

  4. Vue开发入门看这篇文章就够了

    摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了 作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...

  5. VUEJS开发规范

    VUEJS开发规范 基于组件化开发理解 组件命名规范 结构化规范 注释规范 编码规范 基于组件化开发理解 什么是组件? ``` 组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘.键盘.鼠 ...

  6. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  7. Java后端开发规范

    基于阿里巴巴JAVA开发规范整理 一.命名风格 [强制]类名使用 UpperCamelCase 风格,必须遵从驼峰形式,但以下情形例外:DO / BO / DTO / VO / AO 正例:Marco ...

  8. vue eslint 规范配置

    vue eslint 规范配置 为了代码格式统一,避免一些低级或者不合理的错误,现强行使用eslint的 standard规范 项目配置 目前都是使用 vue 提供的脚手架进行开发的,虽然 vue-c ...

  9. 转:Laravel 项目开发规范

    文件介绍很好 值得细细看看 https://www.jianshu.com/p/e464a35e5ed2 https://learnku.com/docs/laravel-specification/ ...

随机推荐

  1. RatingBar android:isIndicator="true"

    有时候我们用RatingBar只须要显示不让它选择或改变,解决办法是设置属性 android:isIndicator="true" isIndicator的意思是:是否是指示器,如 ...

  2. openstack 虚拟机导出

  3. hibernate基础简单入门1---helloword

    1:目录结果 2:实体类(student.java) package com.www.entity; public class Student { private int id; private St ...

  4. [Swift通天遁地]三、手势与图表-(10)创建包含圆点、方形、三角形图标的散点图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. [Swift通天遁地]九、拔剑吧-(4)使用开源类库创建可滑动的Segment分段控件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. 判断人员js

    var allchooseEmpID = "";var allchooseEmpName = "";//自选经办人 function getJbrWinForM ...

  7. JavaScript正则表达式(一)-常用方法

    公司之前有个胖女孩说你竟然会正则? 其实正则没那么难:今天我们说说他常用的几个API. 在讲方法之前, 我们先对正则表达式做一个基本的了解: 1.正则表达式定义使用单个字符串来描述.匹配一系列符合某个 ...

  8. curl 采集的时候遇到301怎么办

    采集的时候遇到301,采集数据有错误 $ch = curl_init($url);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);curl_setopt( ...

  9. Jquery EasyUI环境下设置下拉框选中指定选项

    前提: 要求点击某个按钮就将所有的下拉框都设置为选中第一个选项,因此,指定索引是最好的做法 尝试过的做法: html代码如下(easyui 的写法) <select class="ea ...

  10. Ajax——异步基础知识(二)

    XML数据格式 首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 最外层需要一个根节点进 ...