想要学习nuxt.js，首先要弄清楚客户端渲染和服务端渲染这两个概念。
一、客户端渲染 VS 服务端渲染
1. 客户端渲染
简单理解就是，在服务端放一个html 页面，客户端发起请求时，服务端把页面（响应的是字符串）发送过去。客户端从上到下依次解析，如果发现ajax请求就再发送新请求，拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。如图：
客户端渲染.png
但是，这种渲染方式存在的弊端也日益显露出来，比如首屏渲染慢，不利于seo等问题。想对应的，服务端渲染恰好弥补了这些不足。
2. 服务端渲染：
也称SSR，即server side render的缩写。在服务端渲染出完整的首屏dom结构，直接发送到浏览器；前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行。整个过程只向服务端发起一次请求。如图：
image.png
服务端渲染有两大优点：
一是更利于SEO。因为爬虫只会爬取源码，不会执行脚本。使用了MVVM框架之后，页面的大多数DOM元素是在客户端根据js动态生成的，可供爬虫抓取分析的内容很少。而且浏览器爬虫不会等数据加载完成之后再去抓取。服务端渲染返回的是已经获取了异步数据并执行JavaScript脚本的最终HTML，爬虫就可以抓取完整的页面信息。
二是更利于首屏渲染。对服务端渲染而言，首屏渲染是node发送过来的html字符串，不依赖于js文件，这样用户就能更快地看到页面内容。尤其是大型单页应用，资源请求量大，造成首屏渲染加载缓慢，使用服务端渲染就可以在很大程度上解决首页的白屏等待问题。
Nuxt.js作为Vue.js的通用框架，就常被用来作SSR。
二、nuxt.js
nuxt是一个专注于ui渲染的应用框架，可以快速搭建项目，还提供了服务端渲染的功能。
1. 安装
直接用vue-cli安装
vue init nuxt-community/starter-template <project-name>
2. nuxt推荐的项目结构
assets——资源文件
components——组件
layouts——布局，默认default。所有页面都会加载在布局页面中的<nuxt />标签中。如果要在普通页面中使用下级路由，则要在页面中添加<nuxt-child />
middleware——中间件：每个页面加载前调用，在页面中调用的方法是middleware: 'middlewareName'。
node_modules——依赖包
nuxt.config.js——个性化配置
package.json——
pages——页面。根页面是index.vue，二级页面只要添加文件夹。动态路由页面的名称格式是：_变量.vue
plugins——插件
static——静态文件（不需要webpack打包的）。
store——状态管理
yarn.lock
3. 生命周期
Nuxt在vue的基础上对生命周期做了扩展：
export defualt {
middleware(){ }, // 服务端
validate(){ }, // 服务端
asyncData(){ }, // 服务端
fetch(){ }, // store数据加载
beforeCreate(){ }, // 服务端和客户端都会执行
created(){ }, // 服务端和客户端都会执行
beforeMount(){ }, //
mounted(){ } // 客户端
}
4. asyncData(context)
如果需要服务端渲染，首次渲染时一定要使用这个方法。它可以在渲染组件前异步获取数据。asyncData传入context参数，可以获取一些信息，如：
export default {
asyncData(ctx){
ctx.app // 根实例
ctx.route // 路由实例
ctx.params // 路由参数
ctx.query // 路由问号后的参数
ctx.error // 错误处理方法
}
}
使用这个方法时要注意，如果由于服务器或api错误导致无法渲染，就要做好容错机制，可以使用context.error方法。我们可以这样做：
async asyncData(ctx){
try {
throw new Error()
} catch {
ctx.error( {statusCode: 500, message: '服务器开小差了~'} ) // 这里的statusCode参数必须是http状态码
}
}
此时，错误页可以通过/layout/error.vue自定义。
注意：该方法在服务端执行，返回的数据与data()返回的数据合并。该方法在组件初始化前被调用，所以不能通过this引用实例对象。
5. head()
用于更新头部信息title/descripe等，可以通过this获取组件数据。
6. middleware()
在特定页面实战中间件使用axios请求数据：
（1）nuxt项目默认安装axios，所以只要安装proxy即可
npm install @nuxtjs/proxy
（2）在nuxt.config.js中加上：
export default {
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: {
'./api': {
target: 'http://www.xxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
（3）页面中使用
import axios from 'axios'
export default {
data () {
return {
page: 0
}
},
async asyncData () {
let data = await axios.get('http://localhost:3000/api/admin/list')
return {
page: data.data.page
}
},
}
采用 import axios from 'axios' 方式引入axios时，接口参数前须加baseURL。
5. 使用scss
（1）安装sass
npm i node-sass sass-loader scss-loader --save-dev
（2）如果要全局使用某个scss文件，要借助sass-resources-loader，还需要在nuxt.config.js的build配置中调整导出的loader配置：
export default {
build: {
extend(config, { isDev, isClient }){
const sassResourcesLoader = {
loader: 'sass-resources-loader',
options: {
resources: [
// 填写需要全局注入scss的文件
'assets/styles/mixins.scss'
]
}
}
// 修改 scss sass 引用的 loader。
config.module.rules.forEach((rule) => {
if (rule.test.toString() === '/\\.vue$/') {
rule.options.loaders.sass.push(sassResourcesLoader)
rule.options.loaders.scss.push(sassResourcesLoader)
}
if (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1) {
rule.use.push(sassResourcesLoader)
}
})
}
}
}
6. nuxt和vue的区别
（1）路由
nuxt按照 pages 文件夹的目录结构自动生成路由
vue需在 src/router/index.js 手动配置路由
（2）入口页面
nuxt页面入口为 layouts/default.vue
vue页面入口为 src/App.vue
（3）webpack配置
nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置。
vue关于webpack的配置存放在build文件夹下。
7. 编译过程
（1）加载nuxt.config.js；
（2）初始化nuxt，builder，开始执行构建；
（3）准备模板使用的参数，然后根据模板生成真正的webpack编译的js；
（4）分别执行客户端编译和服务端编译，生成最终的js脚本；
（5）编译成功后，就需要启动服务，监听端口，这个是在npm run start中实现的。
关于nuxt.js先写这些了，更多内容还是要去看官网文档哦~
关注微信公众号【CC前端手记】一起学更多前端小知识吧~
网友评论