您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue腳手架public放哪些內(nèi)容”,在日常操作中,相信很多人在vue腳手架public放哪些內(nèi)容問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue腳手架public放哪些內(nèi)容”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
public文件夾中一般放置一些靜態(tài)資源(圖片),在webpack進(jìn)行打包的時(shí)候,會原封不動的打包到dist文件夾中。public目錄下的文件并不會被Webpack處理,它們會直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下;必須使用絕對路徑引用這些文件,這個(gè)取決于你“vue.config.js”中publicPath的配置,默認(rèn)的是“/”。
1、第一步(僅第一次執(zhí)行):全局安裝@vue/cli
npm i @vue/cli -g
2、切換到要創(chuàng)建項(xiàng)目的目錄,然后創(chuàng)建項(xiàng)目
vue create XXX
3、啟動項(xiàng)目
npm run serve
備注:
1、npm淘寶鏡像地址
npm config set registry https://registry.npm.taobao.org
2、Vue腳手架隱藏了所有webpack相關(guān)配置,若要查看執(zhí)行
vue inspect > output.js
node_modules文件夾:項(xiàng)目依賴文件夾
public文件夾:
一般放置一些靜態(tài)資源(圖片)。值得注意,放在public文件夾中的靜態(tài)資源,webpack進(jìn)行打包的時(shí)候,會原封不動的打包到dist文件夾中。
任何放置在 public 文件夾的靜態(tài)資源都會被簡單的復(fù)制,而不經(jīng)過 webpack。你需要通過絕對路徑來引用它們。
注意我們推薦將資源作為你的模塊依賴圖的一部分導(dǎo)入,這樣它們會通過 webpack 的處理并獲得如下好處:
腳本和樣式表會被壓縮且打包在一起,從而避免額外的網(wǎng)絡(luò)請求。
文件丟失會直接在編譯時(shí)報(bào)錯,而不是到了用戶端才產(chǎn)生 404 錯誤。
最終生成的文件名包含了內(nèi)容哈希,因此你不必?fù)?dān)心瀏覽器會緩存它們的老版本。
public 目錄提供的是一個(gè)應(yīng)急手段,當(dāng)你通過絕對路徑引用它時(shí),留意應(yīng)用將會部署到哪里。如果你的應(yīng)用沒有部署在域名的根部,那么你需要為你的 URL 配置 publicPath 前綴:
在 public/index.html 或其它通過 html-webpack-plugin 用作模板的 HTML 文件中,你需要通過
<%= BASE_URL %> 設(shè)置鏈接前綴:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
在模板中,你首先需要向你的組件傳入基礎(chǔ) URL:
data () {
return {
publicPath: process.env.BASE_URL
}
}
然后:
<img :src="`${publicPath}my-image.png`">
何時(shí)使用 public 文件夾
你需要在構(gòu)建輸出中指定一個(gè)文件的名字。
你有上千個(gè)圖片,需要動態(tài)引用它們的路徑。
有些庫可能和 webpack 不兼容,這時(shí)你除了將其用一個(gè)獨(dú)立的
vue-cli3.0有兩個(gè)放置靜態(tài)資源的目錄分別是public和assets。
public放不會變動的文件(相當(dāng)于vue-cli2.x中的static)
public/ 目錄下的文件并不會被Webpack處理:它們會直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下。必須使用絕對路徑引用這些文件,這個(gè)取決于你vue.config.js中publicPath的配置,默認(rèn)的是/。
assets放可能會變動的文件
assets目錄中的文件會被webpack處理解析為模塊依賴,只支持相對路徑形式。
簡單來說就是就是public放別人家js文件(也就是不會變動),assets放自己寫的js文件(需要改動的文件)
src文件夾
assets文件夾:一般用于存放靜態(tài)資源(放置多個(gè)組件共用的靜態(tài)資源),值得注意,放在在assets文件夾里的靜態(tài)資源,在webpack打包的時(shí)候,webpack會把靜態(tài)資源當(dāng)做一個(gè)模塊,打包到JS文件里面。
components文件夾:一般放置非路由組件(全局組件)
App.vue:唯一的根組件(匯總所有組件)
main.js:入口文件,也是整個(gè)程序當(dāng)中最先執(zhí)行的文件
.gitignore:git版本管制忽略的配置(一般不碰)
babel.config.js:babel的配置文件(相當(dāng)于翻譯官,比如把ES6相關(guān)語法翻譯為ES5,兼容性更好,一般不碰)
package.json:應(yīng)用包配置文件(類似于項(xiàng)目身份證,記錄著項(xiàng)目名稱、項(xiàng)目依賴、項(xiàng)目運(yùn)行等信息)
package-lock.json:包版本控制文件(緩存性文件)
README.md:應(yīng)用描述文件(說明性文件)
vue.config.js:可以對腳手架進(jìn)行個(gè)性化定制,如何配置可以參考Vue CLI
其他文件夾:
pages文件夾:存放路由相關(guān)組件(pages也可換成views)
router文件夾:路由配置文件
store文件夾:vuex相關(guān)文件
mock文件夾:存放mock模擬數(shù)據(jù)
vue-cli腳手架環(huán)境:基于node + webpack來支撐我們寫vue項(xiàng)目
默認(rèn)入口文件main.js:所有代碼都要和main.js產(chǎn)生直接或間接的引入關(guān)系
打包過程:執(zhí)行打包的時(shí)候,webpack會根據(jù)入口的引入關(guān)系來構(gòu)建代碼地圖,把相關(guān)的代碼用加載器/插件翻譯處理,輸出到.js文件中,插入到index.html中運(yùn)行
① main.js → 打包運(yùn)行入口
② Vue.component("組件名",組件對象) → 給Vue注冊一個(gè)全局組件
執(zhí)行順序:通過main.js文件先注冊全局組件,然后是組件內(nèi)使用這個(gè)全局組件。
到此,關(guān)于“vue腳手架public放哪些內(nèi)容”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。