首頁  >  文章  >  web前端  >  Vue.js通用應用框架-Nuxt.js的解析

Vue.js通用應用框架-Nuxt.js的解析

不言
不言原創
2018-06-29 11:58:241616瀏覽

本篇文章主要介紹了Vue.js通用應用框架-Nuxt.js的上手教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

對於React,Vue建構的單頁應用老說,SEO是一個眾所周知的問題。服務端渲染(SSR-server Side Render)是目前看來最好的解決方法。 React應用程式有Next.js,對應Vue的解法就是Nuxt.js。

1.簡介

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

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 &#39;vue&#39;
import Element from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;
Vue.use(Element)

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

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

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

5.靜態資源檔案

你可以把靜態資源檔案放到static資料夾下,然後就可以使用http://localhost:3000/66f867eb2d676dffe546255788f3840c來存取靜態資源檔案。

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


以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於vue.js簡單配置axios的方法介紹

如何利用Vue.js指令實現全選功能

#

以上是Vue.js通用應用框架-Nuxt.js的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn