vue 开发规范

约定不等于承诺〃 2022-03-16 16:37 320阅读 0赞

From: [https://blog.csdn.net/qq\_36263601/article/details/79854742][https_blog.csdn.net_qq_36263601_article_details_79854742]

Vue组件化开发

单文件系统，样式局部作用域  
基本组成结构：<template/> <script/> <style scoped/>  
组件注册方式：1）公共组件全局注册 2）其余组件局部注册

组件命名规范

Vue官方文档给予以下说明：

当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。  
PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。

命名可遵循以下规则：  
1. 有意义的名词、简短、具有可读性  
2. 以小写开头，采用短横线分割命名  
3. 公共组件命名以公司名称简拼为命名空间(app-xx.vue)  
4. 文件夹命名主要以功能模块代表命名

同时还需要注意：必须符合自定义元素规范: 使用连字符分隔单词，切勿使用保留字。app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。

vue文件基本结构

<template>  
<div>  
  
</div>  
</template>  
<script>  
export default \{  
components : \{  
\},  
data () \{  
return \{  
\}  
\},  
methods: \{  
\},  
mounted() \{

\}  
\}  
</script>  
  
<style lang="less" scoped>  
</style>

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24

vue 方法放置顺序

components  
props  
data  
created  
mounted  
activited  
update  
beforeRouteUpdate  
metods  
filter  
computed  
watch

注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。

以下情况，务必添加注释  
1. 公共组件使用说明  
2. 各组件中重要函数或者类说明  
3. 复杂的业务逻辑处理说明  
4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述  
5. 注释块必须以/\*\*（至少两个星号）开头\*\*/；  
\- 组件使用说明，和调用说明  
JavaScript

6. 单行注释使用//；  
\- 普通方法一般使用单行注释// 来说明该方法主要作用  
编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照ESLint格式要求编写代码  
1. 使用ES6风格编码源码  
\- 定义变量使用let ,定义常量使用const  
\- 使用export ，import 模块化  
2. 组件 props 原子化  
\- 提供默认值  
\- 使用 type 属性校验类型  
\- 使用 props 之前先检查该 prop 是否存在  
3. 避免 this.parent4.谨慎使用this.

refs  
5. 无需将 this 赋值给 component 变量  
6. 调试信息console.log() debugger 使用完及时删除  
method 自定义方法命名

动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）

ajax 方法以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）

事件方法以 on 开头（onTypeChange、onUsernameInput）

init、refresh 单词除外

尽量使用常用单词开头（set、get、open、close、jump）

驼峰命名（good: getListData）（bad: get\_list\_data、getlistData）

data props 方法注意点

使用 data 里的变量时请先在 data 里面初始化

props 指定类型，也就是 type

props 改变父组件数据 基础类型用 $emit ，复杂类型直接改

ajax 请求数据用上 isLoading、isError 变量

不命名多余数据，现在是详情页、你的数据是 ajax 请求的，那就直接声明一个对象叫 d，而不是每个字段都声明

表单数据包裹一层 form

生命周期方法注意点

不在 mounted、created 之类的方法写逻辑，取 ajax 数据，可以在 mounted 写一个 getData 方法，去取接口数据，那样这个接口可以复用  
在 created 里面监听 Bus 事件

vue 开发 – axios  
axios 挂载

改写原型链

由于axios 并不能 use()引入，只能每个需要发送请求的组件中即时引入，所以在 main.js 中引入 axios

import axios from 'axios'  
Vue.prototype.$ajax = axios

1  
2

添加了这两行代码之后，就能直接在组件的 methods 中使用 $ajax 命令

methods: \{  
submitForm () \{  
this.$ajax(\{  
method: 'post',  
url: '/user',  
data: \{  
name: 'wise',  
info: 'wrong'  
\}  
\})  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11

axios 封装

在main.js 中加入

Vue.prototype.$api = api;  
Vue.prototype.$get = get;  
Vue.prototype.$post = post;

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21

在 .vue 页面可以直接使用 this.get(url,params).then()和this.

post(url,params).then()  
不需要再加 catch,如果需要特殊参数的请求 可以直接调用 this.axios.get();  
使用 this.axios 时必须加上 catch  
vue 开发 – vuex

ajax 判断

首先 ajax 请求可以写在 actions也可以直接写在 .vue 页面里;  
我们判断的依据是 回调是否需要调用页面结构来区分,  
比如在 .vue 页面中 发送完请求后需要调用 this.$refs.element等,或者需要利用组件的独立性的效果时 的那就写在.vue页面,否则就写在 actions 里

ajax 调用

因为异步的原因,不能将 get,post挂载到 vuex 上面,  
所以新增 fetch.js 页面:  
import axios from 'axios'  
import api from './index.js'//api页面  
const get = (url,params)=>\{  
return new Promise((resolve, reject) => \{  
axios.get(url, \{params:params\})  
.then(function (response) \{  
resolve(response.data);  
\}).catch(err=>\{\})  
\})  
\};  
const post = (url,params)=>\{  
return new Promise((resolve, reject) => \{  
axios.post(url, params)  
.then(function (response) \{  
resolve(response.data)  
\}).catch(err=>\{\})  
\})  
\};  
export \{api,get,post\};

在 vuex 页面中引入:import \{api,get\} from '@/api/fetch.js'  
即可发起请求:  
getUser(\{commit\})\{  
get(api.info).then(data=>\{  
commit('changeUser',data)  
\})  
\}

如有特殊需要可以新引入 axios 或者在 fetch 上在进行特殊的添加

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31

3 模块

按类型分类,将响应模块的state,mutations,actions等分别写在对应文件中,登录,注册,修改密码等写在index 中  
4. api管理  
\- 新建src/api/index.js  
\- 当路径较多时可以再多建几个文件,分类放置  
\- 挂载  
\- 在 main.js 里 import api from ‘./api/index’  
\- 使用 Vue.prototype.$api = api 挂载到原型链上  
\- 在 Vuex 里引入有 fetch页面了,这个页面已经将 api 引入了

即使已经在 main.js 中引入了 axios，并改写了原型链，也无法在vuex 的 store.js 中直接使用 ajax命令换言之，这两种方案是相互独立的在组件中发送请求的时候，需要使用this.

store.dispatch 来分发  
vuex 的dispatch和commit提交mutation的区别

一个异步操作与同步操作的区别。  
当操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的 dispatch去完成了。  
其他使用commit即可。  
commit=>mutations,用来触发同步操作的方法。  
dispatch =>actions,用来触发异步操作的方法。

[https_blog.csdn.net_qq_36263601_article_details_79854742]: https://blog.csdn.net/qq_36263601/article/details/79854742