zipaper

Zipaper

一个简单易用的小巧前端框架

如何使用？

首先，你需要安装必要的依赖：

npm install --save zipaper

然后，基本的项目结构如下：

- components 可选，自定义组件
- directives 可选，自定义指令
- pages 页面（和自定义组件一样）
- main.js 入口
- router.config.js 定义路由
- index.html 
- package.json

在入口文件挂载好必要的内容后，启动即可，比如：

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")) // 挂载到页面

具体页面、组件、指令和路由的定义，你可以访问 在线文档 进行了解。

此外，在实际开发中，为了简化开发者的麻烦，一般template部分不会直接手写，可以借助库 xhtml-to-json 来辅助：

npm install --save-dev xhtml-to-json

然后，使用其把html字符串变成需要的template格式：

const { parseTemplate } = require("xhtml-to-json");

let template = parseTemplate("html字符串").toJson();

这里正常是在nodejs环境，比如开发一个webpack的loader。

一个完整的项目搭建用例，你可以访问： Zipaper-project

版权

MIT License

Copyright (c) zxl20070701 走一步，再走一步