建立Aurelia專案

2022-08-12 20:21:22 字數 2328 閱讀 8453

什麼是aurelia?

aurelia 是乙個新的開源的,基於web標準的mvvm框架,是乙個現代化的js模組的集合。

aurelia提供了豐富的plugin,例如國際化,驗證,模態框,ui視覺化等。

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

aurelia 是乙個較新穎的專案,但是在github上也是備受關注,現在的star數量已經超過了1w+。

有興趣的小夥伴可以看一下這個git專案:

以及它的官網:

話不多說接下來介紹幾種搭建aurelia專案的方式。

先全域性安裝aurelia 腳手架 npm install -g aurelia-cli

在通過輸入命令列 au new

接著跟著提示一步一步完成新專案的搭建

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

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

1. 建立空資料夾,之後切換到該資料夾下,用npm init,建立package.json,可以按照下圖新增依賴,之後npm install 一下

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

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

html-webpack-plugin: 處理html模板

3. 之後在該資料夾下,建立webpack.config.js

mode: 打包模式

resolve:從**去讀取依賴檔案

output: 打包後的檔案放置於哪個資料夾

watch:檢測檔案變化

devtool:**的sourcemap

devserver:指定伺服器從**去讀取資源

module:rules 定義了讀取檔案的loader

plugins:外掛程式

4. 根目錄新增index.html

5. 接著來看這個配置檔案,main.js

這邊需要注意的是,我這裡使用的是js檔案,所以引數au 沒有去指定型別,但其實au的型別就是上面import 中的aurelia

可以直接使用預設的configuration。

這個檔案會呼叫au.start() 來啟動aurelia,以及setroot來設定專案的根節點

在aurelia中建立模板是一件非常簡單的事情,新增「-」命名連線的html檔案以及同名的js或ts檔案,之後新增如下**,那麼乙個標準的模板就建立完畢了。

除了標準模板之外,也可以建立乙個純檢視的模板(只有html檔案)或者建立乙個沒有檢視的檔案(只有ts或者js檔案)

7. 專案結構

8 完成上述配置之後,可以通過命令列 npm run dev來啟動專案

最後開啟瀏覽器看到helloworld!,那麼簡單的aurelia專案就搭建完畢了。

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

如果之後有需要的話,會去嘗試一下用jspm來配置專案。

django專案(建立專案)

django admin startproject django demo 在專案中的settings.py中註冊應用 django.contrib.admin django.contrib.auth django.contrib.contenttypes django.contrib.sessio...

Django 建立專案

c python27 scripts python django admin.py startproject sit c python27 scripts dir 驅動器 d 中的卷是 程式 卷的序列號是 6e32 1e04 c python27 scripts 的目錄 2011 04 13 11 ...

nodejs建立專案

首先,要安裝express和ejs或jade模組。npm install g express npm install g ejs 其次,安裝mysql,stylus,jquery等模組。在開發室,npm應安裝到指定專案資料夾中。這時不要加 g。在指定目錄下安裝,便會安裝到該目錄下。express命令...