15.1.1 是否需要服務端渲染
Vue.js2是支持服務端渲染的。查看一個網站是否是SSR,可以通過打開一個含有文章內容的網站查看源代碼,看這些文字是不是在源代碼裏面,如果是就是SSR;或者通過chrome調試工具,在network中看是否有相關的異步請求來調取內容。
很多網站使用SSR主要目的是做搜索引擎優化。是否需要SSR,最主要因素就是看是否需要SEO,換句話說,你的產品是面向大衆用戶的還是面向企業的。如果是面向企業,那可能只有首頁、信息頁和一些營銷頁面需要SEO,與產品分離。第二原因,客戶端的網絡可能不穩定,有的地方很快,有的地方很慢,這種情況下,通過SSR減少請求量和客戶端渲染可以相對快速看到內容。
15.1.2 Nuxt.js
Nuxt.js是一個基於Vue.js的通用框架,爲node.js做Vue的服務端渲染提供了各種配置。使用Nuxt.js,可以快速搭建SSR框架,省去配置工作。與普通Vue.js項目不同,Nuxt.js構建的代碼,UI在服務端渲染的,而非客戶端。通過webpack創建SPA項目,查看源代碼<body>內一般只有一個<div>元素作爲根實例掛載節點,其他都有javascript渲染。而查看Nuxt.js構建後的源代碼,所有模板內容直接渲染在其中。
15.2 HTTP庫axios
Axios是一個基於Promise,同時支持瀏覽器端和node.js的http庫,常用於Ajax請求。
Vue.js不像Jquery或AngularJS,本身沒有Ajax方法,因此需要藉助插件或第三方http庫,而axios是個很不錯的選擇。
Npm install axios –save npm安裝方式
Axios提供了多種請求方式,比如直接發起get或post請求:
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
})
axios.post('/user',{
firstName:'liu',
lastName:'cherry'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
})
基於promise,可以執行多個併發請求:
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//請求都完成時
}));
也可以通過寫入配置形式發起請求:
axios({
method:'post',
url:'/user/12345',
data:{
firstName:'Fred',
lastName:'Flintstone'
}
})
.then(function(res){
console.log(res);
});
15.3 多語言插件vue-i18n
Vue-i18n是一個vue.js插件,提供了多語言解決方案。如果你的項目有多國語言需求,可以使用它快速實現。
Npm install vue-i18n –save 通過npm安裝
然後在webpack入口文件中使用插件:
//main.js
Import Vue from ‘vue’;
Import VueI18n from ‘vue-i18n’;
Vue.use(VueI18n);
const message = {
en;{
message:{
hello:'hello world'
}
},
cn:{
message:{
hello:'你好 世界'
}
}
}
const i18n = new VueI18n({
locale:'en', //設置當前語言
message, //設置語言包
})
new Vue({
el:'#app',
router:router,
i18n:i18n,
render:h=>h(App)
});
<template>
<div class="index">
<p>{{$t("message.hello")}}</p>
</div>
</template>