zoukankan      html  css  js  c++  java
  • 创建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来配置项目。

  • 相关阅读:
    React元素渲染
    初识JSX
    微信小程序复制文本到剪切板
    微信小程序报错request:fail url not in domain list
    小程序,通过自定义编译条件,模拟推荐人功能
    积分抵扣逻辑
    微信小程序 switch 样式
    tomcat 配置开启 APR 模式
    tomcat8 传输json 报错 Invalid character found in the request target. The valid characters are defined in RFC 3986
    c++数组初始化误区
  • 原文地址:https://www.cnblogs.com/ChallengeEverything/p/9905765.html
Copyright © 2011-2022 走看看