nuxt 入門學習

daly發表於2019-01-07
UX

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 ~

nuxt 入門學習
從圖中可見很多選項，包含服務端應用，前端UI框架，axios，語法校驗，應用模式等，這個大家根據專案自行選擇即可。
nuxt 入門學習
安裝完畢~我們去看看目錄結構吧~

nuxt 入門學習
目錄十分清晰

跑一下~

nuxt 入門學習
校驗報錯~找到對應頁面，control+s手動儲存一下就好

nuxt 入門學習

OK~我們來看看主要配置

Nuxt 主要配置

layouts

用於頁面佈局，layouts/default.vue，可用於頁面的通用佈局，也可以自定義佈局，在頁面中通過layouts引用即可

nuxt 入門學習

<nuxt/>這個就是頁面的主體，在這個佈局上新增的東西會展示在所有有頁面上
例如：我在layout/default.vue頁面新增了一行程式碼，在其他頁面上都會展示

<template>
  <div>
    // 自定義了一行
    <p>我是default模板上加的文字</p>
    <nuxt/>
  </div>
</template>
複製程式碼

新建pages/demo1.vue檔案

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

複製程式碼

我們直接儲存，看下展示效果
首頁：

nuxt 入門學習

demo1:

nuxt 入門學習

很直觀了 ~

自定義佈局，在頁面直接通過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等，當接入非同步請求時會報錯。靜態部署動態路由也是不可用的。

相關文章