Nuxt学习

Nuxt.js 概述

nuxt 就是一个极简的 vue 版的 ssr 框架。基于它，我们可以快速开发一个基于 vue 的 ssr 单页面应用。

• vue2 (基于vue2)
• vue Router (自身整合了vue-router)
• Vuex(整合状态管理)
• Vue Server Renderer （用于ssr）
• vue-meta （meta）

使用vue-cli安装模板

前提是vue-cli已安装完毕

• vue init nuxt-community/koa-template 项目名称
  这是github上 nuxt+koa 的模板
• vue init nuxt-community/starter-template 项目名称
  这是官网上的推荐模板，快速练习使用

我们使用第一种模板：

- vue init nuxt-community/koa-template <project-name>

如果觉得安装下载太慢，可以使用cnpm淘宝镜像。在我的另一篇博文中有讲解

在我第一次使用的时候，正巧赶上版本更迭，导致报错：

我们需要把backpack-core、eslint、eslint-loader均升到最高级即可。

首先执行卸载：

- npm un backpack-core eslint eslint-loader

卸载完毕后执行安装：

- npm i backpack-core@0.8.3 eslint@3.19.0 eslint-loader@2.1.1

开始启动：

启动完毕：

再来说一下其他可能出错的点：
1.如果看到：

则需要执行二次安装，以防止后续工程出现问题。

-  npm install --update-binary

此命令目的是用node再次重新编译，预防后续使用出错，完成再次安装之后，部分版本还会出现这个警告情况。

2.如果提示ajv-keywords这个包需要安装一下同级关系的ajv@xxx，这里提示那个版本就安装哪个版本npm install ajv@x.x.x

3.打开某个vue文件，出现eslint的报错

更新eslint-plugn-html版本，再重启项目即可。

- npm install eslint-plugn-html@^3