demo如圖
自動生成的路由：

資料夾：

Nuxt.js 集成了以下元件/框架，用於開發完整而強大的 Web 應用：

Vue 2
Vue-Router
Vuex (當配置了 Vuex 狀態樹配置項 時才會引入)
Vue-Meta
壓縮並 gzip 後，總程式碼大小為：28kb （如果使用了 Vuex 特性的話為 31kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理程式碼的自動化構建工作（如打包、程式碼分層、壓縮等等）。

特性重點內容
基於 Vue.js
自動程式碼分層
服務端渲染
強大的路由功能，支援非同步資料
靜態檔案服務
ES6/ES7 語法支援
打包和壓縮 JS 和 CSS
HTML頭部標籤管理
本地開發支援熱載入
整合ESLint
支援各種樣式前處理器： SASS、LESS、 Stylus等等

服務端渲染

你可以使用 Nuxt.js 作為你專案的UI渲染框架。

當執行 nuxt 命令時，會啟動一個支援 熱載入 和 服務端渲染（基於Vue.js的 vue-server-renderer 模組）的開發伺服器。

可以檢視 Nuxt.js 提供的各種 命令 以瞭解更多的資訊。

如果你的專案有自己的Web伺服器（例如用 Express.js 啟動的Web服務），你仍然可以將 Nuxt.js 當作是中介軟體來使用，負責UI渲染部分的功能。在開發通用的Web應用過程中，Nuxt.js 是可插拔的，沒有太多的限制，可通過 開發編碼中使用Nuxt.js 瞭解更多的資訊。

靜態化

支援 Vue.js 應用的靜態化算是 Nuxt.js 的一個創新點，通過 nuxt generate 命令實現。

該命令依據應用的路由配置將每一個路由靜態化成為對應的HTML檔案。

例子：

-| pages/
—-| about.vue
—-| index.vue
靜態化後變成：

-| dist/
—-| about/
——| index.html
—-| index.html
靜態化可以讓你在任何一個靜態站點服務商託管你的Web應用。
安裝重點內容
為了便於大家快速使用，Nuxt.js提供了一個 starter 模板。

下載模板的壓縮包 或利用 vue-cli 安裝使用：

$ vue init nuxt-community/starter-template <project-name>
如果 vue-cli 沒有安裝, 需先通過 npm install -g vue-cli 來安裝。
然後安裝依賴包：

$ cd <project-name>
$ npm install
接著通過以下命令啟動專案：

$ npm run dev
應用現在執行在 http://localhost:3000
    如果不使用 Nuxt.js 提供的 starter 模板，我們也可以從頭開始新建一個 Nuxt.js 應用專案，過程非常簡單，只需要 1個檔案和1個目錄。如下所示：

    $ mkdir <專案名>
    $ cd <專案名>
    提示: 將 專案名 替換成為你想建立的實際專案名

    新建 package.json 檔案

    package.json 檔案用來設定如何執行 nuxt：

    {
      "name": "my-app",
      "scripts": {
        "dev": "nuxt"
      }
    }
    上面的配置使得我們可以通過執行 npm run dev 來執行 nuxt。

    安裝 nuxt

    一旦 package.json 建立好， 可以通過以下npm命令將 nuxt 安裝至專案中：

    npm install --save nuxt
    pages 目錄

    Nuxt.js 會依據 pages 目錄中的所有 *.vue 檔案生成應用的路由配置。

    建立 pages 目錄：

    $ mkdir pages
    建立我們的第一個頁面 pages/index.vue：

    <template>
      <h1>Hello world!</h1>
    </template>
    然後啟動專案：

    $ npm run dev
    Bingo！現在我們的應用執行在 http://localhost:3000

    注意：Nuxt.js 會監聽 pages 目錄中的檔案變更並自動重啟， 當新增新頁面時沒有必要手工重啟應用。