First起步
讲述如何使用标准模板创建第一个AXUI页面；引用js和css文件的多种方式；提供codepen在线示例；开始使用AXUI前端框架。
使用之前
AXUI前端框架采用css3和html5标准，使用了许多css3和html5所支持的代码，在预览文档的时候务必使用支持css3和html5的浏览器，比如chrome和firefox；AXUI前端框架基于JavaScript的es6版本开发，采用js较新的特性，在修改本框架前请务必了解es6的基础知识。
规范声明
<!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>
由于本框架支持对节点以属性的方式应用实例，所以需要页面完成加载之后执行一次初始化，所以我们建议把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>
网页以module方式引用
CDN的另一种引用方式，即在网页中以module模块的方式引入js文件，不过此时应该使用esm格式。
<!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);
</script>
</body>
</html>
提供一个在codepen上创建的模板，供大家食用。
import本地环境
步骤一：确保本地部署node环境以及webpack或rollup打包程序之后，使用以下代码下载到本地环境：
npm i @codady/axui
步骤二：使用以下代码全局引用（需要注意相对路径）：
import ax from './node_modules/@codady/axui/dist/js/ax.esm.js';
import './node_modules/@codady/axui/css/ax.css';
步骤三：v3正式版推出后将提供ts版本并可按需引用，敬请期待。
页面标准结构
结合以上代码合成标准页面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在诸多软件下载站均有下载。
