回上一頁

VueJS初始架構&安裝 開發起頭

此篇開發環境使用 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目錄結構說明

  1. node_modules/: 這是包含專案相依模組的資料夾。通常透過 npm installyarn install 指令從專案的 package.json 中安裝相依套件而生成。

  2. public/: 這是放置靜態資源的資料夾,裡面的內容會被複製到建置輸出的根目錄。例如放置不需要經過建置處理的 HTML 檔案、圖像、字型等。

  3. src/: 這是主要的原始碼目錄,包含整個 Vue.js 應用程式的原始碼,包括元件、樣式、JavaScript 檔案等。

  4. jsconfig.json: 這個檔案用於設定 JavaScript 專案的選項,例如指定專案的根目錄、路徑別名、編譯選項等。它用於提供編輯器更好的 IntelliSense 和程式碼導覽功能。

  5. package-lock.json: 這個檔案是 npm 5 以後版本中引入的,用於鎖定安裝時的相依套件版本,以確保不同環境下安裝的相依套件版本一致性。

  6. vue.config.js: 這是一個可選的設定檔,用於設定 Vue CLI 專案的一些建置配置,例如代理設定、自訂 webpack 配置等。你可以在這裡修改建置行為和設定。

 

有關Vue參考資料與文章:

https://jamesshieh.medium.com/%E4%B8%80%E5%A4%A9%E6%90%9E%E6%87%82vue-js%E7%9A%84%E6%8A%80%E8%A1%93%E5%AE%9A%E4%BD%8D-a556a4bf8a4f