国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【Nuxt3】nuxt3目錄文件詳情描述:.nuxt、.output、assets、public、utils(一)

這篇具有很好參考價值的文章主要介紹了【Nuxt3】nuxt3目錄文件詳情描述:.nuxt、.output、assets、public、utils(一)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

簡言

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)容不同。

打包后:
【Nuxt3】nuxt3目錄文件詳情描述:.nuxt、.output、assets、public、utils(一),Nuxt3,vue.js,前端
開發(fā)時:
【Nuxt3】nuxt3目錄文件詳情描述:.nuxt、.output、assets、public、utils(一),Nuxt3,vue.js,前端

.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這一層。
【Nuxt3】nuxt3目錄文件詳情描述:.nuxt、.output、assets、public、utils(一),Nuxt3,vue.js,前端

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

<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)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • Nuxt3環(huán)境變量配置

    Nuxt3 正式發(fā)布還不到半年,在投入生產(chǎn)環(huán)境使用后,遇到了不少問題,很難找到合適的解決方案,其中環(huán)境變量配置就是其中一個,之前一直未能解決,最近要上持續(xù)集成,無法繞過這個問題,所以花了點時間研究了一下,最終找到了解決方案,記錄一下。 面對一個新框架,

    2024年02月01日
    瀏覽(19)
  • nuxt3 如何監(jiān)聽路由變化?

    nuxt3 如何監(jiān)聽路由變化?

    2024年02月11日
    瀏覽(23)
  • 寶塔部署Nuxt3項目(https)

    寶塔部署Nuxt3項目(https)

    之前在服務(wù)器搭建的項目都是用http的,但是一般來說都要換成https;因為https比http更加安全,數(shù)據(jù)不再是明文傳輸,更不容易被攻擊/被第三方廣告光顧;所以就有了將http換成https的想法。 第一個需要升級的項目是我使用nuxt3重構(gòu)的博客項目,期間遇到了諸多問題,所以想記錄

    2024年02月04日
    瀏覽(27)
  • nuxt3使用記錄一:框架摸索

    之前直接用的Vue3,后面為了seo,了解到Vue3用SSR渲染很復(fù)雜,甚至衍生了出nuxt3這個框架,這個框架在github已經(jīng)有50K star了,也已經(jīng)是個非常成熟的框架了,不過我感覺國內(nèi)的資料也不多,看來國內(nèi)接受新事物的速度依然很慢,大廠估計都自研了,小公司就用老方法PHP啥的。

    2024年04月10日
    瀏覽(21)
  • Nuxt3重點特性使用舉例記錄

    Nuxt3重點特性使用舉例記錄

    小聊: 基于vue.js,用于SSR渲染解決SEO,但不僅限于此。不用于局限的眼光去看它,使用它會比原生vue3更加流暢舒適,性能也更高。在熟悉vue3的基礎(chǔ)上學(xué)習(xí)成不算高。另外,它完全支持vue3語法,相比于vue3,它改進了vue3的一些功能,Nuxt3有一些“約定”,你可以理解為是一些

    2024年02月07日
    瀏覽(39)
  • 一文搞懂Nuxt3基本用法

    一文搞懂Nuxt3基本用法

    在前后端分離出現(xiàn)之前,傳統(tǒng)的web頁面都是服務(wù)端渲染的,如JSP、PHP、Python Django,還有各種模板技術(shù)Freemarker, velocity,thymeleaf、mustache等等。其實這套技術(shù)都挺成熟的,也用了很多年。 但前后端分離出現(xiàn)后,帶來兩個好處: 工程上的分工,讓前端專門盯前端技術(shù),開發(fā)效率上

    2024年02月05日
    瀏覽(21)
  • nuxt3:接口轉(zhuǎn)發(fā),實現(xiàn)跨域

    一、背景 當(dāng)接口請求的域名和項目適用的域名不一致時候,可以適用接口轉(zhuǎn)發(fā)的方法實現(xiàn)跨域。 原理:服務(wù)的請求接口是不跨域的,nuxt3服務(wù)端請求接口后轉(zhuǎn)發(fā)給localhost:3000。 本地開發(fā),生產(chǎn)環(huán)境均可以使用。 二、理解服務(wù)器中間件 Nuxt 將自動讀取 ~/server/middleware ?中的任何

    2024年02月14日
    瀏覽(25)
  • nuxt3:我們開始吧-開發(fā)-配置-部署

    nuxt3:我們開始吧-開發(fā)-配置-部署

    一、背景介紹 2022 年 11 月 16 日,全球最大的 Nuxt 會議 Nuxt Nation 2022 在線舉行,并正式發(fā)布了 Nuxt.js 3.0 的第一個穩(wěn)定版本。Nuxt 3 是基于? Vite 、 Vue3 ?和? Nitro ?的 Nuxt 框架的現(xiàn)代重寫,具有一流的 Typescript 支持,是兩年多研究、社區(qū)反饋、創(chuàng)新和實驗的結(jié)果。為每個人提供了

    2023年04月12日
    瀏覽(19)
  • Nuxt3實戰(zhàn)系列之網(wǎng)絡(luò)請求篇

    Nuxt3提供了4種方式使得我們可以異步獲取數(shù)據(jù) useAsyncData useLazyAsyncData (useAsyncData+lazy:true) useFetch useLazyFetch (useFetch+lazy:true) 4種方式中,其實核心的就是 useAsyncData 和 useFetch 。這兩個方法不同于Nuxt2中的 asyncData 和 fetch 。接下來我們先來好好分析下這兩個方法。 我們知道,

    2024年02月08日
    瀏覽(23)
  • Nuxt3中請求數(shù)據(jù)-useFetch等

    Nuxt3中請求數(shù)據(jù)-useFetch等

    當(dāng)前版本: Nuxt? 3.4.1 Nitro:2.3.3 ? ? ? ~/server/api 里面的文件會自動在路由中加上 /api 的前綴。對于不需要帶 /api 前綴的服務(wù)器路由,可以把它們放到 ~/server/routes 目錄中。? 查:/server/api/user.ts ?增:/server/api/user.post.ts ?改:/server/api/user.put.ts 刪:/server/api/user/[id].delete.ts app.

    2024年02月11日
    瀏覽(29)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包