Nuxt项目初始化全过程

利用 SSR（也叫做 “universal" or "isomorphic” 模式），Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端，而不是纯 javascript。与传统的 Vue SPA 相比，使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。
因为由开发者独立实现 SSR 将会非常繁琐，Nuxt.js 对此提供了开箱即用的全面支持，并帮你规避常见的陷阱。
vue服务端渲染(ssr)与普通vue的区别,ssr的基本使用

一、初始化nuxtjs项目

Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置.

1.下载安装Nuxt脚手架

npx create-nuxt-app 项目名
注意：在NPM版本5.2.0默认安装了npx，在命令行窗口输入npm --version可查看当前版本号

2.百问百答环节

这是你的项目名?

选择什么语言?

用什么包管理器?

组件库选择

额外功能

代码检查器

测试框架

服务端渲染

目标服务器

开发工具

用什么来管理你的项目

3.启动

当运行完时，项目将安装所有依赖项，因此下一步是启动项目:

cd xianyun
npm run dev

问你要不要进行匿名调查,可以选N

下载成功会出现网址

打开后显示,如果出现 404,可以用 127 替换尝试, http://127.0.0.1:3000/
注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

二、项目文件结构

官方文档:https://zh.nuxtjs.org/guide/directory-structure
assets:资源目录,用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
components:组件目录
layouts:布局目录,用于组织应用的布局组件
middleware :用于存放应用的中间件
pages:页面目录,用于组织应用的路由及视图,Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置
plugins:插件目录
static:静态文件目录
Store :用于组织应用的 Vuex 状态树 文件
nuxt.config.js:用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置
package.json:用于描述应用的依赖关系和对外暴露的脚本接口

三、基本配置

1.修改/删除默认文件

Nuxtjs初始化项目时给我们提供了两个演示文件，对我们接下来的项目开发没任何作用，分别是pages/index.vue和components/logo.vue。

1.1修改pages/index.vue

<template>
  <div class="container">
    <div>
      <h1 class="title">首页</h1>
    </div>
  </div>
</template>

<script>
export default {};
</script>
.<style lang="less" scoped>
</style>

1.2删除components/logo.vue文件

现在打开http://localhost:3000/就只会显示首页两个字了

2.创建页面目录

Nuxtjs的页面访问规则和浏览器的SPA机制不同，在Nuxtjs中不需要路由配置，pages下的页面可以直接通过路径访问，默认查找index.vue
示例:

2.1效果

现在正常写入内容
示例:输入网址http://localhost:3000/＋文件名即可访问

3.创建组件目录

4.如果创建目录时漏掉了 axios 没有选择

检查package.json文件发现没有@nuxtjs/axios的话可以自行安装
下载: npm i @nuxtjs/axios
再到nuxt,config,js补上:

// Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    //https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  //Axios modele configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

5.下载添加less

npm install --save less less-loader
相关配置nuxtjs已经帮我们配置好了，不需要改动webpack的配置文件，只需要安装依赖包即可

Nuxt和普通的Vue

1. Nuxt是同构程序，这里的同构指的是一套代码，可以在浏览器运行，也可以在服务器（Nodejs）运行，也就是说可以同时使用浏览器的API和Nodejs的API。
2. 普通的Vue页面只能使用浏览器的API，即使在Nodejs环境下开发也只是使用Webpack来编译打包。
3. Nuxt是前后端框架的集合，前端采用Vue，后端可选框架有Express、koa2, egg, api等，所以可以理解为Vue是一个页面模板的存在，类似于art-template , ejs
4. Nuxt支持单页和多页应用。