docs: 快速上手

docs/zh/guide/README.md

@@ -24,7 +24,7 @@ Fes.js 是一套好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
 它主要具备以下功能：
 - :rocket:  __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。  
 - :firecracker:  __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
-- 💪  __健壮__ ，只需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
+- 💪  __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
 - :package:  __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
 - 📡  __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
 
@@ -68,4 +68,4 @@ Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚
 
 ### UMI
 
-UMI 是个很好的选择，Fes.js 很多功能是借鉴 UMI 做的。如果 UMI 对 Vue 支持够好的话，可能 Fes.js 2.0 版本就不会出现了。喜欢 React 的同学推荐直接使用 UMI。
+UMI 是个很好的选择，Fes.js 很多功能是借鉴 UMI 做的。如果 UMI 对 Vue 支持足够够好的话，可能 Fes.js 2.0 版本就不会出现了。喜欢 React 的同学推荐使用 UMI。

docs/zh/guide/getting-started.md

@@ -1,28 +1,43 @@
 # 快速上手
 
 ## 依赖环境
-
-- [Node.js v10+](https://nodejs.org/)
-
-## 手动安装
-
-这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。
-
-- **步骤1**: 创建并进入一个新目录
-
+首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。
 ```bash
-mkdir vuepress-starter
-cd vuepress-starter
+# 打印 node 版本
+node -v
+v10.13.0
+```
+推荐使用 yarn 管理 npm 依赖
+```bash
+# 全局安装 yarn
+npm i yarn -g
 ```
 
-- **步骤2**: 初始化项目
+## 安装模板
 
+这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
+
+##### 步骤1 创建工作空间     
+如果不存在，则创建
+```bash
+# 创建目录 workspace
+mkdir workspace
+# 进入目录 workspace
+cd workspace
+```
+如果已存在工作空间，则直接进入
+```bash
+# 进入目录 workspace
+cd workspace
+```
+
+##### 步骤2 创建模板
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
 ```bash
-git init
-yarn init
+# 创建模板
+yarn create @webank/fes-app myapp
 ```
 
   </CodeGroupItem>
@@ -30,21 +45,29 @@ yarn init
   <CodeGroupItem title="NPM">
 
 ```bash
-git init
-npm init
+# 创建模板
+npx @webank/create-fes-app myapp
 ```
 
   </CodeGroupItem>
 </CodeGroup>
 
 
-- **步骤3**: 将 VuePress 安装为本地依赖
+如果项目目录 `workspace/myapp` 已经存在，则会提示目录已存在，你可以选择 `Overwrite` 删除目录后重新创建项目，也可以选择 `Merge` 使用模板文件覆盖当前目录文件。
+![目录已存在提示](/pickTemplateTip.png)
 
+如果项目目录 `workspace/myapp` 不存在，你会被提示选取一个 template。你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。    
+![选择模板类型](/pickTemplate.png)
+
+##### 步骤3 安装依赖
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
 ```bash
-yarn add -D vuepress@next
+# 进入项目目录
+cd myapp
+# 安装依赖
+yarn 
 ```
 
   </CodeGroupItem>
@@ -52,43 +75,31 @@ yarn add -D vuepress@next
   <CodeGroupItem title="NPM">
 
 ```bash
-npm install -D vuepress@next
+# 进入项目目录
+cd myapp
+# 安装依赖
+npm i 
 ```
 
   </CodeGroupItem>
 </CodeGroup>
 
-- **步骤4**: 在 `package.json` 中添加一些 [scripts](https://classic.yarnpkg.com/zh-Hans/docs/package-json#toc-scripts)
-
-```json
-{
-  "scripts": {
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs"
-  }
-}
-```
-
-- **步骤5**: 将默认的临时目录和缓存目录添加到 `.gitignore` 文件中
-
-```bash
-echo 'node_modules\n.temp\n.cache' >> .gitignore
-```
-
-- **步骤6**: 创建你的第一篇文档
-
-```bash
-mkdir docs
-echo '# Hello VuePress' > docs/README.md
-```
-
-- **步骤7**: 在本地启动服务器来开发你的文档网站
-
+##  启动项目
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
 ```bash
-yarn docs:dev
+# 开发调试
+yarn dev
+
+yarn run v1.22.4
+$ fes dev
+Starting the development server http://localhost:8080 ...
+
+✔ Webpack
+  Compiled successfully in 15.91s
+
+ DONE  Compiled successfully in 15917ms                               11:17:08 AM
 ```
 
   </CodeGroupItem>
@@ -96,12 +107,85 @@ yarn docs:dev
   <CodeGroupItem title="NPM">
 
 ```bash
-npm run docs:dev
+# 开发调试
+npm run dev
+
+
+> @webank/fes-template@2.0.0-alpha.1 dev /Users/harrywan/company/git/fes.js/packages/fes-template
+> fes dev
+
+Starting the development server http://localhost:8080 ...
+
+✔ Webpack
+  Compiled successfully in 3.66s
+
+ DONE  Compiled successfully in 3662ms                                11:17:46 AM
 ```
 
   </CodeGroupItem>
 </CodeGroup>
 
-  VuePress 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
 
-现在，你应该已经有了一个简单可用的 VuePress 文档网站。接下来，了解一下 VuePress [配置](./configuration.md) 相关的内容。
+Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
+
+![home](/home.png)
+
+
+## 部署发布
+
+### 构建
+<CodeGroup>
+  <CodeGroupItem title="YARN" active>
+
+```bash
+# 构建
+yarn build
+
+yarn run v1.22.4
+$ fes build
+
+✔ Webpack
+  Compiled successfully in 45.37s
+
+✨  Done in 48.87s.
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="NPM">
+
+```bash
+# 构建
+npm run build
+
+> @webank/fes-template@2.0.0-alpha.1 build /Users/harrywan/company/git/fes.js/packages/fes-template
+> fes build
+
+✔ Webpack
+  Compiled successfully in 45.37s
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。
+```base
+tree ./dist
+
+dist
+├── chunk-vendors.27cd4686.js
+├── chunk-vendors.a5f5de67.css
+├── index.11411d43.css
+├── index.d72f1ba2.js
+├── index.html
+├── logo.png
+└── static
+    └── logo.0f85bba0.png
+```
+
+### 本地验证
+发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `dev` 的结果一样。
+
+
+### 部署
+本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。