前言

安装准备

nuxt.js是基于vue的一套可实现SSR服务端渲染的前端框架，所以要使用nuxt.js，前提是需要会vue，因为nuxt.js开发规则和vue相同，只是在vue的基础上扩展了一些功能。

建议node版本:node8.12.0

建vue版本:vue2.5.17

建议npm版本:npm6.14.4

建议webpack版本:webpack4.19.1

建议nuxt版本:wnuxt2.0.0

注意事项

安装前先输入 npx -v

如果提示报错输入 $npm config set cache "D:\Program Files\nodejs\node_cache"--global和yarn add create-nuxt-app@latest即可解决

Nuxt.js项目搭建

为了快速创建项目，Nuxt.js团队创建了脚手架工具 create-nuxt-app安装前请确保安装了npx（npx在NPM版本5.2.0默认安装了），详细查询官网教程。注意:安装前请确保已经安装npx，检验方式输入命令npx -version

1.创建项目

$ npx create-nuxt-app <项目名>

注意: 如果安装提示:安装 [ 'create-nuxt-app@latest' ] 失败，错误代码：1,执行下面命令重新安装后继续执行创建命令

$ npm install create-nuxt-app@latest
或
$ yarn add create-nuxt-app@latest

2.创建视图描述

输入项目名称：Project name
项目描述：Project description
作者名称：Author name
包管理工具:Choose the package manager Yarn
UI框架:UI framework我们这里选择的是Yarn和Ant Design Vue
服务框架：server framework，选择服务端框架），可以根据你的业务情况选择一个服务端框架，常见的就是Express、Koa，默认是None，即Nuxt默认服务器，我这里选了Koa。 (选择默认的Nuxt服务器，不会生成server文件夹，所有服务端渲染的操作都是Nuxt帮你完成，无需关心服务端的细节，开发体验更接近Vue项目，缺点是无法做一些服务端定制化的操作。选择其他的服务端框架，比如Koa，会生成server文件夹，帮你搭建一个基本的Node服务端环境，可以在里面做一些node端的操作。
NUXT模块:Nuxt.js modules,（选择nuxt.js的模块）我们根据自己的需求选择，可以选axios和PWA,如果选了axios，则会帮你在nuxt实例下注axios，让你可以在.vue文件中直接axios发起请求。
校验工具:linting tools,常规我们选择ESLint，
测试框架:test framework,我们选择Jest，
渲染模式：rendering mode，我们选择Universal (SSR)，
部署工具:development tools，我们选择jsconfig.json (Recommended for VS Code)

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in nuxt-demo
? Project name nuxt-demo
? Project description My great Nuxt.js project
? Author name John OakMan
? Choose the package manager Yarn
? Choose UI framework Ant Design Vue
? Choose custom server framework Koa
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code), Semantic Pull Requests
yarn run v1.15.2
warning ..\package.json: No license field
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
Done in 2.56s.

�  Successfully created project nuxt-demo

  To get started:

        cd nuxt-demo
        yarn dev

  To build & start for production:

        cd nuxt-demo
        yarn build
        yarn start

  To test:

        cd nuxt-demo
        yarn test

3.使用 starter 模板

这里关于项目初始化，我是直接使用的 Nuxt 官网提供的 starter 模板

1.安装vue-cli脚手架

$ npm install vue-cli -g
OR
$ yarn global add vue-cli

2.首先创建项目存放位置，即项目名称

$ mkdir nuxt-ssr-template

3.初始化项目

$ cd nuxt-ssr-template
$ vue init nuxt/starter
OR
$ vue init nuxt-community/starter-template nuxt-ssr-template

4.安装依赖包

$ npm install

5.启动服务

npm run dev

6.在浏览器输入localhost:3000，即可看到界面效果

4.项目目录

nuxt-demo
│  .babelrc
│  .editorconfig
│  .env
│  .eslintrc.js
│  .gitignore
│  .prettierrc
│  jest.config.js
│  jsconfig.json
│  nuxt.config.js                 nuxt 相关配置
│  package.json                   依赖相关
│  README.md                      项目介绍
│  yarn.lock
│
├─.github
│      semantic.yml
│
├─.nuxt
│  │  App.js
│  │  axios.js
│  │  client.js
│  │  empty.js
│  │  index.js
│  │  loading.html
│  │  middleware.js
│  │  nuxt-icons.js
│  │  router.js
│  │  router.scrollBehavior.js
│  │  server.js
│  │  utils.js
│  │  workbox.js
│  │
│  ├─components
│  │      nuxt-child.js
│  │      nuxt-error.vue
│  │      nuxt-link.client.js
│  │      nuxt-link.server.js
│  │      nuxt-loading.vue
│  │      nuxt.js
│  │
│  └─views
│          app.template.html
│          error.html
│
├─assets                     css，图片等资源都在这
│      README.md
│
├─components                 组件相关
│      Logo.vue
│      README.md
│
├─layouts                    路由布局
│      default.vue
│      README.md
│
├─middleware                 中间件
│      README.md
│
├─node_modules
├─pages                      路由页面
│      index.vue
│      README.md
│
├─plugins                    插件
│      antd-ui.js
│      README.md
│
├─server                  
│      index.js
│
├─static
│      favicon.ico
│      icon.png
│      README.md
│      sw.js
│
├─store                    vuex 相关
│      README.md
│
└─test                     测试
        Logo.spec.js

5.目录说明

注意:Nuxt下面没有路由配置,Nuxt 会帮你将 pages 下面的文件自动解析成路由

.nuxt： Nuxt自动生成，临时的用于编辑的文件，build
assets：公共资源目录（.js .css .jpg）用于组织未编译的静态资源入LESS、SASS 或 JavaScript
components：公共组件目录，用于自己编写的Vue组件
layouts：页面入口目录（default.vue 类似vue里的App.vue），用于组织应用的布局组件，不可更改。
locales：国际化语言包文件目录
middleware：中间件目录，用于存放中间件
pages：页面级目录，用于存放写的页面，我们主要的工作区域
plugins：公共插件目录，用于存放JavaScript插件的地方
static：静态资源目录，用于存放静态资源文件，比如图片
store：vuex目录，用于组织应用的Vuex 状态管理。
.editorconfig：开发工具格式配置
.eslintrc.js：ESlint 代码检测工具配置文件，用于检查代码格式
.gitignore：git上传规则配置文件，配置git不上传的文件
nuxt.config.js：nuxt 规则配置文件，用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
package.json：npm 依赖包配置文件，npm包管理配置文件

修改配置项

修改配置文件、新增页面必须重启服务

1.配置IP和端口号,修改项目根目录package.json文件（如下图）

{
  "name": "xunzhaotech",
  "version": "1.0.0",
  "description": "My funkadelic Nuxt.js project",
  "author": "xunzhaotech",
  "private": true,
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "80"
    }
  },
  "scripts": {
   ……
  },
  "dependencies": {
   ……
  },
  "devDependencies": {
   ……
  }
}

2.配置全局CSS

插件集成

1.引入 axios

安装依赖

$ npm i axios -S
OR
$ yarn add axios -S

打包命令

打开package.json文件,查看scripts下的启动指令

命令	描述
nuxt	启动一个热加载的 Web 服务器（开发模式） localhost:3000
nuxt build	利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）
nuxt start	以生成模式启动一个 Web 服务器 (nuxt build 会先被执行)
nuxt generate	编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)

项目部署

1.静态化页面部署

Nuxt.js 可依据路由配置将应用静态化，使得我们可以将应用部署至任何一个静态站点主机服务商。官网提供部署静态化页面需要用到的命令是 nuxt generate ，执行的时候会在根目录下面生成 dist 目录，里面的文件都是静态化页面需要的打包好的文件。所有静态化后的资源文件均在其中。

**注意：**使用 nuxt generate 静态化应用的时候, 传给 asyncData() 和 fetch() 方法的上下文对象不会包含 req 和 res 两个属性。

注意: 这里需要特别注意的一点是，如果你的项目中存在 axios 请求的话，需要在本地开启一个本地服务, 不然打包的时候执行到 axios 请求的时候会报错(因为前面我们通过使用 node 的 process 对运行环境进行了是跳转还有请求的判定，而打包进行请求的时候是不依赖 node 环境的)

2. 单页面应用程序部署 (SPA)

对于 SPA 部署，您必须执行以下操作：

将nuxt.config.js中的mode更改为spa。
运行 npm run build.
自动生成dist

3.服务器端渲染部署

开始前，请确保你的服务器上已经搭建好了 node 环境。没有的同学，我建议使用 nvm 安装 node 。

我们使用node来部署的话服务器会经常断掉连接，那我们的服务也就断了。所以为了守护好我们的 nodejs 进程，这里我将使用 pm2 对进程进行守护
首先全局安装 pm2
服务端docker容器部署前端工程
部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：

nuxt build
nuxt start

推荐的 package.json 配置如下：

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

注意: 建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

点击下方关注我👇👇👇

Nuxt.js从出师到挂帅[第2期] 脚手架搭建

前言