Vue.js--相關開源項目介紹

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章