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.39000