当前位置:网站首页>Dumi builds a document blog
Dumi builds a document blog
2022-06-13 04:06:00 【Cun Yuyao】
Preface
I have already talked about how to use various open source frameworks on the Internet to build my own blog , such as docsify
、Hexo
、VuePress
、Halo
etc. . The first three can be matched directly Github
You can get your own blog for free , and Halo
You may need to have your own server , Then deploy the service in your own server .
When surfing the Internet recently , Found another documentation tool , That's it dumi
. Pronounce from Chinese pinyin , Namely Du mi . This is a documentation tool for developing scenarios for components , and father
Form a one-stop service .father
Responsible for building ,dumi
Is responsible for component development and generation of component documents , Together, it provides developers with a one-stop component development experience .
Let's have a look today , How to use it dumi
Build your own document based website .
dumi characteristic
Now that we need to use it dumi
, First, let's take a look at some of its features , It can be summarized as follows :
- Open the box , We just need to focus on component development and documentation .
- rich
Markdown
Expand , Not just rendering componentsdemo
. - be based on
TypeScript
The type definition , Can automatically generate componentsAPI
. - Support custom theme , You can also create your own
Markdown
Components . - Support mobile component library , The built-in mobile terminal makes money rendering scheme .
- One line command to complete the component asset digitization , Cascade downstream productivity tools .
Set up process
Primary preparation
Now that it's all said dumi
Is based on TypeScript
The type definition , How can I leave Node.js
Well ? therefore , Before the formal construction process , You have to make sure that your computer has Node.js
, And make sure that its version is not lower than 10.13
.
If you have already installed Node.js
, But I'm not sure about the version , Then use the following command to view .
node -v
Scaffold initialization
dumi
Two ways of initializing scaffolding are supported , One is component development scaffolding , The other is static site scaffold , This article mainly introduces how to use components to develop scaffolding .
Component development scaffolding includes more than dumi
And basic documentation , It also contains a simple component 、umi-test
and father-build
, It can easily realize component development 、 Documentation 、 Test case writing 、 The whole process of component packaging .
Create an empty folder locally , Easy to manage scaffolding , Then develop scaffolding in the component library that initializes a document pattern .
mkdir dumi-demo
cd dumi-demo
npx @umijs/create-dumi-lib
After initialization , Execute the following command , Then open in the browser http://localhost:8080
You can preview .
npx dumi dev
Document
Check out our project catalog , You can find docs
file , This is where we write the documentation . On project initialization , Only by default index.md
That is, we visited http://localhost:8080
What is called rendered in the page .
Then we are docs
Add and modify in the directory Markdown
file , It will help us automatically render to the front page .
summary
That's the use dumi
The specific process of building a document based website . Of course , Besides being a blog , We can also use it to develop front-end components , Keep adding new features to your site !
边栏推荐
- Single chip microcomputer: a/d differential input signal
- Intervention analysis + pseudo regression
- 建模杂谈系列143 数据处理、分析与决策系统开发的梳理
- 高等数学(第七版)同济大学 习题1-3 个人解答
- Lambda termination operation find and match nonematch
- Zoom and move the H5 part of the mobile end
- Line height equals height why not center
- [test development] use case
- SCM: introduction and operation of EEPROM
- Goframe day 4
猜你喜欢
四旋翼飞行器避障系统基础
[test development] basic concepts related to testing
单片机:PCF8591硬件接口
Sword finger offer II 022 Entry node of a link in a linked list
Big Five personality learning records
ET框架-22 创建ServerInfo实体及事件
Use the visual studio code terminal to execute the command, and the prompt "because running scripts is prohibited on this system" will give an error
EGO Planner代码解析----CMakeLists.txt和package.xml
USB-IF BC1.2充电协议解读
EGO planner论文翻译
随机推荐
Student management system
单片机:Modbus 多机通信程序设计
Single chip microcomputer: basic concepts of a/d and d/a
十億數據量 判斷元素是否存在
[test development] advanced part - Classification of various test technologies
Modeling discussion series 143 data processing, analysis and decision system development
Lambda终结操作查找与匹配findAny
MCU: RS485 communication and Modbus Protocol
干预分析 + 伪回归
Manage PC startup items
Use ASE encryption and decryption cache encapsulation in Vue project
Unity Shader 学习 004-Shader 调试 平台差异性 第三方调试工具
单片机信号发生器程序
GoFrame第五天
EGO planner论文翻译
双目视觉——打造室外避障的“最优解”
5G China unicom 直放站 网管协议 实时性要求
Detailed explanation of KOA development process
Single chip microcomputer: d/a output
No more! Another member of the team left..