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等，當接入異步請求時會報錯。靜態部署動態路由也是不可用的。