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;
全棧交流，歡迎大家
分享到:
閱讀更多 前端嫣然呀呀呀 的文章
