neko-ui 2.6.6 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -6
- package/es/@moneko/routes/index.d.ts +1 -1
- package/es/back-top/style.js +1 -3
- package/es/back-top/style.js.map +1 -1
- package/es/button/style.js.map +1 -1
- package/es/capture-screen/index.js +1 -1
- package/es/capture-screen/index.js.map +1 -1
- package/es/cron/begin-interval.d.ts +1 -0
- package/es/cron/index.js +1 -1
- package/es/cron/index.js.map +1 -1
- package/es/cron/item.d.ts +1 -0
- package/es/cron/period.d.ts +1 -0
- package/es/cron/some.d.ts +1 -0
- package/es/date-picker/index.js +1 -1
- package/es/date-picker/index.js.map +1 -1
- package/es/img/style.js +0 -2
- package/es/img/style.js.map +1 -1
- package/es/index.d.ts +2 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/es/md/index.js +1 -1
- package/es/md/index.js.map +1 -1
- package/es/md-style/index.d.ts +2 -0
- package/es/{md/style.js → md-style/index.js} +9 -11
- package/es/md-style/index.js.map +1 -0
- package/es/menu/index.js +1 -1
- package/es/menu/index.js.map +1 -1
- package/es/modal/hooks.d.ts +5 -0
- package/es/modal/hooks.js +2 -0
- package/es/modal/hooks.js.map +1 -0
- package/es/modal/style.js +3 -4
- package/es/modal/style.js.map +1 -1
- package/es/notification/index.d.ts +59 -0
- package/es/notification/index.js +2 -0
- package/es/notification/index.js.map +1 -0
- package/es/notification/notification.d.ts +3 -0
- package/es/notification/notification.js +2 -0
- package/es/notification/notification.js.map +1 -0
- package/es/notification/queque.d.ts +46 -0
- package/es/notification/queque.js +2 -0
- package/es/notification/queque.js.map +1 -0
- package/es/notification/styles.d.ts +1 -0
- package/es/notification/styles.js +97 -0
- package/es/notification/styles.js.map +1 -0
- package/es/popover/index.js +1 -1
- package/es/popover/index.js.map +1 -1
- package/es/popover/style.js +1 -3
- package/es/popover/style.js.map +1 -1
- package/es/prism/css.js +1 -3
- package/es/prism/css.js.map +1 -1
- package/es/select/index.js +1 -1
- package/es/select/index.js.map +1 -1
- package/es/theme/index.js +10 -8
- package/es/theme/index.js.map +1 -1
- package/es/tree/index.d.ts +3 -99
- package/es/tree/index.js +1 -1
- package/es/tree/index.js.map +1 -1
- package/es/tree/register.d.ts +1 -0
- package/es/tree/register.js +2 -0
- package/es/tree/register.js.map +1 -0
- package/es/tree/type.d.ts +104 -0
- package/es/tree/type.js +2 -0
- package/es/tree/type.js.map +1 -0
- package/lib/@moneko/routes/index.d.ts +1 -1
- package/lib/back-top/style.js +1 -3
- package/lib/back-top/style.js.map +1 -1
- package/lib/button/style.js.map +1 -1
- package/lib/capture-screen/index.js +1 -1
- package/lib/capture-screen/index.js.map +1 -1
- package/lib/cron/begin-interval.d.ts +1 -0
- package/lib/cron/index.js +1 -1
- package/lib/cron/index.js.map +1 -1
- package/lib/cron/item.d.ts +1 -0
- package/lib/cron/period.d.ts +1 -0
- package/lib/cron/some.d.ts +1 -0
- package/lib/img/style.js +0 -2
- package/lib/img/style.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/md/index.js +1 -1
- package/lib/md/index.js.map +1 -1
- package/lib/md-style/index.d.ts +2 -0
- package/lib/{md/style.js → md-style/index.js} +8 -10
- package/lib/md-style/index.js.map +1 -0
- package/lib/menu/index.js +1 -1
- package/lib/menu/index.js.map +1 -1
- package/lib/modal/hooks.d.ts +5 -0
- package/lib/modal/hooks.js +2 -0
- package/lib/modal/hooks.js.map +1 -0
- package/lib/modal/style.js +3 -4
- package/lib/modal/style.js.map +1 -1
- package/lib/notification/index.d.ts +59 -0
- package/lib/notification/index.js +2 -0
- package/lib/notification/index.js.map +1 -0
- package/lib/notification/notification.d.ts +3 -0
- package/lib/notification/notification.js +2 -0
- package/lib/notification/notification.js.map +1 -0
- package/lib/notification/queque.d.ts +46 -0
- package/lib/notification/queque.js +2 -0
- package/lib/notification/queque.js.map +1 -0
- package/lib/notification/styles.d.ts +1 -0
- package/lib/notification/styles.js +97 -0
- package/lib/notification/styles.js.map +1 -0
- package/lib/popover/index.js +1 -1
- package/lib/popover/index.js.map +1 -1
- package/lib/popover/style.js +1 -3
- package/lib/popover/style.js.map +1 -1
- package/lib/prism/css.js +1 -3
- package/lib/prism/css.js.map +1 -1
- package/lib/theme/index.js +8 -6
- package/lib/theme/index.js.map +1 -1
- package/lib/tree/index.d.ts +3 -99
- package/lib/tree/index.js +1 -1
- package/lib/tree/index.js.map +1 -1
- package/lib/tree/register.d.ts +1 -0
- package/lib/tree/register.js +2 -0
- package/lib/tree/register.js.map +1 -0
- package/lib/tree/type.d.ts +104 -0
- package/lib/tree/type.js +2 -0
- package/lib/tree/type.js.map +1 -0
- package/package.json +23 -21
- package/umd/index.js +1 -1
- package/es/@introduce/api.md +0 -158
- package/es/@introduce/getting-started/api.md +0 -34
- package/es/@introduce/html/doc.md +0 -45
- package/es/@introduce/react/doc.md +0 -49
- package/es/@introduce/solid/doc.md +0 -39
- package/es/@introduce/vue/doc.md +0 -54
- package/es/@moneko/cli/doc.md +0 -211
- package/es/@moneko/config/api.md +0 -213
- package/es/@moneko/locales/doc.md +0 -130
- package/es/@moneko/mock/api.md +0 -177
- package/es/@moneko/request/api.md +0 -31
- package/es/@moneko/routes/doc.md +0 -81
- package/es/@moneko/sso/api.md +0 -158
- package/es/md/style.d.ts +0 -1
- package/es/md/style.js.map +0 -1
- package/lib/@introduce/api.md +0 -158
- package/lib/@introduce/getting-started/api.md +0 -34
- package/lib/@introduce/html/doc.md +0 -45
- package/lib/@introduce/react/doc.md +0 -49
- package/lib/@introduce/solid/doc.md +0 -39
- package/lib/@introduce/vue/doc.md +0 -54
- package/lib/@moneko/cli/doc.md +0 -211
- package/lib/@moneko/config/api.md +0 -213
- package/lib/@moneko/locales/doc.md +0 -130
- package/lib/@moneko/mock/api.md +0 -177
- package/lib/@moneko/request/api.md +0 -31
- package/lib/@moneko/routes/doc.md +0 -81
- package/lib/@moneko/sso/api.md +0 -158
- package/lib/md/style.d.ts +0 -1
- package/lib/md/style.js.map +0 -1
package/es/@introduce/api.md
DELETED
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
[TOC]
|
|
2
|
-
|
|
3
|
-
# 组件开发说明
|
|
4
|
-
|
|
5
|
-
!> 这里将会了解到如何开始一个新组件的开发、文档、案例demo
|
|
6
|
-
!> 文档将会通过源码中的 `interface`、`enum` 及对应的 `jsdoc` 实时生成
|
|
7
|
-
|
|
8
|
-
<div>
|
|
9
|
-
|
|
10
|
-
```treeview
|
|
11
|
-
项目根目录
|
|
12
|
-
`-- components
|
|
13
|
-
`-- hero
|
|
14
|
-
|-- index.tsx 源码
|
|
15
|
-
`-- README.mdx 生成文档路由 如果你不需要文档, 可以不用创建该文件
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
## 初始
|
|
21
|
-
|
|
22
|
-
!> 下面我们开始开发一个名为 hero 的组件
|
|
23
|
-
!> 在项目根目录/components 下新建一个组件名命名的文件夹, 用于存放 hero 源码
|
|
24
|
-
|
|
25
|
-
## hero
|
|
26
|
-
|
|
27
|
-
在 `components` 中新建 `hero` 文件夹
|
|
28
|
-
|
|
29
|
-
### index.tsx
|
|
30
|
-
|
|
31
|
-
在 `hero` 中新建文件: `index.tsx`
|
|
32
|
-
|
|
33
|
-
```tsx
|
|
34
|
-
// 组件源码
|
|
35
|
-
|
|
36
|
-
/** API
|
|
37
|
-
* @since 1.0.0
|
|
38
|
-
*/
|
|
39
|
-
export interface HeroProps {
|
|
40
|
-
/** 自定义类名 */
|
|
41
|
-
class?: string;
|
|
42
|
-
/** 描述文字 */
|
|
43
|
-
label: string;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function Hero(props: HeroProps) {
|
|
47
|
-
return <div class={props.class}>{props.label}</div>;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export default Hero;
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
在 `components/index.ts` 文件中导出
|
|
54
|
-
|
|
55
|
-
```js
|
|
56
|
-
export { default as Hero, type HeroProps } from './hero';
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
#### jsdoc
|
|
60
|
-
|
|
61
|
-
| 属性 | 描述 |
|
|
62
|
-
| ------- | --------------------------------------------------------------- |
|
|
63
|
-
| @since | 该API在此版本及之后生效 |
|
|
64
|
-
| @author | 作者, 一般填写 Github 用户名, 或者邮件地址 |
|
|
65
|
-
| @ignore | 不生成的列, 比如不需要 `必要` 这列单元格, 则 `@ignore optional` |
|
|
66
|
-
|
|
67
|
-
### README.mdx
|
|
68
|
-
|
|
69
|
-
文档路由, 用来生成对应的文档地址及导航菜单
|
|
70
|
-
在 `hero` 中新建文件: `README.mdx`
|
|
71
|
-
|
|
72
|
-
```md
|
|
73
|
-
---
|
|
74
|
-
title: 文档组件菜单标题
|
|
75
|
-
subtitle: 文档组件菜单副标题
|
|
76
|
-
type: 将文档进行分组
|
|
77
|
-
icon: 🔘
|
|
78
|
-
order: 0 # 顺序, 这部分为 yaml 语法
|
|
79
|
-
---
|
|
80
|
-
|
|
81
|
-
### 这是组件文档页面
|
|
82
|
-
|
|
83
|
-
> 描述
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
### examples
|
|
87
|
-
|
|
88
|
-
在 `hero` 中新建文件夹: `examples`
|
|
89
|
-
|
|
90
|
-
!> examples 下的 \*.md 文件将作为案例代码进行渲染
|
|
91
|
-
|
|
92
|
-
#### demo1.md
|
|
93
|
-
|
|
94
|
-
在 `examples` 中新建文件: `demo1.md`
|
|
95
|
-
|
|
96
|
-
```md
|
|
97
|
-
---
|
|
98
|
-
title: 这里描述代码块的标题, 比如 "最简单的使用方式"
|
|
99
|
-
description: 这里对代码块进行详细的说明, 每一个代码块都将作为一个完整的案例进行展示,并且可以直接在页面上修改实时渲染
|
|
100
|
-
order: 1 # 排序
|
|
101
|
-
---
|
|
102
|
-
|
|
103
|
-
<Hero label="label" />
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## 注意事项
|
|
107
|
-
|
|
108
|
-
### cssModule
|
|
109
|
-
|
|
110
|
-
- **\*.global.less 结尾命名的文件不会启用 cssModule**
|
|
111
|
-
|
|
112
|
-
- **cssModule 使用时,样式文件中以 - 连接单词,代码中使用时应通过驼峰导入,例如**
|
|
113
|
-
|
|
114
|
-
```less
|
|
115
|
-
// ./index.less
|
|
116
|
-
.user-name {
|
|
117
|
-
color: #000;
|
|
118
|
-
background-color: #fff;
|
|
119
|
-
}
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
```jsx
|
|
123
|
-
import styles from './index.less';
|
|
124
|
-
|
|
125
|
-
const Demo = () => {
|
|
126
|
-
return <div class={styles.userName}>{styles.userName}</div>;
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
export default Demo;
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
### 文档
|
|
133
|
-
|
|
134
|
-
文档地址根据 components 下的 `README.mdx` 文件根据所在目录生成
|
|
135
|
-
|
|
136
|
-
#### gfm
|
|
137
|
-
|
|
138
|
-
- **README.mdx 中默认不支持 gfm, 比如 table,如需要如需要使用可通过以下方式导入外部.md 文件在 .mdx 文件中使用**
|
|
139
|
-
|
|
140
|
-
```jsx
|
|
141
|
-
import readme from './readme.md?raw';
|
|
142
|
-
|
|
143
|
-
<n-md text={readme} />;
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
或者安装 [**remark-gfm**](https://www.npmjs.com/package/remark-gfm), 并在 `config/index.ts` 中配置, 这会导致 bundle 体积变大
|
|
147
|
-
|
|
148
|
-
```js
|
|
149
|
-
import remarkGfm from 'remark-gfm';
|
|
150
|
-
|
|
151
|
-
export default {
|
|
152
|
-
mdx: {
|
|
153
|
-
remarkPlugins: [remarkGfm],
|
|
154
|
-
},
|
|
155
|
-
};
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
!> 更多 api 请查看 [neko-ui](https://monako97.github.io/neko-ui) 组件
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
[TOC]
|
|
2
|
-
|
|
3
|
-
# 快速开始
|
|
4
|
-
|
|
5
|
-
> 这是一个基于 SolidJS、Typescript 开发的适用于任何技术栈的 WebComponents 组件库, 你可以在其他任意 web 框架中像 `div` 一样使用它
|
|
6
|
-
|
|
7
|
-
## 安装
|
|
8
|
-
|
|
9
|
-
```shell
|
|
10
|
-
npm install neko-ui -S
|
|
11
|
-
# or
|
|
12
|
-
yarn add neko-ui -S
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## 使用
|
|
16
|
-
|
|
17
|
-
```jsx
|
|
18
|
-
import 'neko-ui'; // 在使用前引入一次就行, 建议在入口文件进行
|
|
19
|
-
|
|
20
|
-
function View() {
|
|
21
|
-
return <n-input />;
|
|
22
|
-
}
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## 直接在原生html5、js中使用
|
|
26
|
-
|
|
27
|
-
```html
|
|
28
|
-
<!-- 引入 CDN 资源 -->
|
|
29
|
-
<script src="https://cdn.jsdelivr.net/npm/neko-ui/lib/index.js"></script>
|
|
30
|
-
<!-- 使用 -->
|
|
31
|
-
<body>
|
|
32
|
-
<n-input></n-input>
|
|
33
|
-
</body>
|
|
34
|
-
```
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
[TOC]
|
|
2
|
-
|
|
3
|
-
# 在 原生 js 和 html 中使用, 通过 `addEventListener` 进行事件绑定
|
|
4
|
-
|
|
5
|
-
当案例中的代码为
|
|
6
|
-
|
|
7
|
-
```jsx
|
|
8
|
-
<n-select
|
|
9
|
-
label="无后缀,无前缀"
|
|
10
|
-
options={[
|
|
11
|
-
{ label: 'A', value: 'A' },
|
|
12
|
-
{ label: 'B', value: 'B' },
|
|
13
|
-
]}
|
|
14
|
-
onChange={(e) => {
|
|
15
|
-
console.log(e.detail);
|
|
16
|
-
}}
|
|
17
|
-
/>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## 原生 HTML 中对应的写法为
|
|
21
|
-
|
|
22
|
-
```html
|
|
23
|
-
<!doctype html>
|
|
24
|
-
<html lang="en">
|
|
25
|
-
<head>
|
|
26
|
-
<meta charset="UTF-8" />
|
|
27
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
28
|
-
<title>Document</title>
|
|
29
|
-
</head>
|
|
30
|
-
<body>
|
|
31
|
-
<n-select id="select" label="无后缀,无前缀"></n-select>
|
|
32
|
-
</body>
|
|
33
|
-
<script>
|
|
34
|
-
const select = document.querySelector('#select');
|
|
35
|
-
|
|
36
|
-
select.options = [
|
|
37
|
-
{ label: 'A', value: 'A' },
|
|
38
|
-
{ label: 'B', value: 'B' },
|
|
39
|
-
];
|
|
40
|
-
select.addEventListener('change', function (e) {
|
|
41
|
-
console.log(e.detail);
|
|
42
|
-
});
|
|
43
|
-
</script>
|
|
44
|
-
</html>
|
|
45
|
-
```
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
[TOC]
|
|
2
|
-
|
|
3
|
-
# 在 React 中使用, 通过 `addEventListener` 进行事件绑定
|
|
4
|
-
|
|
5
|
-
当案例中的代码为
|
|
6
|
-
|
|
7
|
-
```jsx
|
|
8
|
-
<n-select
|
|
9
|
-
label="无后缀,无前缀"
|
|
10
|
-
options={[
|
|
11
|
-
{ label: 'A', value: 'A' },
|
|
12
|
-
{ label: 'B', value: 'B' },
|
|
13
|
-
]}
|
|
14
|
-
onChange={(e) => {
|
|
15
|
-
console.log(e.detail);
|
|
16
|
-
}}
|
|
17
|
-
/>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## React中对应的写法为
|
|
21
|
-
|
|
22
|
-
```jsx
|
|
23
|
-
import { useEffect, useRef } from 'react';
|
|
24
|
-
import type { SelectElement } from 'neko-ui';
|
|
25
|
-
|
|
26
|
-
function Demo() {
|
|
27
|
-
const el = useRef<SelectElement>(null);
|
|
28
|
-
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
if (el.current) {
|
|
31
|
-
// 设置对象、数组类型的属性
|
|
32
|
-
el.current.options = [
|
|
33
|
-
{ label: 'A', value: 'A' },
|
|
34
|
-
{ label: 'B', value: 'B' },
|
|
35
|
-
];
|
|
36
|
-
// 绑定事件
|
|
37
|
-
el.current?.addEventListener('change', (e) => {
|
|
38
|
-
const [val, item] = e.detail;
|
|
39
|
-
|
|
40
|
-
console.log(val, item);
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
}, []);
|
|
44
|
-
// 非函数、对象、数组类型的属性可以直接在jsx标签中设置
|
|
45
|
-
return <n-select ref={el} label="无后缀,无前缀" />;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export default Demo;
|
|
49
|
-
```
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
[TOC]
|
|
2
|
-
|
|
3
|
-
# 在 Solid.js 中可直接使用
|
|
4
|
-
|
|
5
|
-
当案例中的代码为
|
|
6
|
-
|
|
7
|
-
```jsx
|
|
8
|
-
<n-select
|
|
9
|
-
label="无后缀,无前缀"
|
|
10
|
-
options={[
|
|
11
|
-
{ label: 'A', value: 'A' },
|
|
12
|
-
{ label: 'B', value: 'B' },
|
|
13
|
-
]}
|
|
14
|
-
onChange={(e) => {
|
|
15
|
-
console.log(e.detail);
|
|
16
|
-
}}
|
|
17
|
-
/>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## Solid.js 中对应的写法为
|
|
21
|
-
|
|
22
|
-
```tsx
|
|
23
|
-
function Demo() {
|
|
24
|
-
return (
|
|
25
|
-
<n-select
|
|
26
|
-
label="无后缀,无前缀"
|
|
27
|
-
options={[
|
|
28
|
-
{ label: 'A', value: 'A' },
|
|
29
|
-
{ label: 'B', value: 'B' },
|
|
30
|
-
]}
|
|
31
|
-
onChange={(e) => {
|
|
32
|
-
console.log(e.detail);
|
|
33
|
-
}}
|
|
34
|
-
/>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export default Demo;
|
|
39
|
-
```
|
package/es/@introduce/vue/doc.md
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
[TOC]
|
|
2
|
-
|
|
3
|
-
# 在 Vue 中使用
|
|
4
|
-
|
|
5
|
-
当案例中的代码为
|
|
6
|
-
|
|
7
|
-
```jsx
|
|
8
|
-
<n-input onChange={(e) => console.log(e)} />
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
在 `Vue` 中, 事件绑定需要将 onXxx 替换为 @xxx
|
|
12
|
-
|
|
13
|
-
## 忽略自定义元素
|
|
14
|
-
|
|
15
|
-
你需要先在入口处(常见为`app.js`)添加这段代码
|
|
16
|
-
|
|
17
|
-
### Vue 2
|
|
18
|
-
|
|
19
|
-
```js
|
|
20
|
-
Vue.config.ignoredElements = [
|
|
21
|
-
// 忽略所有“ion-”开头的元素 (仅在 vue 2.5+ 支持)
|
|
22
|
-
/^n-[a-z]/,
|
|
23
|
-
// 或指定名称, 忽略 n-input 元素
|
|
24
|
-
'n-input',
|
|
25
|
-
];
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### Vue 3
|
|
29
|
-
|
|
30
|
-
```js
|
|
31
|
-
const app = Vue.createApp({});
|
|
32
|
-
|
|
33
|
-
app.config.isCustomElement = (tag) => /^n-[a-z]/.test(tag);
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## Vue 中对应的写法为
|
|
37
|
-
|
|
38
|
-
```html
|
|
39
|
-
<template>
|
|
40
|
-
<n-input @change="handleChange" />
|
|
41
|
-
</template>
|
|
42
|
-
<script>
|
|
43
|
-
export default {
|
|
44
|
-
data() {
|
|
45
|
-
return {};
|
|
46
|
-
},
|
|
47
|
-
methods: {
|
|
48
|
-
handleChange(e) {
|
|
49
|
-
console.log(e.detail);
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
</script>
|
|
54
|
-
```
|
package/es/@moneko/cli/doc.md
DELETED
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
[TOC]
|
|
2
|
-
|
|
3
|
-
# @moneko/cli
|
|
4
|
-
|
|
5
|
-
> 这是一个脚手架工具, 可以快速进行一个组件库、单页面、微前端(乾坤)、后台管理、模块联邦应用的开发, 目前支持React18、Solid.js
|
|
6
|
-
|
|
7
|
-
## 快速开始
|
|
8
|
-
|
|
9
|
-
```shell
|
|
10
|
-
# 安装脚手架工具
|
|
11
|
-
npm i @moneko/cli -g
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## 创建一个新项目
|
|
15
|
-
|
|
16
|
-
```shell
|
|
17
|
-
mo create my-project
|
|
18
|
-
# 按提示步骤完成创建, my-project 为项目名
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## 进入项目目录
|
|
22
|
-
|
|
23
|
-
```shell
|
|
24
|
-
cd my-project
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## 使用 npm
|
|
28
|
-
|
|
29
|
-
### 安装依赖
|
|
30
|
-
|
|
31
|
-
```shell
|
|
32
|
-
npm install
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### 启动开发服务器
|
|
36
|
-
|
|
37
|
-
```shell
|
|
38
|
-
npm start
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### 补充配置启动
|
|
42
|
-
|
|
43
|
-
例如额外加载 `/config/prod.ts` 中的启动参数
|
|
44
|
-
|
|
45
|
-
```shell
|
|
46
|
-
npm start --config=prod
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### 构建项目
|
|
50
|
-
|
|
51
|
-
```shell
|
|
52
|
-
npm run build
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### 补充配置构建
|
|
56
|
-
|
|
57
|
-
例如额外加载 `/config/prod.ts` 中的启动参数
|
|
58
|
-
|
|
59
|
-
```shell
|
|
60
|
-
npm run build --config=prod
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## 使用 Yarn
|
|
64
|
-
|
|
65
|
-
### 安装
|
|
66
|
-
|
|
67
|
-
```shell
|
|
68
|
-
yarn
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### 启动
|
|
72
|
-
|
|
73
|
-
```shell
|
|
74
|
-
yarn start
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
### 使用补充配置启动
|
|
78
|
-
|
|
79
|
-
例如额外加载 `/config/prod.ts` 中的启动参数
|
|
80
|
-
|
|
81
|
-
```shell
|
|
82
|
-
yarn start config=prod
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### 构建
|
|
86
|
-
|
|
87
|
-
```shell
|
|
88
|
-
yarn build
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
### 使用补充配置构建
|
|
92
|
-
|
|
93
|
-
例如额外加载 `/config/prod.ts` 中的启动参数
|
|
94
|
-
|
|
95
|
-
```shell
|
|
96
|
-
yarn build config=prod
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
## 编译 app
|
|
100
|
-
|
|
101
|
-
> 使用 flutter 3.0
|
|
102
|
-
> 应用类型为 mobile 的项目中执行打包步骤`npm run build`,确保正确生产出的资产在 `dist` 文件夹中,然后执行 `mo buildApp`,按控制台提示操作
|
|
103
|
-
|
|
104
|
-
```shell
|
|
105
|
-
mo buildApp
|
|
106
|
-
? 请输入软件包名称? com.moneko.bid ## 默认值
|
|
107
|
-
? 请选择需要打包的类型 打包为apk (release)
|
|
108
|
-
❯◉ 打包为apk (release) # 方向上下键选择条目,按空格键选中,回车键确认
|
|
109
|
-
◯ 打包为apk (debug)
|
|
110
|
-
◯ 打包为ipa (release)[未签名,需要 OSX 及 Xcode]
|
|
111
|
-
◯ 打包为ipa (debug)[未签名,需要 OSX 及 Xcode]
|
|
112
|
-
|
|
113
|
-
# ...
|
|
114
|
-
Running Gradle task 'assembleRelease'... 27.7s
|
|
115
|
-
✓ Built build/app/outputs/flutter-apk/app-release.apk (15.8MB).
|
|
116
|
-
Done
|
|
117
|
-
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
## Commands
|
|
121
|
-
|
|
122
|
-
### eslint
|
|
123
|
-
|
|
124
|
-
**使用:**
|
|
125
|
-
|
|
126
|
-
```shell
|
|
127
|
-
mo eslint [options] <source>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
描述:js代码规范检查。
|
|
131
|
-
|
|
132
|
-
### stylelint
|
|
133
|
-
|
|
134
|
-
**使用:**
|
|
135
|
-
|
|
136
|
-
```shell
|
|
137
|
-
mo stylelint [options] <source>
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
描述:css代码规范检查。
|
|
141
|
-
|
|
142
|
-
### build
|
|
143
|
-
|
|
144
|
-
**使用:**
|
|
145
|
-
|
|
146
|
-
```shell
|
|
147
|
-
mo build <type> <framework>
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
描述:编译项目。
|
|
151
|
-
|
|
152
|
-
### start
|
|
153
|
-
|
|
154
|
-
**使用:**
|
|
155
|
-
|
|
156
|
-
```shell
|
|
157
|
-
mo start <type> <framework>
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
描述:运行项目。
|
|
161
|
-
|
|
162
|
-
### create
|
|
163
|
-
|
|
164
|
-
**使用:**
|
|
165
|
-
|
|
166
|
-
```shell
|
|
167
|
-
mo create <name> [destination]
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
描述:创建一个新项目。
|
|
171
|
-
|
|
172
|
-
### buildApp
|
|
173
|
-
|
|
174
|
-
**使用:**
|
|
175
|
-
|
|
176
|
-
```shell
|
|
177
|
-
mo buildApp
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
描述:编译将 h5 应用打包成移动客户端,使用 Flutter。
|
|
181
|
-
|
|
182
|
-
### githooks
|
|
183
|
-
|
|
184
|
-
**使用:**
|
|
185
|
-
|
|
186
|
-
```shell
|
|
187
|
-
mo githooks pre-commit=\"yarn precommit\"
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
描述:git hooks工具。
|
|
191
|
-
|
|
192
|
-
### changelog
|
|
193
|
-
|
|
194
|
-
**使用:**
|
|
195
|
-
|
|
196
|
-
```shell
|
|
197
|
-
mo changelog <filename>
|
|
198
|
-
# mo changelog CHANGELOG.md
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
描述:生成 `CHANGELOG.md`。
|
|
202
|
-
|
|
203
|
-
### help
|
|
204
|
-
|
|
205
|
-
**使用:**
|
|
206
|
-
|
|
207
|
-
```shell
|
|
208
|
-
mo help
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
描述:展示命令的帮助。
|