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>

Vue.js--相关开源项目介绍

猜你喜欢