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 設定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：唯一的根元件（總整理，也是整個程式當中最早執行的檔案

        .gitignore:git版本管制忽略的設定（一般不碰）

        babel.config.js：babel的設定檔（相當於翻譯官，例如把ES6相關文法翻譯為ES5，相容性更好，一般不碰）

        package.json：應用程式設定檔（類似專案身分證，記錄專案名稱、專案依賴、專案運作等資訊）

        package-lock.json：封包版本控制檔（快取性文件）

        README.md：應用描述檔（說明性檔案）

        vue.config.js：可對鷹架進行個人化自訂，如何設定可參考Vue CLI#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檔案先註冊全域元件，然後是元件內使用這個全域元件

【相關推薦：vuejs影片教學、web前端開發

】###

以上是vue腳手架public放什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！