Skip to content

Commit

Permalink
add chinese doc
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeremy Chen committed Feb 20, 2024
1 parent ad603e9 commit 7015f2c
Show file tree
Hide file tree
Showing 100 changed files with 6,106 additions and 1 deletion.
186 changes: 186 additions & 0 deletions docs-src/0.4/cn/CLI/configure.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
# Configure Project

This chapter will teach you how to configure the CLI with the `Dioxus.toml` file. There's an [example](#config-example) which has comments to describe individual keys. You can copy that or view this documentation for a more complete learning experience.

"🔒" indicates a mandatory item. Some headers are mandatory, but none of the keys inside them are. In that case, you only need to include the header, but no keys. It might look weird, but it's normal.

## Structure

Each header has its TOML form directly under it.

### Application 🔒

```toml
[application]
```

Application-wide configuration. Applies to both web and desktop.

* **name** 🔒 - Project name & title.
```toml
name = "my_project"
```
* **default_platform** 🔒 - The platform this project targets
```toml
# Currently supported platforms: web, desktop
default_platform = "web"
```
* **out_dir** - The directory to place the build artifacts from `dx build` or `dx serve` into. This is also where the `assets` directory will be copied into.
```toml
out_dir = "dist"
```
* **asset_dir** - The directory with your static assets. The CLI will automatically copy these assets into the **out_dir** after a build/serve.
```toml
asset_dir = "public"
```
* **sub_package** - The sub package in the workspace to build by default.
```toml
sub_package = "my-crate"
```

### Web.App 🔒

```toml
[web.app]
```

Web-specific configuration.

* **title** - The title of the web page.
```toml
# HTML title tag content
title = "project_name"
```
* **base_path** - The base path to build the application for serving at. This can be useful when serving your application in a subdirectory under a domain. For example, when building a site to be served on GitHub Pages.
```toml
# The application will be served at domain.com/my_application/, so we need to modify the base_path to the path where the application will be served
base_path = "my_application"
```

### Web.Watcher 🔒

```toml
[web.watcher]
```

Development server configuration.

* **reload_html** - If this is true, the cli will rebuild the index.html file every time the application is rebuilt
```toml
reload_html = true
```
* **watch_path** - The files & directories to monitor for changes
```toml
watch_path = ["src", "public"]
```

* **index_on_404** - If enabled, Dioxus will serve the root page when a route is not found.
*This is needed when serving an application that uses the router*. However, when serving your app using something else than Dioxus (e.g. GitHub Pages), you will have to check how to configure it on that platform. In GitHub Pages, you can make a copy of `index.html` named `404.html` in the same directory.
```toml
index_on_404 = true
```

### Web.Resource 🔒

```toml
[web.resource]
```

Static resource configuration.

* **style** - CSS files to include in your application.
```toml
style = [
# Include from public_dir.
"./assets/style.css",
# Or some asset from online cdn.
"https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.css"
]
```

* **script** - JavaScript files to include in your application.
```toml
script = [
# Include from asset_dir.
"./public/index.js",
# Or from an online CDN.
"https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.js"
]
```

### Web.Resource.Dev 🔒

```toml
[web.resource.dev]
```

This is the same as [`[web.resource]`](#webresource-), but it only works in development servers. For example, if you want to include a file in a `dx serve` server, but not a `dx serve --release` server, put it here.

### Web.Proxy

```toml
[[web.proxy]]
```

Configuration related to any proxies your application requires during development. Proxies will forward requests to a new service.

* **backend** - The URL to the server to proxy. The CLI will forward any requests under the backend relative route to the backend instead of returning 404
```toml
backend = "http://localhost:8000/api/"
```
This will cause any requests made to the dev server with prefix /api/ to be redirected to the backend server at http://localhost:8000. The path and query parameters will be passed on as-is (path rewriting is currently not supported).

## Config example

This includes all fields, mandatory or not.

```toml
[application]

# App name
name = "project_name"

# The Dioxus platform to default to
default_platform = "web"

# `build` & `serve` output path
out_dir = "dist"

# The static resource path
asset_dir = "public"

[web.app]

# HTML title tag content
title = "project_name"

[web.watcher]

# When watcher is triggered, regenerate the `index.html`
reload_html = true

# Which files or dirs will be monitored
watch_path = ["src", "public"]

# Include style or script assets
[web.resource]

# CSS style file
style = []

# Javascript code file
script = []

[web.resource.dev]

# Same as [web.resource], but for development servers

# CSS style file
style = []

# JavaScript files
script = []

[[web.proxy]]
backend = "http://localhost:8000/api/"
```
24 changes: 24 additions & 0 deletions docs-src/0.4/cn/CLI/creating.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Create a Project

Once you have the Dioxus CLI installed, you can use it to create your own project!

## Initializing a project

First, run the `dx create` command to create a new project.

> It clones this [template](https://github.com/DioxusLabs/dioxus-template), which is used for web apps.
>
> You can create your project from a different template by passing the `template` argument:
> ```
> dx create --template gh:dioxuslabs/dioxus-template
> ```
Next, navigate into your new project using `cd project-name`, or simply opening it in an IDE.
> Make sure the WASM target is installed before running the projects.
> You can install the WASM target for rust using rustup:
> ```
> rustup target add wasm32-unknown-unknown
> ```
Finally, serve your project with `dx serve`! The CLI will tell you the address it is serving on, along with additional info such as code warnings.
13 changes: 13 additions & 0 deletions docs-src/0.4/cn/CLI/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Introduction

The ✨**Dioxus CLI**✨ is a tool to get Dioxus projects off the ground.

There's no documentation for commands here, but you can see all commands using `dx --help` once you've installed the CLI! Furthermore, you can run `dx <command> --help` to get help with a specific command.

## Features

* Build and pack a Dioxus project.
* Format `rsx` code.
* 热重载 for `web` platform.
* Create a Dioxus project from a template repository.
* And more!
21 changes: 21 additions & 0 deletions docs-src/0.4/cn/CLI/installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Installation

## Install the stable version (recommended)

```
cargo install dioxus-cli
```

If you get an OpenSSL error on installation, ensure the dependencies listed [here](https://docs.rs/openssl/latest/openssl/#automatic) are installed.

## Install the latest development build through git

To get the latest bug fixes and features, you can install the development version from git. However, this is not fully tested. That means you're probably going to have more bugs despite having the latest bug fixes.

```
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli
```

This will download the CLI from the master branch, and install it in Cargo's global binary directory (`~/.cargo/bin/` by default).

Run `dx --help` for a list of all the available commands. Furthermore, you can run `dx <command> --help` to get help with a specific command.
139 changes: 139 additions & 0 deletions docs-src/0.4/cn/CLI/plugin/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
# CLI Plugin development

**IMPORTANT: Ignore this documentation. Plugins are yet to be released and chances are it won't work for you. This is just what plugins *could* look like.**

In the past we used `dx tool` to use and install tools, but it was a flawed system.
Tools were hard-coded by us, but people want more tools than we could code, so this plugin system was made to let
anyone develop plugins and use them in Dioxus projects.

Plugin resources:
* [Source code](https://github.com/DioxusLabs/dioxus/tree/master/packages/cli/src/plugin)
* [Unofficial Dioxus plugin community](https://github.com/DioxusPluginCommunity). Contains certain plugins you can use right now.

### Why Lua?

We chose Lua `5.4` to be the plugin developing language,
because it's extremely lightweight, embeddable and easy to learn.
We installed Lua into the CLI, so you don't need to do it yourself.

Lua resources:
* [Official website](https://www.lua.org/). You can basically find everything here.
* [Awesome Lua](https://github.com/LewisJEllis/awesome-lua). Additional resources (such as Lua plugins for your favorite IDE), and other *awesome* tools!

## Creating a plugin

A plugin is just an `init.lua` file.
You can include other files using `dofile(path)`.
You need to have a plugin and a manager instance, which you can get using `require`:
```lua
local plugin = require("plugin")
local manager = require("manager")
```

You need to set some `manager` fields and then initialize the plugin:
```lua
manager.name = "My first plugin"
manager.repository = "https://github.com/john-doe/my-first-plugin" -- The repository URL.
manager.author = "John Doe <[email protected]>"
manager.version = "0.1.0"
plugin.init(manager)
```

You also need to return the `manager`, which basically represents your plugin:
```lua
-- Your code here.
-- End of file.

manager.serve.interval = 1000
return manager
```

And you're ready to go. Now, go and have a look at the stuff below and the API documentation.

### Plugin info

You will encounter this type in the events below. The keys are as follows:
* `name: string` - The name of the plugin.
* `repository: string` - The plugin repository URL.
* `author: string` - The author of the plugin.
* `version: string` - The plugin version.

### Event management

The plugin library has certain events that you can subscribe to.

* `manager.on_init` - Triggers the first time the plugin is loaded.
* `manager.build.on_start(info)` - Triggers before the build process. E.g., before `dx build`.
* `manager.build.on_finish(info)` - Triggers after the build process. E.g., after `dx build`.
* `manager.serve.on_start(info)` - Triggers before the serving process. E.g., before `dx serve`.
* `manager.serve.on_rebuild_start(info)` - Triggers before the server rebuilds the web with 热重载.
* `manager.serve.on_rebuild_end(info)` - Triggers after the server rebuilds the web with 热重载.
* `manager.serve.on_shutdown` - Triggers when the server is shutdown. E.g., when the `dx serve` process is terminated.

To subscribe to an event, you simply need to assign it to a function:

```lua
manager.build.on_start = function (info)
log.info("[plugin] Build starting: " .. info.name)
end
```

### Plugin template

```lua
package.path = library_dir .. "/?.lua"

local plugin = require("plugin")
local manager = require("manager")

-- deconstruct api functions
local log = plugin.log

-- plugin information
manager.name = "Hello Dixous Plugin"
manager.repository = "https://github.com/mrxiaozhuox/hello-dioxus-plugin"
manager.author = "YuKun Liu <[email protected]>"
manager.version = "0.0.1"

-- init manager info to plugin api
plugin.init(manager)

manager.on_init = function ()
-- when the first time plugin been load, this function will be execute.
-- system will create a `dcp.json` file to verify init state.
log.info("[plugin] Start to init plugin: " .. manager.name)
end

---@param info BuildInfo
manager.build.on_start = function (info)
-- before the build work start, system will execute this function.
log.info("[plugin] Build starting: " .. info.name)
end

---@param info BuildInfo
manager.build.on_finish = function (info)
-- when the build work is done, system will execute this function.
log.info("[plugin] Build finished: " .. info.name)
end

---@param info ServeStartInfo
manager.serve.on_start = function (info)
-- this function will after clean & print to run, so you can print some thing.
log.info("[plugin] Serve start: " .. info.name)
end

---@param info ServeRebuildInfo
manager.serve.on_rebuild = function (info)
-- this function will after clean & print to run, so you can print some thing.
local files = plugin.tool.dump(info.changed_files)
log.info("[plugin] Serve rebuild: '" .. files .. "'")
end

manager.serve.on_shutdown = function ()
log.info("[plugin] Serve shutdown")
end

manager.serve.interval = 1000

return manager
```
Loading

0 comments on commit 7015f2c

Please sign in to comment.