Merge pull request #55 from Keillion/master

yushulx · web-flow · commit da263a833079 · 2020-02-18T16:06:55.000+08:00
add #install in README.md
diff --git a/README.md b/README.md
@@ -11,9 +11,28 @@
 
 > Also see [Dynamsoft JavaScript Barcode SDK for Node](https://github.com/dynamsoft-dbr/node-javascript-barcode).
 
-## Quick Usage
+## Install
 
-### Web
+yarn
+```
+$ yarn add dynamsoft-javascript-barcode
+```
+
+node
+```
+$ node install dynamsoft-javascript-barcode --save
+```
+
+cdn
+```html
+<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.3.0-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
+<!-- or -->
+<script src="https://unpkg.com/dynamsoft-javascript-barcode@7.3.0-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
+```
+
+[Download zip](https://www.dynamsoft.com/Downloads/Dynamic-Barcode-Reader-Download.aspx?edition=js)
+
+## Quick Usage
 
 ```html
 <!DOCTYPE html>
@@ -33,6 +52,12 @@
 </html>
 ```
 
+[Vue example](./example/web/vue)
+
+[React example](./example/web/react)
+
+[Angular example](./example/web/angular)
+
 <!--
 ### Node
 
@@ -53,6 +78,7 @@ Dynamsoft.BarcodeReader.productKeys = 'PRODUCT-KEYS';
 -->
 
 ## Table of Contents
+- [Install](#install)
 - [Quick Usage](#quick-usage)
 - [Features](#features)
 - [Live Demo](#live-demo)
@@ -588,9 +614,7 @@ For commercial usage, we highly recommend self-hosted deployment. The following
 * **Step one**: Place the files
   
 
-On your server put the following files in the same directory.
-
-> [Download zip](https://www.dynamsoft.com/Downloads/Dynamic-Barcode-Reader-Download.aspx?edition=js) to get these files.
+On your server put the following files in the same directory. You can get them in `dist/`.
 
   ```
   dbr.js // For <script>
diff --git a/doc/api reference/index.html b/doc/api reference/index.html
@@ -72,12 +72,19 @@ <h1>Dynamsoft JavaScript Barcode SDK for Web</h1>
 				<blockquote>
 					<p>Also see <a href="https://github.com/dynamsoft-dbr/node-javascript-barcode">Dynamsoft JavaScript Barcode SDK for Node</a>.</p>
 				</blockquote>
+				<a href="#install" id="install" style="color: inherit; text-decoration: none;">
+					<h2>Install</h2>
+				</a>
+				<p>yarn</p>
+				<pre><code>$ yarn <span class="hljs-keyword">add</span><span class="bash"> dynamsoft-javascript-barcode</span></code></pre><p>node</p>
+				<pre><code>$ <span class="hljs-keyword">node</span> <span class="hljs-title">install</span> dynamsoft-javascript-barcode --save</code></pre><p>cdn</p>
+				<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.3.0-v2/dist/dbr.js"</span> <span class="hljs-attr">data-productKeys</span>=<span class="hljs-string">"PRODUCT-KEYS"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- or --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/dynamsoft-javascript-barcode@7.3.0-v2/dist/dbr.js"</span> <span class="hljs-attr">data-productKeys</span>=<span class="hljs-string">"PRODUCT-KEYS"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+				<p><a href="https://www.dynamsoft.com/Downloads/Dynamic-Barcode-Reader-Download.aspx?edition=js">Download zip</a></p>
 				<a href="#quick-usage" id="quick-usage" style="color: inherit; text-decoration: none;">
 					<h2>Quick Usage</h2>
 				</a>
-				<a href="#web" id="web" style="color: inherit; text-decoration: none;">
-					<h3>Web</h3>
-				</a>
 				<pre><code class="language-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
@@ -93,6 +100,9 @@ <h3>Web</h3>
     </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre>
+				<p><a href="./example/web/vue">Vue example</a></p>
+				<p><a href="./example/web/react">React example</a></p>
+				<p><a href="./example/web/angular">Angular example</a></p>
 				<!--
 ### Node
 
@@ -115,6 +125,7 @@ <h3>Web</h3>
 					<h2>Table of Contents</h2>
 				</a>
 				<ul>
+					<li><a href="#install">Install</a></li>
 					<li><a href="#quick-usage">Quick Usage</a></li>
 					<li><a href="#features">Features</a></li>
 					<li><a href="#live-demo">Live Demo</a></li>
@@ -701,10 +712,7 @@ <h2>Self-hosted Deployment</h2>
 				<ul>
 					<li><strong>Step one</strong>: Place the files</li>
 				</ul>
-				<p>On your server put the following files in the same directory.</p>
-				<blockquote>
-					<p><a href="https://www.dynamsoft.com/Downloads/Dynamic-Barcode-Reader-Download.aspx?edition=js">Download zip</a> to get these files.</p>
-				</blockquote>
+				<p>On your server put the following files in the same directory. You can get them in <code>dist/</code>.</p>
 				<pre><code>  dbr<span class="hljs-selector-class">.js</span> <span class="hljs-comment">// For &lt;script&gt;</span>
   dbr<span class="hljs-selector-class">.browser</span><span class="hljs-selector-class">.mjs</span> <span class="hljs-comment">// For &lt;script type="module"&gt;</span>
   dbr<span class="hljs-selector-class">.scanner</span><span class="hljs-selector-class">.html</span> <span class="hljs-comment">// Scanner default UI</span>
@@ -795,7 +803,7 @@ <h2>License Agreement</h2>
 				<a href="#contact-us" id="contact-us" style="color: inherit; text-decoration: none;">
 					<h2>Contact Us</h2>
 				</a>
-				<p>If there are any questions, please feel free to contact <a href="mailto:&#115;&#117;&#x70;&#112;&#x6f;&#114;&#x74;&#64;&#100;&#x79;&#x6e;&#x61;&#x6d;&#115;&#111;&#102;&#x74;&#46;&#99;&#x6f;&#x6d;">&#115;&#117;&#x70;&#112;&#x6f;&#114;&#x74;&#64;&#100;&#x79;&#x6e;&#x61;&#x6d;&#115;&#111;&#102;&#x74;&#46;&#99;&#x6f;&#x6d;</a>.</p>
+				<p>If there are any questions, please feel free to contact <a href="mailto:&#x73;&#117;&#x70;&#x70;&#111;&#114;&#x74;&#x40;&#x64;&#x79;&#x6e;&#97;&#x6d;&#115;&#x6f;&#x66;&#116;&#46;&#99;&#111;&#x6d;">&#x73;&#117;&#x70;&#x70;&#111;&#114;&#x74;&#x40;&#x64;&#x79;&#x6e;&#97;&#x6d;&#115;&#x6f;&#x66;&#116;&#46;&#99;&#111;&#x6d;</a>.</p>
 			</div>
 		</div>
 		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
