介紹

  如果你使用過Vue，那麼就知道使用Vue構建一個單頁應用是非常簡單快捷的。而什麼是單頁應用呢，單頁應用 即SPA（全稱為:single page web application），簡單來說就是整個網站只有一個頁面，整個站點的所有展示都在瀏覽器中通過非同步的方式進行渲染，而這種非同步渲染有個弊端就是非常不利於SEO，因為整個站點的資料都是在瀏覽器中進行渲染，但是百度等搜尋引擎的蜘蛛只會抓取你服務端返回來的html，所以搜尋引擎將不能獲取到你的站點內容。

    儘管Vue也提供了SSR渲染，但是Nuxt在Vue基礎上做了更方便的整合，使用Nuxt能夠更快捷方便的進行專案開發，Nuxt流程圖如下

安裝

  方式一(推薦新手使用)

        Nuxt官方團隊為我們提供了一個方便的腳手架 create-nuxt-app，使用create-nuxt-app我們能快速的建立一個nuxt專案。

        使用該腳手架需要使用npx，首先確保你正確的配置了npm，NPM版本5.2.0預設安裝了npx，如果你的電腦上沒有npx,僅需要執行下 npm install npx即可，現在我們來建立一個nuxt專案

        首先執行以下命令

    npx create-nuxt-app <專案名>

        接下來它會讓你進行一些選擇（使用上下鍵進行選擇，然後回車提交即可）:

               1. 在整合的伺服器端框架之間進行選擇    (此處預設即可):

                    None (Nuxt預設伺服器)

                    Express

                    Koa

                    Hapi

                    Feathers

                    Micro

                    Adonis (WIP)

               2.選擇您喜歡的UI框架 （如果你不知道怎麼選，那麼選擇Element UI 吧）:

                    None (無)

                    Bootstrap

                    Vuetify

                    Bulma

                    Tailwind

                     Element UI

                     Ant Design Vue

                     Buefy

             3.選擇你想要的Nuxt模式 (Universal or SPA)

             4. 新增 axios module 以輕鬆地將HTTP請求傳送到您的應用程式中。

             5.新增 EsLint 以在儲存時程式碼規範和錯誤檢查您的程式碼。

              6.新增 Prettier 以在儲存時格式化/美化您的程式碼。

           當執行完時，它將安裝所有依賴項，因此下一步是啟動專案:

        $ npm run dev

        應用現在執行在 http://127.0.0.1:3000 上執行。

        瀏覽器訪問 http://127.0.0.1:3000 既可看見預設demo

    方式二

            方式一使用了官方提供的腳手架來進行搭建，這裡我們將手動新增Nuxt依賴來搭建一個demo

            1.首先進入你的工作空間,分別鍵入以下命令,將 <專案名> 替換成為你想建立的實際專案名。

     mkdir <專案名>

     cd <專案名> 

           2.建立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

現在我們的應用執行在 http://127.0.0.1:3000 上執行。

                瀏覽器訪問 http://127.0.0.1:3000 既可看見