First起步
讲述如何使用标准模板创建第一个AXUI页面；引用js和css文件的多种方式；提供codepen在线示例；开始使用AXUI前端框架。
使用之前
AXUI前端框架采用CSS3和HTML5标准，并广泛使用了两者所支持的功能。在预览文档时，建议使用支持CSS3和HTML5的现代浏览器，如Chrome、Firefox和Edge，以确保最佳显示效果。
该框架基于现代JavaScript开发，使用了包括ES6及更高版本的多种新特性。在修改框架之前，请确保熟悉现代JavaScript的基础知识，以便更好地理解和应用框架的功能。
规范声明
<!DOCTYPE>声明必须位于页面文档中的第一行，您可以使用html4.01类型，该类型文档对于标记和属性的语法要求并不是很严格，兼容性好，可以与html5标签混写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
当然您可以使用html5类型，简单定义即可，但是需要了解html5的规范。详见https://www.w3cschool.cn/html5/html5-syntax.html。
因为html5是未来网页的标准，故推荐使用。
<!DOCTYPE HTML>
适配声明
写在head中的meta标签在页面适配中有重要意义，以下是本框架整理的适配标签，复制即可使用。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="format-detection" content="email=no" />
<meta name="wap-font-scale" content="no" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
以CDN形式引用
AXUI的核心文件ax.js和ax.css托管在NPM平台上，并使用unpkg加速，可点击这里访问代码库。
如果需要引用最新的文件，可以使用以下地址：
<link href="https://unpkg.com/@codady/axui/dist/css/ax.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/@codady/axui/dist/js/ax.js" type="text/javascript" charset="utf-8"></script>
或者
<link href="https://unpkg.com/@codady/axui/dist/css/ax.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/@codady/axui/dist/js/ax.min.js" type="text/javascript" charset="utf-8"></script>
如果需要使用指定版本，在已知版本号的前提下使用以下地址：
<link href="https://unpkg.com/@codady/axui@[版本号]/dist/css/ax.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/@codady/axui@[版本号]/dist/js/ax.js" type="text/javascript" charset="utf-8"></script>
或者
<link href="https://unpkg.com/@codady/axui@[版本号]/dist/css/ax.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/@codady/axui@[版本号]/dist/js/ax.min.js" type="text/javascript" charset="utf-8"></script>
由于本框架支持对节点以attribute属性的方式应用实例，所以需要页面完成加载之后立即执行一次初始化，所以我们建议把js文件放在页面最底部并且使用onload事件，举例如下：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@codady/axui/dist/css/ax.css" rel="stylesheet" type="text/css" >
</head>
<body>
页面内容
<script src="https://unpkg.com/@codady/axui/dist/js/ax.js" type="text/javascript" charset="utf-8" onload="ax.init()"></script>
</body>
</html>
提供一个在codepen上创建的模板，供大家食用。
以module方式引用
CDN的另一种引用方式，即在网页中以module模块的方式引入js文件，不过此时应该使用esm格式。
esm格式文件有两种导出方式：export {} 和export default。
- 如果明确要导入的模块或变量相对独立，那么可以使用import {module1,module2} from 'ax.esm.js'方式导入
- 如果不确定要导入的模块是否使用了其他模块，那么可以使用import ax from 'ax.esm.js'方式导入
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@codady/axui/dist/css/ax.css" rel="stylesheet" type="text/css" >
</head>
<body>
页面内容
<script type='module'>
import ax from 'https://unpkg.com/@codady/axui/dist/js/ax.esm.js';
console.log(ax);
//如果明确模块的独立性，那么import {module1,module2}这种方式更优
</script>
</body>
</html>
提供一个在codepen上创建的模板，供大家食用。
node本地环境
步骤一：部署环境
确保本地部署node环境以及webpack或rollup打包程序之后，可在vscode中使用以下代码下载到本地环境：
npm i @codady/axui
步骤二：导入模块
UMD格式文件也可以执行导入，但是只能整体导入；而ESM格式文件即可以整体导入，也支持单个模块导入，而且ESM格式天然支持import和export；所以还是推荐在node环境中使用ESM文件进行导入和导出。
ESM导入模块有两种方式：
方式1：整体导入
import ax from './node_modules/@codady/axui/dist/js/ax.esm.js';
import './node_modules/@codady/axui/css/ax.css';
console.log(ax,ax.Popup)
方式2：按模块导入：
//esm模块会自动treeshaking
import {Popup,Dialog} from './node_modules/@codady/axui/dist/js/ax.esm.js';
import './node_modules/@codady/axui/css/ax.css';
console.log(Popup,Dialog)
如果你是专业开发者，需要使用每个模块的Typescript文件和Less文件，以便做系统集成或二次开发，请移步到资源下载栏目下载src文件和types文件。
标准html结构
结合以上代码合成标准页面html结构，由于网页是从头到尾进行顺序加载的，根据我们的项目经验，最好将引用的css文件放在头部，把js文件放在尾部。以下代码复制即可使用。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="format-detection" content="email=no" />
<meta name="wap-font-scale" content="no" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面标题</title>
<meta name="keywords" content="页面关键字" />
<meta name="description" content="页面描述" />
<link href="https://unpkg.com/@codady/axui/dist/css/ax.css" rel="stylesheet" type="text/css" >
</head>
<body>
页面内容
<script src="https://unpkg.com/@codady/axui/dist/js/ax.js" type="text/javascript" charset="utf-8" onload="ax.init()"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {
//js内容
});
</script>
</body>
</html>
提供一个在codepen上创建的模板，供大家食用。
当然如果你使用标准html5写法，而且仅仅在pc上显示，可以做很多简化。以下代码复制即可使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>页面标题</title>
<meta name="keywords" content="页面关键字" />
<meta name="description" content="页面描述" />
<link href="https://unpkg.com/@codady/axui/dist/css/ax.css" rel="stylesheet" type="text/css" >
</head>
<body>
页面内容
<script src="https://unpkg.com/@codady/axui/dist/js/ax.js" type="text/javascript" charset="utf-8" onload="ax.init()"></script>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {
//js内容
});
</script>
</body>
</html>
文件运行
本框架的演示文件使用php格式，如果您下载的文件包含php文件，请在本地搭建php服务器环境。
推荐使用wamp或phpstudy搭建php服务器环境，一路安装即可。wamp和phpstudy在诸多软件下载站均有下载。
