开源项目 Aurelia Contacts 使用教程

开源项目 Aurelia Contacts 使用教程

app-contactsA sample app that lets you browse and edit contacts.项目地址:https://gitcode.com/gh_mirrors/ap/app-contacts

1. 项目的目录结构及介绍

/aurelia-app-contacts
├── src
│   ├── app.html
│   ├── app.js
│   ├── contacts
│   │   ├── contact-detail.html
│   │   ├── contact-detail.js
│   │   ├── contact-list.html
│   │   ├── contact-list.js
│   │   ├── contacts.html
│   │   ├── contacts.js
│   │   ├── contacts-router.js
│   │   ├── contacts-service.js
│   │   ├── contacts-store.js
│   ├── main.js
│   ├── resources
│   │   ├── attributes
│   │   ├── binding-behaviors
│   │   ├── value-converters
│   ├── styles
│   │   ├── app.css
│   ├── index.html
├── config
│   ├── aurelia.json
├── package.json
├── README.md

目录结构介绍

• src: 包含项目的源代码文件。
  • app.html 和 app.js: 主应用文件。
  • contacts: 包含与联系人相关的视图和控制器。
    • contact-detail.html 和 contact-detail.js: 联系人详情视图和控制器。
    • contact-list.html 和 contact-list.js: 联系人列表视图和控制器。
    • contacts.html 和 contacts.js: 联系人主视图和控制器。
    • contacts-router.js: 联系人路由配置。
    • contacts-service.js: 联系人服务。
    • contacts-store.js: 联系人数据存储。
  • main.js: 应用入口文件。
  • resources: 包含自定义属性、绑定行为和值转换器。
  • styles: 包含应用的样式文件。
  • index.html: 应用的入口页面。
• config: 包含项目配置文件。
  • aurelia.json: Aurelia 配置文件。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

main.js

import {Aurelia} from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}

文件介绍

• main.js: 应用的入口文件，负责配置和启动 Aurelia 应用。
  • 导入 Aurelia 框架和环境配置。
  • 配置 Aurelia 使用标准配置和资源。
  • 根据环境变量启用开发日志和测试插件。
  • 启动 Aurelia 应用并设置根视图。

3. 项目的配置文件介绍

aurelia.json

{
  "name": "aurelia-app-contacts",
  "type": "project",
  "platform": {
    "id": "web",
    "displayName": "Web"
  },
  "transpiler": {
    "id": "babel",
    "fileExtension": ".js"
  },
  "build": {
    "options": {
      "server": "dev",
      "extractCss": "prod",
      "coverage": false
    }
  },
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors"
  },
  "dependencies": [
    {
      "name": "aurelia-framework",
      "path": "../node_modules/aurelia-framework/dist/amd",
      "main": "aurelia

app-contactsA sample app that lets you browse and edit contacts.项目地址:https://gitcode.com/gh_mirrors/ap/app-contacts