14 Star 4 Fork 2

weblabsw / nodomuidev

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

nodomui是基于nodom3.0的一套为开发者、设计者和产品经理准备的前端组件库。

源码

gitee:https://gitee.com/weblabsw/nodomuidev.git

npm 安装及编译

  1. 安装依赖包后,安装nodom3,在命令行执行:
npm i
npm install nodom3
  1. 开始编译,生成nodomui.js及相关文件,在命令行执行:

生成nodomui.*.js文件

npm run build

生成nodom.css文件

npm run sass

文件结构

  1. 组件源码目录:./plugins

  2. 组件样式远嘛目录:./sass

编译js文件目录:

  • 开发环境:./dist/nodomui.js
  • 生产环境:./dist/nodomui.min.js

编译css文件目录:

  • 开发环境./example/css/nodomui.css
  • 生产环境./example/css/nodomui.min.css

实例所在目录:./examples,其中html文件展示组件效果及属性方法介绍,具体实现方式参考其子目录./app的组件名文件夹,example入口文件在 ./examples/index.html

版本

版本信息参考版本信息

引入

引入完整的nodomui.js,使用ES Module实现模块化,此外还需引入组件相关css文件nodomui.css,使用方式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>nodomui example - grid usage</title>
    <link rel="stylesheet" type="text/css" href="css/nodomui.css" />
</head>
<body>
</body>
<script type='module'>
    import{Nodom,Module} from '/dist/nodomui.js'
    class gridModule extends Module{
      //your code
    }	
    Nodom.app(gridModule);
</script>
</html>

简单介绍

注意:建议拥有html,css及js基础,此外需要了解一定的nodom相关知识。

接下来,你可以通过标签的形式使用nodomui的组件,如:<ui-button />来使用按钮组件。nodomui的其他组件的使用,也都是通过使用ui开头的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>nodomui example - button usage</title>
    <link rel="stylesheet" type="text/css" href="css/nodomui.css" />
</head>
<body>
    <div></div>
</body>
<script type='module'>
    import{Nodom,Module} from '/dist/nodomui.js'
    class buttonModule extends Module {
        template(props) {
            return `
                <div>
                    <ui-button size="small"  title='small' /> 
                    <ui-button size="normal"  title='normal' />
                    <ui-button size="large"  title='large' />
                </div>
            `;
        }
    }
    Nodom.app(buttonModule,'div');
</script>
</html>

开始使用

至此,一个基于nodom和 nodomui 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法及相关属性,请运行并参阅说明文档--./examples/index.html

空文件

简介

nodomui 插件内部开发版本 展开 收起
TypeScript 等 4 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/weblabsw/nodomuidev.git
git@gitee.com:weblabsw/nodomuidev.git
weblabsw
nodomuidev
nodomuidev
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891