創(chuàng)建項(xiàng)目（慣用yarn）

 npx create-nuxt-app {項(xiàng)目名稱}

安裝過程中選了如下配置

image.png

如果有哪兒選的不對(duì)，歡迎及時(shí)糾正。

安裝完畢。

啟動(dòng)項(xiàng)目

yarn dev

完事提示我

Listening on: http://localhost:3000/
把http://localhost:3000/ 粘到瀏覽器地址欄就能看見項(xiàng)目了。

項(xiàng)目結(jié)構(gòu)（順序是按當(dāng)前在我的vscode里的順序）

.nuxt //置灰文件夾，猜測(cè)是nuxt的轉(zhuǎn)化文件目錄
components //組件存放目錄
components/NuxtLogo.vue //默認(rèn)里面有個(gè)svg的組件
components/Tutorial.vue //默認(rèn)直接在index.vue里引用的組件
node_modules //依賴包
pages //頁面存放目錄
pages/index.vue //默認(rèn)文件，直接展示Tutorial.vue組件的內(nèi)容
plugins //應(yīng)該是存放配置的相關(guān)文件
plugins->element-ui.js //引入并掛載了elementui，還引入了一個(gè)en的包，猜測(cè)是語言包
static //存放靜態(tài)文件
static/favicon.ico //nuxt的官方logo
store //看名字是vuex的文件存放目錄
store/README.md //一個(gè)備注文件，聲明store要不要都行，要是加上了vuex里的文件就自動(dòng)開啟vuex功能，無需額外安裝
.editorconfig //開發(fā)的配置，聲明了權(quán)限還有語言、規(guī)則，別的沒看懂
.eslintcache //沒太看懂，里面串json數(shù)據(jù)，看名字像是eslint的緩存文件
.eslintrc.js //語法檢查和格式化的配置文件
.gitignore //git配置忽略文件
.prettierrc //沒看懂是啥，里面就兩個(gè)key的json
nuxt.config.js //nuxt的配置文件
package.json //依賴包管理和運(yùn)行配置文件
README.md //項(xiàng)目相關(guān)的命令文件和一些文件的備注，都是英文，回頭翻譯一下詳解
stylelint.config.js //看著是關(guān)于樣式格式的配置文件，安裝過程中有選安裝stylelint，為了代碼美觀選的，具體作用待確定

要做一個(gè)掛在生產(chǎn)環(huán)境的項(xiàng)目，還是要快速開發(fā)和能夠跟調(diào)接口的，下一篇文章會(huì)講nuxt+less的使用方式，官網(wǎng)有講sass，我個(gè)人習(xí)慣用less，所以還是尊重我自己的愛好。