Nuxt学习笔记

Nuxt.js

官网：https://www.nuxtjs.cn/guide/configuration

一、安装

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。

1-1、运行 create-nuxt-app

为了快速入门，Nuxt.js 团队创建了脚手架工具 create-nuxt-app。

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：

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

或者用 yarn ：

$ yarn create nuxt-app <项目名>

它会让你进行一些选择:

1. 在集成的服务器端框架之间进行选择:

• None (Nuxt 默认服务器)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Fastify
• Adonis (WIP)

1. 选择您喜欢的 UI 框架:

• None (无)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy
• iView
• Tachyons

1. 选择您喜欢的测试框架:

• None (随意添加一个)
• Jest
• AVA

1. 选择你想要的 Nuxt 模式 (Universal or SPA)
2. 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
3. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
4. 添加 Prettier 以在保存时格式化/美化您的代码。

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

$ cd <project-name>
$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

1-2、从头开始新建项目

如果不使用 Nuxt.js 提供的 starter 模板，我们也可以从头开始新建一个 Nuxt.js 应用项目，过程非常简单，只需要 1 个文件和 1 个目录。如下所示：

$ mkdir <项目名>
$ cd <项目名>

提示: 将 <项目名> 替换成为你想创建的实际项目名。

新建 package.json 文件

package.json 文件用来设定如何运行 nuxt：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。

安装 nuxt

一旦 package.json 创建好， 可以通过以下 npm 命令将 nuxt 安装至项目中：

$ npm install --save nuxt

pages 目录

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

创建 pages 目录：

$ mkdir pages

创建我们的第一个页面 pages/index.vue：

<template>
  <h1>Hello world!</h1>
</template>

然后启动项目：

$ npm run dev

现在我们的应用运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

二、目录结构

Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。当然，你也可以根据自己的偏好组织应用代码。

目录

资源目录

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

关于 assets 目录的更多信息

组件目录

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

布局目录

布局目录 layouts 用于组织应用的布局组件。

若无额外配置，该目录不能被重命名。

关于布局的更多信息

中间件目录

middleware 目录用于存放应用的中间件。

关于中间件的更多信息

页面目录

页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

若无额外配置，该目录不能被重命名。

关于页面的更多信息

插件目录

插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

关于插件的更多信息

静态文件目录

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

若无额外配置，该目录不能被重命名。

关于静态文件的更多信息

Store 目录

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

若无额外配置，该目录不能被重命名。

关于 store 的更多信息

nuxt.config.js 文件

nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

若无额外配置，该文件不能被重命名。

关于 nuxt.config.js 的更多信息

package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

该文件不能被重命名。

别名

别名	目录
~ 或 @	srcDir
~~ 或 @@	rootDir

默认情况下，srcDir 和 rootDir 相同。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

三、axios

1、安装

npm install axios

2、封装

创建一个文件夹 ，这里是utils ，创建request.js文件，进行封装

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    // baseURL: "http://127.0.0.1:8888" ,
    baseURL: "http://47.93.38.244:8888" ,

    timeout: 15000
  })
  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    //为请求头对象添加Token验证的Authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token');
    return config;
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}

四、使用

4-1、布局Layout

1、默认布局

如果想拥有统一的页面风格，例如：一致的页头和页尾，可以使用Layout，布局文件的默认的名字是default.vue，放在layouts目录中

注意：新创建的layout重启前端服务器后应用

layouts/default.vue

<template>
  <div>
    <Nuxt />
    <div>default footer</div>
  </div>
</template>

2、自定义布局

也可以自定义Layout：layouts/my.vue

<template>
  <div>
    <Nuxt />
    <div>my footer</div>
  </div>
</template>

在page中使用layout属性指定布局文件：pages/user.vue

<script>
export default {
  layout: 'my',
}
</script>

3、重启服务测试

十、插件

1、幻灯片插件

1、安装插件

npm install vue-awesome-swiper
npm install swiper vue-awesome-swiper --save

可以在package.json中看到swiper及vue-awesome-swiper安装的版本

配置
1、在plugins中新建vue-swiper.js文件，并保存以下内容：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

2、在nuxt.config.js配置文件中添加如下内容：

 css: [
   'swiper/swiper-bundle.css'
 ],
 plugins: [
   '@/plugins/vue-swiper'
 ],