nuxt 入门学习-CSDN博客

Nuxt介绍

Nuxt.js 是一个基于 Vue.js 的通用应用框架。
预设了利用Vue.js开发服务端渲染的应用所需要的各种配置，同时，也为基于 Vue.js 的应用提供生成对应的静态站点的功能。

nuxt运作

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

Vue 2
Vue-Router
Vuex (当配置了 Vuex 状态树配置项时才会引入)
Vue-Meta

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

Nuxt 特性

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预处理器： SASS、LESS、 Stylus等等
支持HTTP/2 推送

nuxt 实践

我们直接生成一个新的项目看一下，start ~

从图中可见很多选项，包含服务端应用，前端UI框架，axios，语法校验，应用模式等，这个大家根据项目自行选择即可。

安装完毕~我们去看看目录结构吧~

目录十分清晰

跑一下~

校验报错~找到对应页面，control+s手动保存一下就好

OK~我们来看看主要配置

Nuxt 主要配置

layouts

用于页面布局，layouts/default.vue，可用于页面的通用布局，也可以自定义布局，在页面中通过layouts引用即可

<nuxt/>这个就是页面的主体，在这个布局上添加的东西会展示在所有有页面上
例如：我在layout/default.vue页面添加了一行代码，在其他页面上都会展示

<template>
  <div>
    // 自定义了一行
    <p>我是default模板上加的文字</p>
    <nuxt/>
  </div>
</template>
复制代码

新建pages/demo1.vue文件

<template>
  <p>我是demo1页面</p>
</template>

复制代码

我们直接保存，看下展示效果
首页：

demo1:

很直观了 ~

自定义布局，在页面直接通过layouts引用即可，例：

<template>
  <p>我是demo2</p>
</template>
<script>
export default {
  layout: 'demo-template'
}
</script>
复制代码

layout/error.vue为默认错误页面，可接收错误信息对象，只支持服务端部署方式

pages

page里新建文件会直接生成固定路由，无需人肉添加路由，例：http://127.0.0.1:3000/demo1

路由

Nuxt.js 依据 pages 目录结构自动生成vue-router 模块的路由配置。
页面之间可以通过<nuxt-link>跳转，这个和我们使用router-link一样。
动态路由在文件前面添加_即可,路由组件内也可内置参数校验器，会返回一个布尔值，例：

export default {
  validate ({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  }
}
复制代码

此外还支持嵌套路由，动态嵌套路由等，更多请查看路由-Nuxt.js

nuxt.config.js

这个文件是个灵魂文件，一切的配置都在这里集成

const pkg = require('./package')

module.exports = {

复制代码

  // 初始化的选过的，别乱改
  mode: 'universal',

复制代码

  /*
  ** Headers of the page
  ** 基本没啥需要在这改的，页面的自定义内容可到页面具体配置
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

复制代码

  /*
  ** Customize the progress-bar color
  ** color	String	'black'	进度条的颜色
  ** failedColor String	'red'	页面加载失败时的颜色 （当 data 或 fetch 方法返回错误时）。
  ** height	String	'2px'	进度条的高度 (在进度条元素的 style 属性上体现)。
  ** throttle	Number	200	在ms中，在显示进度条之前等待指定的时间。用于防止条形闪烁。
  ** duration	Number	5000	进度条的最大显示时长，单位毫秒。Nuxt.js 假设页面在该时长内加载完毕。
  ** rtl	Boolean	false	从右到左设置进度条的方向。
  ** 可在页面禁用
  */
  loading: { color: '#fff' },

复制代码

  /*
  ** 该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。
  ** 如果要使用 sass 就必须要安装 node-sass和sass-loader 。
  */
  css: [
    '@/assets/css/main.scss'
  ],

复制代码

  /*
  ** 在根目录plugins下添加的插件，需要在这指定路径，可配置参数：
  ** src: String (文件的路径)
  ** ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入。
  */
  plugins: [{
      src:'~plugins/axios',
      ssr: false
  }],

复制代码

  /*
  ** modules是Nuxt.js扩展，可以扩展它的核心功能并添加无限的集成
  ** https://zh.nuxtjs.org/guide/modules/
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],

复制代码

  /*
  ** https://zh.nuxtjs.org/api/configuration-build/
  ** 配置太多，基本需要扩展的配置都可以在这里添加
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

复制代码

部署

Nuxt部署分为服务端渲染应用部署和静态应用部署，初始化项目的时候，先确定好这个再开发，以免踩坑。服务端部署：

npm run build
npm run start
复制代码

静态部署：

npm run generate
复制代码

如果确定是静态部署，需要注意在服务端运行的方法都生效，比如created，asyncData等，当接入异步请求时会报错。静态部署动态路由也是不可用的。