VueJS 專案建立 v1
此篇開發環境使用 mac OS 安裝 npm & yarn工具。
安裝指令:
npm install -g @vue/cli
or
yarn global add @vue/cli
npm install
npm run serve
npm run build
npm run lint
以下是重點學習的地方:
#vuejs project目錄結構說明
-
node_modules/: 這是包含專案相依模組的資料夾。通常透過
npm install
或yarn install
指令從專案的package.json
中安裝相依套件而生成。 -
public/: 這是放置靜態資源的資料夾,裡面的內容會被複製到建置輸出的根目錄。例如放置不需要經過建置處理的 HTML 檔案、圖像、字型等。
-
src/: 這是主要的原始碼目錄,包含整個 Vue.js 應用程式的原始碼,包括元件、樣式、JavaScript 檔案等。
-
jsconfig.json: 這個檔案用於設定 JavaScript 專案的選項,例如指定專案的根目錄、路徑別名、編譯選項等。它用於提供編輯器更好的 IntelliSense 和程式碼導覽功能。
-
package-lock.json: 這個檔案是 npm 5 以後版本中引入的,用於鎖定安裝時的相依套件版本,以確保不同環境下安裝的相依套件版本一致性。
-
vue.config.js: 這是一個可選的設定檔,用於設定 Vue CLI 專案的一些建置配置,例如代理設定、自訂 webpack 配置等。你可以在這裡修改建置行為和設定。
有關Vue參考資料與文章: