Aurelia CLI 基礎知識解釋

此示例假定你按照示例中的說明進行設定 ： 為 aurelia-cli 設定環境本文件說明。

建立一個新專案

• 在主機主機作業系統中，開啟終端（在我的情況下是 Mac OS）

• $cd /path/to/project/vagrant

• $vagrant up（啟動 VM GUI）

• 通過 UI 登入 VM

  • 使用者：vagrant / PW：vagrant
  • $startx
  • Windows X 啟動 Gnome 會話
  • 在 VM 中開啟終端

• $cd /home/vagrant

• $au new（啟動一系列提示設定專案）

  • 提示： 請在下面輸入新專案的名稱。
  • $[aurelia-app]> MyProject（按 Enter 鍵）（這將是專案主目錄的名稱）
  • 提示： 你要使用預設設定還是自定義你的選擇？
  • $[Default ESNext] > 3（按 Enter 鍵）（自定義選項）
  • 提示： 你想用什麼轉換器？
  • $[Babel] >（按 Enter 鍵）（讓我們使用 Bable 將 ESNext 轉換為 ES5）
  • 提示： 你想使用什麼 css 處理器？
  • $[none] > 3（如果你想使用 Sass 作為你的 CSS）
  • 提示你是否要配置單元測試？
  • $[Yes] > 2（為簡單起見，不要設定測試）
  • 提示你的預設程式碼編輯器是什麼？
  • $[Visual Studio Code] > 2（Atom，如果你按照本文件的設定進行操作）
  • 輸出設定摘要
    • 專案配置
    • 名稱： MyProject
    • 平臺： 網路
    • Transpiler： Babel
    • CSS 處理器： Sass
    • 單元測試執行器： 無
    • 編輯： Atom
  • 提示你是否要建立此專案？
  • $[Yes] > 1（按 Enter 鍵）
  • 提示你是否要安裝專案依賴項？
  • $[Yes] > 1（按 Enter 鍵）

  建立目錄結構並通過 npm 下載所有依賴項。

  你現在已經完成並準備開始建設了！

基本專案目錄結構

• /家庭/流浪者/ MyProject 的
  • / aurelia_project（配置檔案，Gulp 任務，生成器）
  • / scripts（Builds 在這裡釋出）
  • / src（這是你將主要畏縮的地方）
    • 資源（將你的影象/字型/圖示放在這裡。）
    • app.js（預設的 View-Model）
    • app.html（Aurelia 應用程式的預設檢視。主要入口點）
    • environment.js
    • main.js
  • favicon.ico 的
  • index.html（無需編輯此檔案）
  • package.json（npm install –save 為此檔案新增條目）

VM 上的開發週期

• 開啟 Atom，新增專案資料夾：/ home / vagrant / MyProject
  • 這是你將編輯 html / js / scss 檔案的位置
• 開啟終端：
  • $au run --watch（構建應用程式，啟動 BrowserSynch Web 伺服器）
• 在 VM 中開啟所選的 Web 瀏覽器，然後轉到： http：// localhost：9000
  • 在編輯程式碼並儲存檔案時，你將看到更新
• 如果你使用上面的 Vagrantfile 進行設定，那麼你可以在 Host OS（Mac OS）中使用瀏覽器並轉到： http ： //192.168.0.3 ： 9000