nuxt.js
Nuxt.js 是基于 vue 的服務(wù)器端渲染框架。
全局安裝 create-nuxt-app 工具
命令：
npm install -g create-nuxt-app
//類(lèi)似于vie-cli中的（npm i @vue/cli -g）,全局安裝vue-cli
使用 create-nuxt-app 創(chuàng)建 項(xiàng)目文件夾
create-nuxt-app (自定義項(xiàng)目名)
執(zhí)行一些選擇：
- Project name 項(xiàng)目名 //項(xiàng)目名稱(chēng)
- Project description My astounding Nuxt.js project //項(xiàng)目描述
- Author name 姓名 //作者姓名
- Choose programming language JavaScript //選擇開(kāi)發(fā)的語(yǔ)言 javascript or typescript
- Choose the package manager Npm //選擇包管理的工具 npm or yarn
- Choose UI framework Element //選擇一個(gè)UI框架
- Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) //添加 axios module 以輕松地將 HTTP 請(qǐng)求發(fā)送到您的應(yīng)用程序中。
- Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) //檢查代碼是否規(guī)范
- Choose test framework None //選擇一個(gè)測(cè)試框架
- Choose rendering mode Universal (SSR) //選擇一種渲染模式 SSR or SPA
- Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
項(xiàng)目文件夾創(chuàng)建成功后，會(huì)輸出下面的信息:
項(xiàng)目文件夾創(chuàng)建成功.png
注：
第十步，會(huì)問(wèn)我們選擇哪種渲染方式，這里一定要選擇 Universal（通用的、普遍的）。spa 是單頁(yè)面應(yīng)用，這種模式下，文件不會(huì) ssr 渲染，所以 nuxt 就沒(méi)有意義了。
// 如果想更改渲染方式，可以修改 nuxt.config.js 中的 mode 屬性。
mode: 'Universal' // Universal 可以ssr；spa 不會(huì)ssr，是客戶端渲染
目錄結(jié)構(gòu)
|-- .nuxt // Nuxt自動(dòng)生成，臨時(shí)的用于編輯的文件，build
|-- assets // 用于組織未編譯的靜態(tài)資源入LESS、SASS 或 JavaScript
|-- components // 用于自己編寫(xiě)的Vue組件，比如滾動(dòng)組件，日歷組件，分頁(yè)組件
|-- layouts // 布局目錄，用于組織應(yīng)用的布局組件，頁(yè)面的模板文件，不可更改。(相當(dāng)于vue-cli中的public文件夾)
|-- middleware // 用于存放中間件
|-- pages // 用于存放寫(xiě)的視圖頁(yè)面，主要的工作區(qū)域，相當(dāng)于vue-cli中的views文件夾
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放靜態(tài)資源文件，比如圖片，可通過(guò)根目錄直接訪問(wèn)，不需要經(jīng)過(guò)webpack編譯
|-- store // 用于組織應(yīng)用的Vuex 狀態(tài)管理。
|-- .editorconfig // 開(kāi)發(fā)工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于檢查代碼格式
|-- .gitignore // 配置git不上傳的文件
|-- nuxt.config.json // 用于組織Nuxt.js應(yīng)用的個(gè)性化配置，已覆蓋默認(rèn)配置
|-- package-lock.json // npm自動(dòng)生成，用于幫助package的統(tǒng)一性設(shè)置的，yarn也有相同的操作
|-- package-lock.json // npm自動(dòng)生成，用于幫助package的統(tǒng)一性設(shè)置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件
