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>