Vue官方文档给予以下说明:
当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。
PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。
命名可遵循以下规则:
1. 有意义的名词、简短、具有可读性
2. 以小写开头,采用短横线分割命名
3. 公共组件命名以公司名称简拼为命名空间(app-xx.vue)
4. 文件夹命名主要以功能模块代表命名
同时还需要注意:必须符合自定义元素规范: 使用连字符分隔单词,切勿使用保留字。app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名,这样可以方便于其它项目里复用。
<template>
<div>
div>
template>
<script>
export default {
components : {
},
data () {
return {
}
},
methods: {
},
mounted() {
}
}
script>
<style lang="less" scoped>
style>
代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。
以下情况,务必添加注释
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 使用完及时删除
动宾短语(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 里的变量时请先在 data 里面初始化
props 指定类型,也就是 type
props 改变父组件数据 基础类型用 $emit ,复杂类型直接改
ajax 请求数据用上 isLoading、isError 变量
不命名多余数据,现在是详情页、你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
表单数据包裹一层 form
由于axios 并不能 use()引入,只能每个需要发送请求的组件中即时引入,所以在 main.js 中引入 axios
import axios from 'axios'
Vue.prototype.$ajax = axios
添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令
methods: {
submitForm () {
this.$ajax({
method: 'post',
url: '/user',
data: {
name: 'wise',
info: 'wrong'
}
})
}
在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;
在 .vue 页面可以直接使用 this. get(url,params).then()和this. post(url,params).then()
不需要再加 catch,如果需要特殊参数的请求 可以直接调用 this.axios.get();
使用 this.axios 时必须加上 catch
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 上在进行特殊的添加
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 来分发