基礎入門nuxt.js

關于nuxt,js的一些優點

• nuxt.js簡單來說就是vue,js的通用架構，最常用的就是用來SSR（服務端渲染），再直白點，就是vue.js原來是用倆做spa（單頁面應用），但是随着技術的普及，很多人想要用vue開發多頁面應用，并在服務端完成渲染，這個時候就出現了nuxt.js這個架構，她簡化了SSR的開發難度，通過指令用我們制作的vue項目生成html頁面，可以提高seo優化。

  關于如何搭建起一個nuxt.js架構

• 第一步：大部分的步驟同vue相同，但是先初始化一個nuxt項目時的指令為：vue init nuxt-community/starter-template testPro --testPro
• 第二步：進行安裝一些包 npm install

• 第三步：安裝好了包以後進行啟動項目 npm run dev

  關于nuxt.config.js的優點

• nuxt采用後端渲染，這樣生成前台頁面内容可以被百度搜尋引擎搜到，而vue是動态渲染，百度會出現抓不到網頁資料的情況，是以類似新聞，部落格，媒體之類的網站需要seo的網站比較适合，vue技術棧用nuxt，react技術棧用next。

  關于配置IP和端口問題

• 端口被占用，需要在package.json裡面的config,js進行配置config：

  “config”:{

  “nuxt”:{

  “host”:“127.0.0.1”,

  “port”:“1818”

  }

  }

  關于配置全局的CSS問題

• 在開發多頁項目時，都會定義個全局的css來初始化我們的頁面渲染。比如把padding和margin設定成0，網上也有非常有名的開源css檔案normailze.css，要定義這些配置，需要在nuxt.config.js裡進行操作
• 比如現在我們要把頁面字型設定為紅色，就可以在assets/css/normailze.css檔案，然後把字型設定為紅色。

/assets/css/normailze.css

html{

color:red;

}

/nuxt.config.js

css:[‘~assets/css/normailze.css‘],

關于配置webpack的loader問題

• 在nuxt.config.js裡是可以對webpack的基本配置進行覆寫的，比如現在我們要配置一個url-loader來進行小圖檔的64位打包。就可以在nuxt.config.js的build選項裡進行配置。

• build: {

  loaders:[

  {

  test:/.(png|jpe?g|gif|svg)KaTeX parse error: Expected 'EOF', got '}' at position 111: …xt]‘ } }̲ ], /* ** Ru…/,

  loader: ‘eslint-loader‘,

  exclude: /(node_modules)/

  })

  }

  }

  }

  關于Nuxt目錄結構

• 

  關于Nuxt路由跳轉
• 在pages下面建檔案夾，about和news，然後架構會自動幫你添加路由，你隻需要處理業務邏輯和路由的跳轉

• 

  - 現在我将nuxt-link将a标簽進行替換

  

• 如果要進行參數的傳遞的話

• 

  如果你需要檢視架構生成的路由的話，可以在nuxt中的router.js中進行檢視