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