doc: update started & development

lizzie0802 · Aug 7, 2019 · 9de796c · 9de796c
1 parent 2be5154
commit 9de796c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/site/docs/development.en-US.md b/site/docs/development.en-US.md
@@ -17,6 +17,8 @@ $ npm install # Install dependencies
 $ npm run create # Create a new component, fill in information according to the prompts
 ```
 
+> [vue-cli](https://cli.vuejs.org/) needs to be installed. v3.0 also requires [@vue/cli-init](https://www.npmjs.com/package/@vue/cli -init)
+
 #### Develop Component
 ```shell
 $ npm run dev # Visit http://localhost:4000/[COMPONENT NAME]

diff --git a/site/docs/development.md b/site/docs/development.md
@@ -16,6 +16,7 @@ $ npm install # 安装依赖
 
 $ npm run create # 新增组件， 根据提示填写组件信息
 ```
+> 需安装[vue-cli](https://cli.vuejs.org/), v3.0+还需安装[@vue/cli-init](https://www.npmjs.com/package/@vue/cli-init)
 
 #### 开发组件
 ```shell

diff --git a/site/docs/started.en-US.md b/site/docs/started.en-US.md
@@ -25,6 +25,20 @@ vue invoke mand
 
 * Nuxt([Example](https://github.com/mand-mobile/nuxt-example))
 
+#### Vue UI
+
+Create and manage projects with a graphical interface via [Vue UI](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui) and integrate `mand-mobile` with the plugin [vue-cli-plugin-mand](https://www.npmjs.com/package/vue-cli-plugin-mand)
+
+* Start `Vue UI`
+
+```shell
+vue ui
+```
+
+* Once the project is created, click on the **Plugins** and search for `mand-mobile`, click on the search result to complete the installation
+
+<img src="https://pt-starimg.didistatic.com/static/starimg/img/3zEzXVU28N1565160574175.png"/>
+
 #### Installation
 
 ##### **NPM or Yarn**
@@ -43,6 +57,8 @@ The `JS` and `CSS` bundles are provided in the `mand-mobile/lib` or `mand-mobile
 
 You can also download it via [![](https://data.jsdelivr.com/v1/package/npm/mand-mobile/badge)](https://www.jsdelivr.com/package/npm/mand-mobile) or [UNPKG](https://unpkg.com/mand-mobile/lib/).
 
+> It is recommended that users who are directly introduced with the CDN lock the version to avoid incompatibility updates. Please refer to [unpkg.com](unpkg.com) for more information.
+
 #### Import
 
 ##### On-demand Loading(Recommended)

diff --git a/site/docs/started.md b/site/docs/started.md
@@ -25,6 +25,20 @@ vue invoke mand
 
 * Nuxt([示例](https://github.com/mand-mobile/nuxt-example))
 
+#### Vue UI
+
+通过[Vue UI](https://cli.vuejs.org/zh/guide/creating-a-project.html#%E4%BD%BF%E7%94%A8%E5%9B%BE%E5%BD%A2%E5%8C%96%E7%95%8C%E9%9D%A2)以图形化界面创建和管理项目，并通过安装插件[vue-cli-plugin-mand](https://www.npmjs.com/package/vue-cli-plugin-mand)集成`mand-mobile`
+
+* 启动`Vue UI`
+
+```shell
+vue ui
+```
+
+* 完成项目创建后，点击**插件**并搜索`mand-mobile`，点击搜索结果完成安装
+
+<img src="https://pt-starimg.didistatic.com/static/starimg/img/3zEzXVU28N1565160574175.png"/>
+
 #### 安装
 
 ##### **NPM or Yarn**
@@ -37,12 +51,14 @@ yarn add mand-mobile
 
 ##### **浏览器引入**
 
-在浏览器中使用`script`和`link`标签直接引入文件，并使用全局变量 `window['mand-mobile']`
+在浏览器中使用`script`和`link`标签直接引入文件，并使用全局变量 `window['mand-mobile']`。
 
 在`npm`发布包内的`mand-mobile/lib`或`mand-mobile/lib-vw`目录下提供了`JS`以及`CSS` bundle，参考<a href="javascript:jumpAnchor('产出包目录')">产出包目录</a>。   
 
 你也可以通过[![](https://data.jsdelivr.com/v1/package/npm/mand-mobile/badge)](https://www.jsdelivr.com/package/npm/mand-mobile)或者[UNPKG](https://unpkg.com/mand-mobile/lib/)进行下载。
 
+> 建议直接使用 CDN 引入时锁定版本，以免将来受到非兼容性更新的影响。锁定版本的方法请查看[unpkg.com](unpkg.com)。
+
 #### 引入
 
 ##### 按需加载(推荐)