Nuxt.js(一、介紹與安裝)

1.為什麼使用Nuxt

漸進式Vue.js框架給前後端分離帶來無限的樂趣，越來越多的程式設計師選擇Vue。在我們使用Vue框架的過程中不免會出現以下的一些問題：

1. 如何更好的組合使用javascript和vue元件，使其有效地協同工作；
2. 有沒有一種統一的最佳實踐檔案結構可以讓我們更好的管理應用的程式碼；
3. 怎麼處理SPA應用的SEO問題；
4. 怎麼加快某些重要頁面的首屏時間；

一些有經驗的程式設計師當然可以自己處理大部分問題，但是Nuxt.js為我們提供了平滑開箱即用,體驗的更高層次解決方案。因為Nuxt.js是構建於Vue之上的，本質上並沒有區別。

2.Nuxt.js的功能優點

1. 從頭開始構建生產就緒的Vue應用程式很繁瑣

   nuxt.js智慧集成了Vuex,Vue Router,Vue-meta等外掛，並做好了相對完善的配置，省去了每次構建Vue專案都要做的一些重複工作

2. vue專案構建的檔案體系不足

   nuxt.js提供了統一標準完善的專案檔案結構。vue專案構建預設只有assets與components檔案，nuxt完善了這一結構，提供了pages,layouts,stors等檔案結構，後面會詳細介紹。並且統一的檔案構架有助於快速的轉移專案

3. 在大型Vue應用程式中，路由配置篇幅可能會很長

   nuxt會自動為專案新增vue router,您只要將頁面級vue元件放入pages檔案中，nuxt會為您配置好相關路徑配置

4. 但是nuxt自動的配置並不代表它限制了自定義的配置

   如果你有不同於預設配置的設定，你可以載入nuxt.config.js裡

5. vue構建的專案對SEO十分不友好

   這時有兩個方案，預渲染(Prerendering)和伺服器端渲染（SSR）,相對完美的方案是SSR。但是每個專案都去配置實現相關SSR相對複雜，Nuxt則幫我們解決了這一問題，讓我們更容易的新增頁面SEO tags

6. 初始負載下的Vue應用程式可能很慢

   首屏渲染速度對很多專案是很重要的，nuxt的Universal（SSR）模式將使用Node.js伺服器將基於Vue元件的HTML傳遞給客戶端，提供更好的使用者體驗

7. 當你有需求時，vue構建的專案在開發環境難以改變框架的一些行為

   Nuxt基於強大的模組化體系結構，以使您的開發更快，更輕鬆。

如您所見，Nuxt.js允許您在配置上花費更少的時間
有更多的時間來解決問題和構建出色的Vue應用程式。

3.構建一個Nuxt專案

條件：npm版本>5.2.0（使用yarn也是可以的）

1npxcreate-nuxt-app<my-project>(nuxt-app)
2//構建過程中您將選擇一些配置，如果要做SSR請選擇nuxt的Universal（SSR）模式

安裝好專案依賴後

1cdnuxt-app
2npmrundev
3//您也可以匯入到vueui中執行，這樣就不用輸入命令行了

4.檔案系統

vue專案初始化後只建立了一個components檔案，但是我們不希望將頁面級元件，公共元件以及其他的一些元件都放在一起，nuxt為我們構建了一個標準的更加完善的檔案系統

可以看到nuxt專案中刪除了src檔案，所有的檔案都在根檔案下

1layouts檔案可以存放一些佈局容器：bloglayout，homelayout等
2paegs檔案中存放頁面級的vue元件，nuxt會自動為其構建route路徑
3components檔案中包含一些可複用的元件
4store檔案是存放vuex檔案的地方
5static檔案存放靜態資源，seo文案，favicon等
6assets檔案存放的是未編譯資源，如less，字型，images等
7plugins檔案存放js外掛，當使用自己的庫或者vue外掛時使用
8middleware檔案存放允許您定義可以在一個頁面渲染之前執行的自定義函式。
9nuxt.config.js是專案的配置檔案，您將使用它來編寫額外的配置，或者修改Nuxt預設為您的應用程式設定的配置。

5.自動建立路由

nuxt會自動為您構建路由，如果你的pages檔案中建立了兩個頁面，分別是index.vue與about.vue,則你的router.js將如下：

 1constrouter=newRouter({
 2routes:[
 3{
 4path:'/',
 5component:'pages/index.vue'
 6},
 7{
 8path:'/about',
 9component:'pages/about.vue'
10}
11]
12})