Nuxt2 构建 SSR 商城——初始化项目

亦黑迷失
2,600 阅读5分钟

公司最近要做一个电商项目，为了更好的 seo 老板说要用 Nuxt.js 来做服务端渲染。于是我研究了一礼拜，开始上手实战，做个记录，有不足之处或是任何意见建议，欢迎各位大佬不吝斧正~

关于 ssr 的实现原理，可阅览《webpack + express 实现一个 SSR Vue 应用》

安装 Nuxt

首先是安装项目，老板已经十分贴心的帮我安装好了，我直接去仓库 git clone 下来 npm i 一波完事，如果是从 0 开始，则需 npx create-nuxt-app 项目名称 进行安装，create-nuxt-app 版本为 v3.7.1，安装后 nuxt 的版本为 v2.15.7。

创建过程会有如下选项：

  • ? Project name (frontend-web)：直接回车即选择使用括号内的默认选项 frontend-web
  • ? Programming language ：开发语言，选 JavaScript
  • ? Package manager：第三方包管理工具，选 Npm
  • ? UI framework：UI 库，选 Element（这里安装的 element-ui 版本不会是最新的）
  • ? Nuxt.js modules：交互工具，按空格选 Axios
  • ? Linting tools：代码校验工具，选 eslint 和 prettier，用于语法校验和格式美化
  • ? Testing framework：测试框架，选 None，有需要可后期配置
  • ? Rendering mode：渲染模式，选 Universal (SSR)，同构应用程序（服务器端渲染+客户端导航）
  • ? Development tools：开发工具配置，如果是使用 vscode 开发，按空格选 jsconfig.json (Recommended for VS Code)
  • ? Deployment target：部署目标，选 Server
    Deployment target 是比较新的选项，这里详细介绍下，其有两个选项：
  • Server
    默认模式，使用 nuxt build 构建网站。服务端渲染（SSR）意味着页面在用户请求时在服务器端渲染。并将其所有内容发送回浏览器。
  • Static
    使用 nuxt generate 命令生成网站的静态版本。它将为每个路由生成 HTML，并将其放入 dist/ 目录中。这种模式下在优化 seo 的同时有着更好的离线支持。

image.png

图片来源：stackoverflow.com/questions/6…

下面是选项的截图

image (1).png

目录结构

顺带介绍一下目录结构，选择上述配置安装成功之后生成的项目文件如下图所示：

image (2).png

  • components：组件，不支持服务端的钩子
  • layouts：布局，页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中
  • middleware：存放中间件，这是一般 vue 项目所不具备的，所有的页面运行前可以先运行 middleware 里面的代码
  • pages：希望经过路由跳转的页面
  • plugins：那些需要在根 vue.js 应用实例化之前需要运行的 Javascript 插件，需要配合nuxt.config.js
  • server-middleware：服务器端渲染中间件，在 vue-server-renderer 之前在服务器端运行，可用于服务器特定的任务，如处理 API 请求。
  • static：不需要经过 webpack 的静态文件资源
  • store： Nuxt.js 框架集成了 Vuex 状态树的相关功能配置
  • nuxt.config.js：用于 Nuxt.js 应用的个性化配置，以便覆盖默认配置。更改后需要重新运行项目。
  • 后期可能还需要添加 assets 目录用于放置会经过 webpack 处理的资源文件，如 sass、css、字体和图片等

生命周期

关于这部分内容等用到了这些钩子的时候再配合案例介绍，这里先放个从官方文档拿来的图做些简单的注释，了解 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 <nuxt-link> 切换路由渲染页面）的流程：

2021-07-27_210711.png

配置语法检查及自动修复

使用 eslint +prettier

老板在新建项目的时候，是没有勾选 lint 相关的内容的，他的理念是需要什么自己加，好家伙，那个“自己”还不得是我，于是有了如下的步骤：

1. 安装下相关的开发依赖包（有点多）

npm i @babel/eslint-parser @nuxtjs/eslint-config @nuxtjs/eslint-module eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-nuxt eslint-plugin-vue eslint-loader prettier -D

eslint 用来做语法检查，prettier 用来做自动修复。

2. 新建 .eslintrc.js 文件
注意：如果想忽略某一行的校验可以用 // eslint-disable-next-line

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended', // 采用 nuxt 推荐的规则
    'plugin:prettier/recommended', // 采用 prettier 推荐的规则
    'prettier'
  ],
  // 配置自己的规则
  rules: {
    'comma-dangle': ['error', 'never'], // 禁止末尾逗号
    'no-console': 'off',
    'prettier/prettier': [
      'error',
      {
        semi: false
      }
    ]
  }
}

进行完这一步，或许会立马看到一堆波浪线报错提示，如下图：

image.png
不要慌，进行完之后的配置，这些报错自然会得到解决。

3. 新建 .prettierrc 文件

{
  "semi": false, // 不使用分号
  "singleQuote": true, // 使用单引号
  "printWidth": 80, // 80 个字符换行
  "tabWidth": 2,
  "bracketSpacing": true, // 对象中空格
  "arrowParens": "avoid", // 省略不必要的箭头函数的参数的括号
  "trailingComma": "none" // 禁止末尾逗号
}

4. 在 nuxt.config.js 配置

// 构建需用到的模块
buildModules: [
  '@nuxtjs/eslint-module',
],
build: {
  extend (config, ctx) {
    // 在运行 npm run dev 命令的过程中，动态检查代码中的规范
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce:'pre',
        test: /\.(js|vue)$/,
        loader:'eslint-loader',
        exclude: /(node_modules)/,
        options: {
          fix:true,
        }
      })
    }
  }
}

5. 在 package.json 添加配置

"scripts": {
  "lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
  "lint": "npm run lint:js"
}

注意要加入 --fix 这样遇到大面积的一些格式报错也不用慌，只需要运行 npm run lint 就能自动修复。
6. 在 vs code 设置
可以在 “文件 -> 首选项 -> 设置” 中搜索 'codeActionsOnSave'，然后点击“在 settings.json 中编辑”，添加：

// 关闭 VSCode 在保存时候的自动格式化，因为 VSCode 自带的格式化和 ESlint 规范并不兼容
"editor.formatOnSave": false,
// 代码保存时，自动执行 ESlint 格式化代码
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
}

vs code 还建议安装两个配套插件：ESLint 和 Prettier - Code formatter

提交 git 前检查

采用 pre-commit 进行 git commit 前的检查，如果有 lint 报错则阻止代码提交：

  1. 安装：npm i pre-commit -D
  2. 在 package.json 页面添加
"pre-commit": [
  "lint"
]

至此，项目初始化的内容到此结束，最好重启一下 vs code，现在遇到语法或格式问题会被 eslint 检测报错并提示，然后在保存或运行时会进行自动修复，git 提交前也将进行检查，不会把有被检测出来的问题代码提交到仓库。

感谢.gif
点赞.png

avatar
文章
阅读
粉丝