簡言
nuxt3的中文網(wǎng)站
上次簡單介紹了nuxt3創(chuàng)建項目的方法和目錄文件大概用處。
這次詳細說下.nuxt、.output、assets、public、utils五個文件夾的用處。
正文
.nuxt
Nuxt在開發(fā)中使用.nuxt/目錄來生成你的Vue應(yīng)用程序。
為了避免將開發(fā)構(gòu)建的輸出推送到你的代碼倉庫中,你應(yīng)該將這個目錄添加到你的.gitignore文件中。
這個文件夾是使用nuxt命令生成的,所以在打包和開發(fā)時的內(nèi)容不同。
打包后:
開發(fā)時:
.output
當(dāng)構(gòu)建你的應(yīng)用程序用于生產(chǎn)時,Nuxt 會創(chuàng)建 .output/ 目錄。
為了避免將構(gòu)建輸出推送到你的代碼倉庫中,應(yīng)該將這個目錄添加到你的 .gitignore 文件中。
使用這個目錄來部署你的 Nuxt 應(yīng)用程序到生產(chǎn)環(huán)境。 我一般都是在里面全選壓縮成一個文件夾打包,這樣可以不用帶.output這一層。
assets
assets目錄用于添加所有將由構(gòu)建工具處理的網(wǎng)站資產(chǎn)。
該目錄通常包含以下類型的文件:
- 樣式表(CSS、SASS等)
- 字體
- 不會從"public/"目錄中提供的圖片。
在里面的資源可以被構(gòu)建工具處理(vite、webpack),資源名稱可能會改變。
public
這個是靜態(tài)資源文件夾。用來放靜態(tài)資源,就是放服務(wù)器上的資源,目錄位于服務(wù)器根目錄下,包含一些公共文件,這些文件需要保持原來的文件名(例如 robots.txt)_或者_不太可能改變(例如 favicon.ico)。
不會被構(gòu)建工具處理,而是直接打包到.output文件夾里。
在 Nuxt 2 中,這被稱為 static/ 目錄。
utils
使用utils/目錄在整個應(yīng)用程序中自動導(dǎo)入你的工具函數(shù)。
工具函數(shù)文件夾,默認自動導(dǎo)入子文件里的導(dǎo)出的函數(shù)。
可以在現(xiàn)在你可以在.js、.ts和.vue文件(除server文件夾外)中使用自動導(dǎo)入的工具函數(shù)了。
例如:
utils/index.ts
export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
notation: 'compact',
maximumFractionDigits: 1
})
app.vue文章來源:http://www.zghlxwxcb.cn/news/detail-799723.html
<template>
<p>{{ formatNumber(1234) }}</p>
</template>
結(jié)語
如果你是用vscode進行開發(fā)nuxt3項目的,可以安裝以下插件,獲取nuxt3類型支持和vue3支持:文章來源地址http://www.zghlxwxcb.cn/news/detail-799723.html
- Nuxtr ----- Nuxt3插件
- TypeScript Vue Plugin (Volar) ---- vue3 typescript 插件
- Vue Language Features (Volar) ---- vue3 語法提示
到了這里,關(guān)于【Nuxt3】nuxt3目錄文件詳情描述:.nuxt、.output、assets、public、utils(一)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!