4.组件样式
单个组件样式一般可直接写到组件下style标签下，为了防止样式污染，可添加scoped 属性，也可以通过设置作用域来防止样式污染，写样式的时候尽量少写元素选择器，为了提高代码查找速度，可以用类选择器。
5.多属性编写格式
当组件定义很多的props值时，应该每个特性属性一行。
v-bind="$attrs"
:selectItemList="selectItemList"
@hideSelectItem="$emit('hideSelectItem')"
@exportReport="exportReport"
>
6.props定义
当定义组件时，应该对传入组件的props进行严格的定义，至少指定类型，设定默认值，定义好规范方便他人使用。
props:{
modelflag:{
type:Number,
default:0
}
}
7.位v-for 增加键值Key，这样加快查找速度。
- v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
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;
全栈交流，欢迎大家
分享到:
閱讀更多 前端嫣然呀呀呀 的文章
