vue腳手架public放什麼

public資料夾中一般放置一些靜態資源（圖片），在webpack進行打包的時候，會原封不動的打包到dist資料夾中。public目錄下的檔案並不會被Webpack處理，它們會直接被複制到最終的打包目錄（預設是dist/static）下；必須使用絕對路徑參照這些檔案，這個取決於你「vue.config.js」中publicPath的設定，預設的是「/」。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

一、安裝Vue腳手架

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

二、vue-cli腳手架初始化專案各個資料夾用途

node_modules資料夾：專案依賴資料夾

public資料夾：

一般放置一些靜態資源（圖片）。值得注意，放在public資料夾中的靜態資源，webpack進行打包的時候，會原封不動的打包到dist資料夾中。

任何放置在 public 資料夾的靜態資源都會被簡單的複製，而不經過 webpack。你需要通過絕對路徑來參照它們。

注意我們推薦將資源作為你的模組依賴圖的一部分匯入，這樣它們會通過 webpack 的處理並獲得如下好處：

• 指令碼和樣式表會被壓縮且打包在一起，從而避免額外的網路請求。
• 檔案丟失會直接在編譯時報錯，而不是到了使用者端才產生 404 錯誤。
• 最終生成的檔名包含了內容雜湊，因此你不必擔心瀏覽器會快取它們的老版本。

public 目錄提供的是一個應急手段，當你通過絕對路徑參照它時，留意應用將會部署到哪裡。如果你的應用沒有部署在域名的根部，那麼你需要為你的 URL 設定 字首：

• 在 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：可以對腳手架進行個性化客製化，如何設定可以參考

其他資料夾：

• 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放什麼的詳細內容，更多請關注TW511.COM其它相關文章！