Qrs是一个轻量级的纯 JavaScript 前端框架,提供了虚拟 DOM、组件化开发、响应式数据绑定、异步组件支持、路由管理、状态管理、AJAX、MOCK、事件总线等功能,同时支持服务端渲染和插槽功能,并提供UI样式库及对应的36个js组件、微应用支持、QrsPress静态网站生成器。。
index.js:导出了多个重要的功能和变量,如Component、reactive、createElem等。router.js:引入index.js中的部分功能,用于路由管理。store.js:用于状态管理。fetch.js:用于网络请求。dom.js:用于dom的操作,类似jQuery,并可在dom<=>Component和dom<=>VNode间切换。typeCheck.js:用于类型检查。microApp.js:提供微应用功能, 示例在examples\microApp下。ui/base.scss:提供了基础的样式文件。components/*.js:提供了多个组件。QrsPress/:QrsPress静态网站生成器。
- 响应式系统:通过
reactive函数实现数据的响应式。 - 元素创建:使用
createElem函数创建 DOM 元素。 - 组件化开发:提供
Component类支持组件化开发。 - 应用创建:
createApp函数用于创建应用实例。
npm installnpm run devnpm run build├── core/
│ ├── dom.js
│ ├── index.js
│ ├── fetch.js
│ ├── index.js
│ ├── router.js
│ ├── store.js
│ ├── typeCheck.js
│ └── ui/
│ │ └── base.scss
│ └── components/
│ └── Button.js
│ └── ...
├── dist/
├── index.html
├── main.js
├── node_modules/
├── package-lock.json
├── package.json
├── src/
└── vite.config.js
Button,
Card,
Input,
Modal,
Nav,
Pagination,
Select,
Tag,
Progress,
Table,
Message,
DatePicker,
Upload,
Rating,
TimePicker,
ColorPicker,
Switch,
Toast,
Spinner,
Tabs,
Notification,
Loading,
...
- 使用
core/components/index.js引入使用,简单示例在main.js中。
- 全部使用说明在
/docs目录下。 - 请确保 Node.js 环境已正确安装。
- 开发过程中可根据需要修改
vite.config.js配置文件。