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