Nuxt.js知識點

起源

轉自博主：http://www.javashuo.com/article/p-zmmnscde-ex.html

最主要的緣由時使用vue-cli搭建的SPA（單頁應用）不利於搜索引擎的SEO操做。搜索引擎對SPA的抓取並很差，特別是百度根本無法抓取到SPA的內容頁面，因此咱們必須把咱們的應用在服務端渲染成適合搜索引擎抓取的頁面，再下載到客戶端。

Nuxt.js是Vue.js的通用框架，最經常使用的就是用來做SSR（服務器端渲染）。再直白點說，就是Vue.js原來是開發SPA（單頁應用）的，可是隨着技術的普及，不少人想用Vue開發多頁應用，並在服務端完成渲染。這時候就出現了Nuxt.js這個框架，她簡化了SSR的開發難度。還能夠直接用命令把咱們製做的vue項目生成爲靜態html。

首先說下 SSR，最近很熱的詞，意爲 Server Side Rendering（服務端渲染），目的是爲了解決單頁面應用的 SEO 的問題，對於通常網站影響不大，可是對於論壇類，內容類網站來講是致命的，搜索引擎沒法抓取頁面相關內容，也就是用戶搜不到此網站的相關信息。

既然說到 SSR 能夠解決 SEO 的問題，不難想到原理就是將咱們的 html 在服務端渲染，合成完整的 html 文件再輸出到瀏覽器。

第一章 Nuxt.js介紹

Nuxt.js 是一個基於 Vue.js 的通用應用框架。

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

優勢：

• 基於 Vue.js
• 自動代碼分層
• 服務端渲染
• 強大的路由功能，支持異步數據
• 靜態文件服務
• ES6/ES7 語法支持
• 打包和壓縮 JS 和 CSS
• HTML頭部標籤管理
• 本地開發支持熱加載
• 集成ESLint
• 支持各類樣式預處理器： SASS、LESS、 Stylus等等

第二章 Nuxt.js環境搭建

Nuxt.js 團隊提供了 vue-cli 的初始化模板。前提安裝 vue-cli，安裝過的忽略此步

首先，本機須要有node環境，這邊再也不闡述（均在命令行進行）。

1.安裝vue-cli腳手架

npm install vue-cli -g

查看是否安裝成功

vue -V

2.首先建立項目存放位置，即項目名稱（盤符自選）

mkdir appName

3.進入項目目錄，初始化Nuxt.js項目

cd appName

vue init nuxt/starter

會詢問你項目的名稱、做者之類的信息，自行填寫。

4.安裝依賴包

npm install

5.啓動服務

npm run dev

6.此時，在瀏覽器輸入localhost:3000，便可看到界面效果（以下圖）。

如今，咱們修改項目目錄下的/pages/index.vue文件section裏的內容爲「HelloWorld」保存，瀏覽器中內容會熱更新替換爲「HelloWorld」。

第三章 Nuxt.js目錄結構

參考Nuxt.js官網

|-- .nuxt                            // Nuxt自動生成，臨時的用於編輯的文件，build
|-- assets                           // 用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
|-- components                       // 用於本身編寫的Vue組件，好比滾動組件，日曆組件，分頁組件
|-- layouts                          // 佈局目錄，用於組織應用的佈局組件，不可更改。
|-- middleware                       // 用於存放中間件
|-- pages                            // 用於存放寫的頁面，咱們主要的工做區域
|-- plugins                          // 用於存放JavaScript插件的地方
|-- static                           // 用於存放靜態資源文件，好比圖片
|-- store                            // 用於組織應用的Vuex 狀態管理。
|-- .editorconfig                    // 開發工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用於檢查代碼格式
|-- .gitignore                       // 配置git不上傳的文件
|-- nuxt.config.json                 // 用於組織Nuxt.js應用的個性化配置，已覆蓋默認配置
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操做
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操做
|-- package.json                     // npm包管理配置文件

第四章 修改配置項

1.配置IP和端口號

修改項目根目錄package.json文件（以下圖）

注意：修改配置文件、新增頁面必須重啓服務

此時，在瀏覽器地址欄輸入http://127.0.0.1:8888，便可預覽項目。

 2.配置全局css

在目錄/assets下新建css文件夾、在css文件夾下新建reset.css文件，寫入

1 html {
2   padding: 0;
3   margin: 0;
4   color: red;
5 }

修改根目錄下的nuxt.config.js文件（如圖）：

修改完之後，保存，頁面效果會跟着變化。

這時候省查元素，head標籤裏就會正常引入reset.css文件樣式了。

更多配置參考Nuxt官網配置。

第五章 Nuxt的路由與傳參

Nuxt.js對路由進行了封裝，無需像vue同樣配置route/index.js，是自動生成的在目錄/.nuxt/router.js。

1.建立一個簡單的路由

咱們在/pages下建立兩個文件夾news和product，在文件夾下分別建立兩個頁面list和detail（如圖）。

當咱們建立完頁面，會發現目錄/.nuxt/router.js文件已經自動生成路由。多級路由後面再說。

如今填充頁面內容：

/pages/index頁面：

1 <template>
2   <section>
3     <div>
4       Index
5       <nuxt-link to="/news/list">news</nuxt-link>
6       <nuxt-link to="/product/list">product</nuxt-link>
7     </div>
8   </section>
9 </template>

/pages/news/list頁面：

1 <template>
2   <section>
3     <div>
4       News/List
5       <nuxt-link to="/">index</nuxt-link>
6       <nuxt-link to="/news/detail">news detail</nuxt-link>
7     </div>
8   </section>
9 </template>

/pages/news/detail頁面：

1 <template>
2   <section>
3     <div>
4       News/Detail
5       <nuxt-link to="/">index</nuxt-link>
6     </div>
7   </section>
8 </template>

/pages/product/list頁面：

1 <template>
2   <section>
3     <div>
4       Product/List
5       <nuxt-link to="/">index</nuxt-link>
6       <nuxt-link to="/product/detail">product detail</nuxt-link>
7     </div>
8   </section>
9 </template>

/pages/product/detail頁面：

1 <template>
2   <section>
3     <div>
4       Product/Detail
5       <nuxt-link to="/">index</nuxt-link>
6     </div>
7   </section>
8 </template>

頁面填充完畢，這邊使用的「nuxt-link」相似於「router-link」。點擊連接便可實現跳轉。

2.頁面跳轉傳參

 

未完待續、、、