# [Zipaper](https://github.com/oi-contrib/Zipaper)
一个简单易用的小巧前端框架
## 如何使用？
首先，你需要安装必要的依赖：
```
npm install --save zipaper
```
然后，基本的项目结构如下：
```
- components 可选，自定义组件
- directives 可选，自定义指令
- pages 页面（和自定义组件一样）
- main.js 入口
- router.config.js 定义路由
- index.html
- package.json
```
在入口文件挂载好必要的内容后，启动即可，比如：
```js
import { createApp } from "zipaper"
import App from "./pages/App/index.js"
import router from "./router.config.js"
import uiInput from "./components/ui-input/index.js"
import zMaxlen from "./directives/z-maxlen.js"
createApp(App)
.use(router) // 路由
.component("ui-input", uiInput) // 注册组件
.directive("maxlen", zMaxlen) // 注册指令
.mount(document.getElementById("root")) // 挂载到页面
```
具体页面、组件、指令和路由的定义，你可以访问[ 在线文档 ](https://oi-contrib.github.io/Zipaper)进行了解。
此外，在实际开发中，为了简化开发者的麻烦，一般template部分不会直接手写，可以借助库[ xhtml-to-json ](https://github.com/oi-contrib/xhtmlToJson)来辅助：
```
npm install --save-dev xhtml-to-json
```
然后，使用其把html字符串变成需要的template格式：
```js
const { parseTemplate } = require("xhtml-to-json");
let template = parseTemplate("html字符串").toJson();
```
这里正常是在nodejs环境，比如开发一个webpack的loader。
一个完整的项目搭建用例，你可以访问： [Zipaper-project](https://github.com/rapid-start/Zipaper-project)
## 版权
MIT License
Copyright (c) [zxl20070701](https://zxl20070701.github.io/notebook/home.html) 走一步，再走一步