Nuxt(一) Nuxt初步認識

多數基於webpack構建的項目，編譯出來的html文件，資源文件都被打包到js中，這樣的頁面不利於seo 搜索引擎優化（Search Engine Optimization）冰爺內容到達時間（time-to-content，或者稱之爲首屏渲染時長），也有很大的優化空間，引入Nuxt.js框架。

1、Nuxt簡介

       Nuxt.js是一個基於Vue.js的通用應用框架，經過客戶端/服務端基礎架構的抽象組織，Nuxt.js主要關注的是應用的UI渲染。

       Nuxt.js預設了利用Vue.js開發服務daunt渲染的應用所須要的各類配置。

　　【nuxt generate】 基於Vue.js的應用提供生成對應的靜態站點的功能。

2、Nuxt.js特性

　　1.基於Vue.js；

　　2.自動代碼分層；

　　3.服務端渲染；

　　4.強大的路由功能。支持異步數據；

　　5.靜態文件服務；

　　6.ES6/ES7語法支持；

　　7.打包和壓縮JS和CSS；

　　8.HTML頭部標籤管理；

　　9.本地開發支持熱加載；

　　10.集成ESLint；

　　11.支持各類樣式預處理器：SASS、LESS、Stylus等

3、使用

1.安裝，starter模板

vue init nuxt/starter <project-name>

若是沒有安裝vue-cli，須要先安裝

npm install -g vue-cli　

而後進入到項目文件夾 

cd <project-name>

安裝依賴

npm install

運行項目

npm run dev　

注： Nuxt.js會監聽pages目錄中的文件變動並自動重啓更新。

特別注意：node的版本（>7）不能過低，儘可能高版本。

打開頁面localhost:3000能夠看到

在coding以前先了解項目的結構

　　　　

對結構目錄的說明（下面紅色的標記的表示文件夾的名稱不可更改）

　　資源目錄assets 用於組織編譯靜態資源如LESS、SASS或者JavaScript.

　　組件目錄components用於組織應用的Vue.js組件。Nuxt.js不會擴展加強該目錄下的Vue.js組件，即這些組件不會像頁面組件那樣擁有asyncData方法的特性

　　佈局目錄layouts用於組織應用的佈局組件。

　　中間件目錄middleware用於存放應用的中間件。

　　頁面目錄pages用於組織應用的路由及視圖。Nuxt.js框架讀取該目錄下全部的.vue文件並自動生成對應的路由配置。

　　插件目錄plugins用於組織那些須要在根vue.js應用 實例化以前須要運行的JavaScript插件。

　　靜態文件目錄 static用於存放應用的靜態文件，此類文件不會被Nuxt.js調用Webpack進行構建編譯處理。服務器啓動的時候，該目錄下的文件會被映射至應用的根路徑 /下。

　　Store目錄store用於組織應用的Vuex文件。Nuxt.js框架集成了Vuex狀態樹的相關功能配置，在store目錄下建立一個index.js文件可激活這些配置。

　　nuxt.config.js文件用於組織Nuxt.js應用的個性化配置，以便覆蓋默認配置

　　package.json 文件用於描述應用的依賴關係和對外暴露的腳本接口