From: 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中编写页面-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
methods: {
},
mounted() {
}
}
</script>
<!--声明语言，并且添加scoped-->
<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
<!--公用组件：数据表格
/**
* 组件名称
* @module 组件存放位置
*@desc 组件描述
*@author 组件作者
*@date 2017年12月05日17:22:43
*@param {Object} [title] - 参数说明
*@param {String} [columns] - 参数说明
*@example 调用示例
<hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
*/
-->
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 中加入
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=>{})
})
};
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,用来触发异步操作的方法。