第二章 搭建 Nuxt 環(huán)境和創(chuàng)建項目
開發(fā)環(huán)境
- 安裝 node.js & npm
https://nodejs.org/zh-cn/ - 安裝 Vscode
https://code.visualstudio.com/
安裝腳手架工具與創(chuàng)建項目
為了快速入門辟躏，Nuxt.js團隊創(chuàng)建了腳手架工具 create-nuxt-app腕窥。
NPX 方式
確保安裝了npx（npx在NPM版本5.2.0默認安裝了）琢锋，npx 是 npm 的高級版本调衰，npx 具有更強大的功能绩社。
作用是避免全局安裝模塊：npx 臨時安裝一個 create-nuxt-app 模塊从铲，來初始化項目澜建，使用過后會自動刪除
create-nuxt-app 模塊(下面不需要全局安裝)
- 直接初始化項目
npx create-nuxt-app nuxt-app
image.png
- 當(dāng)運行完時米丘，它將安裝所有依賴項赶撰，然后啟動項目:
cd nuxt-app
yarn dev
image.png
image.png
打開瀏覽器訪問 http://localhost:3000 效果如下：
image.png
更改端口號與主機
如果默認 3000 端口號被占用舌镶，可在 nuxt.config.js 中更改端口號：
server: {
port: 8000,
ip: '0.0.0.0',
},
更改后重啟項目，然后訪問 http://localhost:8000/
詳解項目目錄結(jié)構(gòu)
目錄結(jié)構(gòu)
- .nuxt ：執(zhí)行 npm run dev 命令后編譯的目錄文件豪娜。
- assets ：用于組織未編譯的靜態(tài)資源如 LESS 餐胀、SASS 或 JavaScript 。
- components ：用于組織應(yīng)用的 Vue.js 組件瘤载。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件否灾，即這些組件不會
像頁面組件那樣有 asyncData 方法的特性。 - layouts ：用于組織應(yīng)用的布局組件鸣奔。
- middleware ：用于存放應(yīng)用的中間件墨技。
- node_modules ：用于存放項目的依賴包
- pages ：用于組織應(yīng)用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件并自動生成對應(yīng)的路由配置扣汪。
- plugins ：用于組織那些需要在 根vue.js應(yīng)用 實例化之前需要運行的 Javascript 插件
- static ：靜態(tài)文件目錄 static 用于存放應(yīng)用的靜態(tài)文件断楷，此類文件不會被 Nuxt.js 調(diào)用 Webpack 進行構(gòu)
建編譯處理。 服務(wù)器啟動的時候崭别，該目錄下的文件會映射至應(yīng)用的根路徑 / 下账千。 - store ：用于組織應(yīng)用的 Vuex 狀態(tài)樹 文件匀奏。 Nuxt.js 框架集成了 Vuex 狀態(tài)樹 的相關(guān)功能配置娃善，在 store
目錄下創(chuàng)建一個 index.js 文件可激活這些配置聚磺。 - .editorconfig : 指定編輯器的編寫項目的代碼風(fēng)格
- .gitignore 文件用于指定哪些文件不被提交到Git倉庫中。
- nuxt.config.js 文件用于組織 Nuxt.js 應(yīng)用的個性化配置炬丸，以便覆蓋默認配置瘫寝。
- package-lock.json 文件用于描述應(yīng)用具體的依賴版本
- package.json 文件用于描述應(yīng)用的依賴關(guān)系和對外暴露的腳本接口。
