nuxt 入门

1. 服务端渲染

nuxt是一个服务端渲染的框架，在了解它之前，有必要去了解下什么是服务端渲染，什么时候要用到服务端渲染。

服务端渲染也被称为ssr(Server Side Render)，不同于客户端渲染，服务端渲染会将完整页面的DOM节结构转成String吐出来，然后到客户端（浏览器）解析渲染。

那么服务端渲染的优势有哪些？

SEO

现在单页应用使用率比较高，体验好比如目前React，Vue，Angular等前端框架，但是单页应用服务端首次发送到前端只是一个页面的框架，里面是没有具体内容的，里面的内容都是客户端通过js去生成，导致搜索引擎爬不到页面关键词等信息。以下是使用SSR和未使用ssr在浏览器检查网页源代码的表现。

没有ssr：

使用ssr：

首屏直出

首屏直出指的是在用户首次访问页面不需要等待很长时间，首屏就可以看到页面所有内容。

2. 什么是nuxt

以下是引用官方的语言：

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

nuxt集成了vue、vue-router、vuex（当配置了vuex状态树才会引入）、vue-meta

流程图：

3. 项目初始化

方法一：使用vue-cli初始化项目(如果未安装，请先使用npm install -g vue-cli)

$ vue init nuxt-community/starter-template <project-name>

其他项目初始化模板

方法二：使用nuxt提供的cli工具

// npm 
$ npx nuxt-create-app <project-name>

// yarn
$ yarn create create-app <project-name>

接着进入该项目，安装相应的依赖包

npm install

最后启动项目

npm run dev

4. 项目的目录结构

项目的目录结构和vue的项目有些类似

• assests

  资源目录，存放css，图片，js

• components

  存放组件的地方

• layouts

  布局目录，应用于布局，默认所有页面都是使用该目录下的default.vue模板，错误页面使用error.vue模板

• middleware

  中间件存放的地方

• pages

  页面存放的地方，该目录下所有.vue文件会自动生成对应的路由配置，如：在该目录下有有个home.vue,则路由就会相对于应生成/home的路由地址

• plugins

  插件存放的地方，比如配置axios，引入mint-ui都可以在这里配置

• static

  静态文件存放的地方，webpack不会进行处理，该目录下文件会映射至根路径/下

• store

  vuex状态存放的地方，默认不使用vuex，如果在该目录建index.js文件则将使用vuex

• nuxt.config.js

  项目的个性化配置，用于覆盖默认的配置

  5. 命令部署

• 命名列表

通常开发加入在package.json中

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }

• 发布部署

发布部署有三种部署应用的方式：服务端渲染部署、静态应用部署、spa部署。

服务端渲染部署操作：

npm run build
npm start

静态应用部署：

npm run generate

它将创建一个dist文件夹，其中所有内容可以部署在静态托管站点

单页应用部署（SPA）：

npm run build -- --spa

或者在nuxt.config.js中添加选项mode: 'spa',然后执行

npm run build

将创建dist文件下的内容部署到服务器就行

• Next Post →