nuxt 入门学习

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等，当接入异步请求时会报错。静态部署动态路由也是不可用的。