如何從零開始設置最小Aurelia項目

安裝Aurelia導航骨架應用程序時，要使用所有第三方模塊和現成的腳本來完成任務非常困難。對於我理解了大部分內容的人來說，如果我不能一次一個腳印地學習，就很難學習。出於這個原因，我希望自己創建一個最小的Aurelia項目，然後在我進行時增加它的複雜性。如何從零開始設置最小Aurelia項目

主要問題：建立一個簡單的Aurelia項目需要哪些步驟？

假設：

我已經有一個節點服務器後端，可以提供文件服務。
我想使用ES6/7（Babel）。
我想使用system.js進行模塊加載。
沒有單位或e2e測試，沒有樣式，沒有文檔。
儘可能少的節點和jspm模塊。

請在每一步中做一點解釋，並說明必要的Aurelia文件是什麼和做什麼。

我會非常感謝任何幫助:)

來源

2015-08-18 micnil

安裝jspm命令行界面。 jspm是客戶端依賴項的包管理器。閱讀它...這很棒。

npm install jspm -g

爲該項目創建一個文件夾。

mkdir minimal 
cd minimal

初始化JSPM客戶包管理... 接受所有默認設置，除了使用巴別transpiler選項（VS Traceur）

jspm init

啓用所有花哨通過添加以下行切削刃巴貝爾善在你的config.js的babelOptions（jspm init創建config.js文件）：

System.config({ 
    defaultJSExtensions: true, 
    transpiler: "babel", 
    babelOptions: { 
    "stage": 0,  <------ add this to turn on the hotness 
    "optional": [ 
     "runtime" 
    ] 
    }, 
    ...

安裝奧裏利亞

jspm install aurelia-framework 
jspm install aurelia-bootstrapper

創建一個index.html，使用SystemJS加載程序（jspm的模塊加載程序對應部分）啓動Aurelia。

<!doctype html> 
<html> 
    <head> 
    <title>Aurelia</title> 
    </head> 
    <body aurelia-app> 
    <h1>Loading...</h1> 

    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <script> 
     System.import('aurelia-bootstrapper'); 
    </script> 
    </body> 
</html>

當奧裏利亞自舉這將尋找一個默認視圖和視圖模型...創建它們：

app.js

export class App { 
    message = 'hello world'; 
}

應用。HTML

<template> 
    ${message} 
</template>

安裝杯和瀏覽器同步服務中的文件：

npm install gulp 
npm install --save-dev browser-sync

添加gulpfile.js

var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 

// this task utilizes the browsersync plugin 
// to create a dev server instance 
// at http://localhost:9000 
gulp.task('serve', function(done) { 
    browserSync({ 
    open: false, 
    port: 9000, 
    server: { 
     baseDir: ['.'], 
     middleware: function (req, res, next) { 
     res.setHeader('Access-Control-Allow-Origin', '*'); 
     next(); 
     } 
    } 
    }, done); 
});

啓動Web服務器。

gulp serve

瀏覽到應用程序：

http://localhost:9000

完成。

這是你的項目結構將是什麼，你就完蛋了的時候，如：

project

注：這僅僅是一個快速和骯髒的設置。這不一定是推薦的文件夾結構，並且加載器使用babel來即時傳輸js文件。您需要根據您的需求進行微調。這裏的目的是向你展示如何以儘可能少的步驟起牀和跑步。

來源

2015-08-18 20:15:17

如何將另一個npm軟件包添加到像aurelia這樣的項目中？例如，我一直在嘗試集成tumblr.js api，但我似乎無法從我的任何模塊訪問它 – Felipe

新的jspm版本堵塞了所有東西 - 我將在整理後更新本指南 –

已aurlelia開發人員解決了這個問題？一個人應該如何用簡單的設置開始一個新項目？ – northamerican

查閱專門編寫的文章https://github.com/aurelia-guides/aurelia-guides.md-articles/blob/master/Building-Skeleton-Navigation-From-Scratch.md以簡化對Aurelia的介紹。

來源

2015-09-23 21:49:58 nikivancic

我正在使用Java Play項目，但仍想使用HTML文件的Scala轉換。因此，我做了以下

下載aurelia-core通過the basic aurelia project可用，這是從the quickstart tutorial
鏈接獲取SystemJS使用WebJars："org.webjars.npm" % "systemjs" % "0.19.38"
Since systemjs-plugin-babel is currently unavailable as webjar，我跑npm install systemjs-plugin-babel和複製所獲取的文件到assets directroy

HTML代碼是這樣的：

<div aurelia-app="/assets/aurelia/main"> 
    ...loading data... 
</div> 
<script src="@routes.Assets.versioned("lib/systemjs/dist/system.js")" type="text/javascript"></script> 
<script src="@routes.Assets.versioned("javascripts/aurelia-core.min.js")" type="text/javascript"></script> 
<script> 
    System.config({ 
    map: { 
     'plugin-babel': '@routes.Assets.versioned("javascripts/systemjs-plugin-babel/plugin-babel.js")', 
     'systemjs-babel-build': '@routes.Assets.versioned("javascripts/systemjs-plugin-babel/systemjs-babel-browser.js")' 
    }, 
    transpiler: 'plugin-babel', 
    packages: { 
     '/assets/aurelia': { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
    System.import('aurelia-bootstrapper'); 
</script>

使用main.js等從the quickstart tutorial

來源

2016-09-24 23:28:50 koppor

Aurelia酒店文檔有一個非常好的chapter解釋一下簡單的應用程序的各個部件沒有，一步一個腳印的時間。這可能是一個好的開始，不要讓Bootstrap和類似的依賴項壓倒你。

另請注意，Aurelia現在有一個CLI interface，它簡化了從頭開始設置項目。

來源

2016-11-23 12:38:09 martin