Skip to content

Commit cfb1e8e

Browse files
maomincodingmaomincoding
committed
init
1 parent 94fff57 commit cfb1e8e

4 files changed

Lines changed: 36 additions & 46 deletions

File tree

‎doc/en/guide/install/index.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
# Install
22

3-
::: tip
4-
In the previous article, we briefly and quickly understood the use of Mettle, so in this article we will explain in detail the installation methods of Mettle.
5-
:::
6-
73
## CDN
84

95
If you want to use ES Module.

‎doc/en/guide/started/index.md‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ Mettle is a JavaScript library for building user interfaces.
1818

1919
- **Lightweight:** The compressed file size is less than **12k**. In addition, you can choose [different types](https://www.jsdelivr.com/package/npm/mettle?tab=files&path=dist) of files according to different application scenarios.
2020

21-
## ES Module
21+
## Quick Start
2222

23-
Most modern browsers already support ES modules, so we can use Mettle through CDN and ES modules like this:
23+
To quickly experience Mettle, you can try one of the following two methods.
2424

25-
::: warning
26-
If you open the above index.html directly in the browser, you will find that it throws an error because ES modules cannot work through the `file://` protocol. In order for this to work, you need to use a local HTTP server to serve index.html via the `http://` protocol.
27-
:::
25+
### Global Build Version
26+
27+
All top-level APIs in this version are exposed as properties on the global Mettle object.
2828

2929
```html
3030
<!DOCTYPE html>
@@ -34,11 +34,9 @@ If you open the above index.html directly in the browser, you will find that it
3434
<title>Mettle.js</title>
3535
</head>
3636
<body>
37-
<script type="module">
38-
import {
39-
html,
40-
createApp,
41-
} from 'https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full-esm.js';
37+
<script src="https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full.prod.js"></script>
38+
<script>
39+
const { html, createApp } = Mettle;
4240
4341
function App({ setData }) {
4442
let count = 0;
@@ -57,13 +55,9 @@ If you open the above index.html directly in the browser, you will find that it
5755
</html>
5856
```
5957

60-
## Global Build Version
61-
62-
You can also choose to use the `<script>` tag to import it, so that it can be opened directly in the browser.
58+
### ES Module
6359

64-
::: warning
65-
All top-level APIs of this version are exposed as properties on the global Mettle object.
66-
:::
60+
Most modern browsers already support ES modules, so we can use Mettle with CDN and ES modules like this.
6761

6862
```html
6963
<!DOCTYPE html>
@@ -73,9 +67,11 @@ All top-level APIs of this version are exposed as properties on the global Mettl
7367
<title>Mettle.js</title>
7468
</head>
7569
<body>
76-
<script src="https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full.prod.js"></script>
77-
<script>
78-
const { html, createApp } = Mettle;
70+
<script type="module">
71+
import {
72+
html,
73+
createApp,
74+
} from 'https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full-esm.js';
7975
8076
function App({ setData }) {
8177
let count = 0;
@@ -93,3 +89,5 @@ All top-level APIs of this version are exposed as properties on the global Mettl
9389
</body>
9490
</html>
9591
```
92+
93+
We have a quick and simple introduction to the use of Mettle. In the next article, we will explain in detail how to install Mettle.

‎doc/zh/guide/install/index.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
# 安装
22

3-
::: tip
4-
上一篇，我们简单快速地了解 Mettle 的使用，那么我们在这一篇详细说明下 Mettle 有哪些安装方法。
5-
:::
6-
73
## CDN
84

95
如果你想使用 ES 模块。

‎doc/zh/guide/started/index.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# 开始
22

3+
## 什么是Mettle?
4+
35
Mettle 是一个用于构建用户界面的 JavaScript 库。
46

57
- **更容易上手：** 只要你对 HTML、CSS 和 JavaScript 已经基本熟悉，就可以直接上手。
@@ -18,13 +20,13 @@ Mettle 是一个用于构建用户界面的 JavaScript 库。
1820

1921
- **轻量级：** 压缩后的文件大小不足 **12k**。另外，可以根据不同应用场景，选择[不同类型](https://www.jsdelivr.com/package/npm/mettle?tab=files&path=dist)的文件。
2022

21-
## ES 模块
23+
## 快速入手
24+
25+
想要快速体验 Mettle，你可以直接试试下面两种方式之一。
2226

23-
现代浏览器大多都已支持 ES 模块，因此我们可以像这样通过 CDN 以及 ES 模块使用 Mettle
27+
### 全局构建版本
2428

25-
::: warning
26-
如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 `file://` 协议工作。为了使其工作，你需要使用本地 HTTP 服务器通过 `http://` 协议提供 index.html。
27-
:::
29+
该版本的所有顶层 API 都以属性的形式暴露在了全局的 Mettle 对象上。
2830

2931
```html
3032
<!DOCTYPE html>
@@ -34,11 +36,9 @@ Mettle 是一个用于构建用户界面的 JavaScript 库。
3436
<title>Mettle.js</title>
3537
</head>
3638
<body>
37-
<script type="module">
38-
import {
39-
html,
40-
createApp,
41-
} from 'https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full-esm.js';
39+
<script src="https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full.prod.js"></script>
40+
<script>
41+
const { html, createApp } = Mettle;
4242
4343
function App({ setData }) {
4444
let count = 0;
@@ -57,13 +57,9 @@ Mettle 是一个用于构建用户界面的 JavaScript 库。
5757
</html>
5858
```
5959

60-
## 全局构建版本
60+
### ES 模块
6161

62-
你也可以选择使用 `<script>` 标签引入，这样就可以直接在浏览器中打开。
63-
64-
::: tip
65-
该版本的所有顶层 API 都以属性的形式暴露在了全局的 Mettle 对象上。
66-
:::
62+
现代浏览器大多都已支持 ES 模块，因此我们可以像这样通过 CDN 以及 ES 模块使用 Mettle。
6763

6864
```html
6965
<!DOCTYPE html>
@@ -73,9 +69,11 @@ Mettle 是一个用于构建用户界面的 JavaScript 库。
7369
<title>Mettle.js</title>
7470
</head>
7571
<body>
76-
<script src="https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full.prod.js"></script>
77-
<script>
78-
const { html, createApp } = Mettle;
72+
<script type="module">
73+
import {
74+
html,
75+
createApp,
76+
} from 'https://cdn.jsdelivr.net/npm/mettle@latest/dist/mettle.full-esm.js';
7977
8078
function App({ setData }) {
8179
let count = 0;
@@ -93,3 +91,5 @@ Mettle 是一个用于构建用户界面的 JavaScript 库。
9391
</body>
9492
</html>
9593
```
94+
95+
我们简单快速地了解 Mettle 的使用，那么我们在下一篇详细说明下 Mettle 有哪些安装方法。

0 commit comments

Comments
 (0)