首頁 > 文章 > web前端 > Vue.js通用應用框架Nuxt.js使用詳解

Vue.js通用應用框架Nuxt.js使用詳解

這次帶給大家Vue.js通用應用框架Nuxt.js使用詳解，Vue.js通用應用框架Nuxt.js使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

# 1.簡介

# 官網：https://nuxtjs.org/

# GitHub：https://github.com/nuxt/nuxt.js

Nuxt.js 是什麼？

# Nuxt.js 是一個基於 Vue.js 的通用應用框架。

透過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用程式的 UI渲染。

我們的目標是建立一個靈活的應用框架，你可以基於它初始化新專案的基礎結構程式碼，或是在已有 Node.js 專案中使用 Nuxt.js。

Nuxt.js 預設了利用Vue.js開發服務端渲染的應用程式所需的各種配置。

除此之外，我們還提供了一個指令叫做：nuxt generate，為基於 Vue.js 的應用程式提供產生對應的靜態網站的功能。

我們相信這個指令所提供的功能，是向開發整合各種微服務（microservices）的 Web 應用邁開的新一步。

作為框架，Nuxt.js 為客戶端/服務端這種典型的應用架構模式提供了許多有用的特性，例如非同步資料載入、中介軟體支援、佈局支援等。

2.建構第一個Nuxt.js專案

# 推薦使用Nuxt提供的範本。假設你已經安裝了vue-cli，如果沒有安裝請先執行npm install vue-cli -g來安裝vue-cli。

$ vue init nuxt-community/starter-template <project-name>

進入到專案資料夾中安裝依賴套件。

cd <project-name>
npm install

npm run dev

開啟瀏覽器，造訪http://localhost:3000。就能看到Next渲染出來的頁面了。

3.新增頁面

# 新建完成的專案結構如下圖所示：

# 項目結構

Nuxt約定所有頁面都放在pages資料夾下，Nuxt會根據目錄結構自動產生對應的路由。

現在在pages下新Vue檔案test.vue，造訪http://localhost:3000/test即可看到剛剛新增的頁面。

4.引入第三方外掛程式

# 通常情況下我們都需要引入第三方的插件，例如前段組件，日誌等。
第一步當然是安裝插件，此處以element-UI為例。

npm install element-ui

雖然下載了element-ui的套件但是卻不能像普通項目那樣直接在Vue實例中import然後使用。 Nuxt的核心專案都在.nuxt目錄下，如果修改這下面的檔案是不會生效的。因為每次編譯都會重新產生文件，所以直接修改該專案文件是無效的。

內核項目結構

雖然不能直接修改，但Nuxt提供了特殊的方式引入第三方插件。

第一步，在pulgin資料夾下新建js檔案element-ui.js。文件內容如下。

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

第二步，修改nuxt.config.js。添加plugins屬性。

/**
   * include third-party plugin
   */
  plugins: ['~plugins/element-ui'] // element-ui.js文件地址

重新編譯之後，Nuxt會編譯該第三方插件並使用。此時在任何一個Vue檔案中都能使用該第三方插件。

5.靜態資源檔案

# 你可以把靜態資源檔案放到static資料夾下，然後就可以使用http://localhost:3000/<檔案名稱>來存取靜態資源檔案。

Nuxt提供的功能還有很多，例如動態路由，ESLint程式碼偵測。今天先介紹到這裡，其他深入的用飯請參考官方網站。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！