如何進行nuxt的開發 | 8月更文挑戰（已經更文8天）

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰 （已經更文9天）

官網介紹說Nuxt.js 是一個基於 Vue.js 的輕量級應用框架,可用來建立服務端渲染 (SSR) 應用,也可充當靜態站點引擎生成靜態站點應用,具備優雅的代碼結構分層和熱加載等特性。

前面已經介紹過了SPA和SSR的不一樣，這裏就不過多贅述了，而今天的nuxt.js開發的頁面就是SPA形式的，如掘金大大就是使用nuxt開發的

nuxt開發的優勢

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

環境配置

首現要確保安裝了node,而且版本通常是不能低於v12的，node安裝後，就要安裝vue-cli腳手架

npm install vue-cli -g
複製代碼

固然安裝的速度取決於你的鏡像，npm是從國外網站下載依賴包，網絡很差的話會很慢，這時你可使用淘寶的鏡像cnpm和yarn進行安裝都是能夠的

安裝nuxt

能夠自定義安裝nuxt,自定義構建模板文件

yarn add nuxt 
複製代碼

安裝好vue-cli後，就可使用init命令來初始化Nuxt.js項目。

vue init nuxt/starter
複製代碼

這時候他會在github上下載模版，而後會詢問你項目的名稱叫什麼，做者什麼的，這些徹底能夠根據本身的愛好填寫。

3.使用npm install安裝依賴包

npm install
複製代碼

這個過程是要等一會的，若是你這個過程安裝失敗，也不要慌張，你能夠直接誒刪除項目中的node_modules文件夾後，從新npm install進行安裝。

4.使用npm run dev 啓動服務

npm run dev
複製代碼

5.在瀏覽器輸入 localhost:3000,能夠看到結果。

Hello World

也可以使用create-nuxt-app建立項目

$ yarn create nuxt-app <項目名>
複製代碼

它會讓你進行一些選擇:

1. 在集成的服務器端框架之間進行選擇:

• None (Nuxt 默認服務器)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Fastify
• Adonis (WIP)

2. 選擇您喜歡的 UI 框架:

• None (無)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy
• iView
• Tachyons

3. 選擇您喜歡的測試框架:

• None (隨意添加一個)
• Jest
• AVA

4. 選擇你想要的 Nuxt 模式 (Universal or SPA)
5. 添加 axios module 以輕鬆地將 HTTP 請求發送到您的應用程序中。
6. 添加 EsLint 以在保存時代碼規範和錯誤檢查您的代碼。
7. 添加 Prettier 以在保存時格式化/美化您的代碼。

當運行完時，它將安裝全部依賴項，所以下一步是啓動項目:

$ cd <project-name>
$ npm run dev
複製代碼

應用如今運行在 http://localhost:3000 上運行。

注意：Nuxt.js 會監聽 pages 目錄中的文件更改，所以在添加新頁面時無需從新啓動應用程序

如何顯示Devtools

我必須將如下內容添加到nuxt.config.js：

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}
複製代碼

如何更改啓動端口

在package.json裏面增長

"config":{
    "nuxt":{
	"host":"127.0.0.1",
        "port":"9900"
   }
}
複製代碼

加載css文件

在nuxt.config.js文件裏面的css裏面以下設置

css: ["element-ui/lib/theme-chalk/index.css", "~assets/css/normal.css"],
複製代碼