創建Aurelia項目


什么是Aurelia?

Aurelia 是一個新的開源的,基於web標准的mvvm框架,是一個現代化的js模塊的集合。

Aurelia提供了豐富的plugin,例如國際化,驗證,模態框,UI可視化等。

其強大的binding模塊和template模塊,能夠幫助你更專注於你的業務邏輯,寫出清晰高效的代碼。

Aurelia 是一個較新穎的項目,但是在github上也是備受關注,現在的star數量已經超過了1W+。

有興趣的小伙伴可以看一下這個git項目:https://github.com/aurelia/framework

以及它的官網:https://aurelia.io/

 

話不多說接下來介紹幾種搭建Aurelia項目的方式。

1. Aurelia-Cli 腳手架

先全局安裝Aurelia 腳手架 npm install -g aurelia-cli

在通過輸入命令行 au new

接着跟着提示一步一步完成新項目的搭建

如果看到這個Happy Coding,那么就可以切換到該目錄下,通過au run 命令,來啟動項目 

 

2. Webpack

雖然aurelia-cli中也有選項可以快速創建基於webpack的項目,但是腳手架搭建出來的項目個人感覺東西比較多,比較復雜,雖然可以直接上手開發,但還是希望能夠了解一下這些個配置文件的意義。

所以這里會講解如何用webpack,一步一步搭建aurelia項目。 項目可以基於TS,或者JS,我這里為了少加ts相關的loader,就選擇使用了js。

1. 創建空文件夾,之后切換到該文件夾下,用npm init,創建package.json,可以按照下圖添加依賴,之后npm install 一下

html-loader: html loader

webpack,webpack-cli,webpack-dev-server: webpack打包,開發需要的package

aurelia-webpack-plugin: 幫助webpack理解以及解析aurelia代碼

html-webpack-plugin: 處理html模板

 

部署需要的依賴就兩個: aurelia-bootstrapper, aurelia-framework

3. 之后在該文件夾下,創建webpack.config.js

 

mode: 打包模式

resolve:從哪里去讀取依賴文件

entry:如果使用aurelia構建項目,那么項目的入口文件必然是aurelia-bootstrapper,這一點需要注意

output: 打包后的文件放置於哪個文件夾

watch:檢測文件變化

devtool:代碼的sourcemap

devserver:指定服務器從哪里去讀取資源

module:rules 定義了讀取文件的loader

plugins:插件

4. 根目錄添加index.html

這是項目的啟始頁,需要注意的是aurelia-app 這個屬性指定的文件(配置)

5. 接着來看這個配置文件,main.js

這邊需要注意的是,我這里使用的是js文件,所以參數au 沒有去指定類型,但其實au的類型就是上面import 中的Aurelia

可以直接使用默認的configuration。

這個文件會調用au.start() 來啟動aurelia,以及setRoot來設置項目的根節點

6. 接着來看如何添加app 模板

在aurelia中創建模板是一件非常簡單的事情,添加“-”命名連接的html文件以及同名的js或ts文件,之后添加如下代碼,那么一個標准的模板就創建完畢了。

除了標准模板之外,也可以創建一個純視圖的模板(只有html文件)或者創建一個沒有視圖的文件(只有ts或者js文件)

 

7. 項目結構

8 完成上述配置之后,可以通過命令行 npm run dev來啟動項目

最后打開瀏覽器看到HelloWorld!,那么簡單的aurelia項目就搭建完畢了。

 

除了上述兩種方式之外,還可以使用JSPM或者官網提供直接提供的項目骨架。

如果之后有需要的話,會去嘗試一下用JSPM來配置項目。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM