-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathVueCLI3doc.html
50 lines (49 loc) · 9.44 KB
/
VueCLI3doc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Use with the cli 3 | Vue Styleguidist</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#41B883">
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico">
<script src="https://unpkg.com/thesemetrics@latest" async=""></script>
<meta name="description" content="Isolated Vue component development environment with a living style guide">
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Vue Styleguidist docs">
<meta prefix="og: http://ogp.me/ns#" property="twitter:title" content="Vue Styleguidist docs">
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website">
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="Isolated Vue component development environment with a living style guide">
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="/assets/logo.png">
<link rel="preload" href="/assets/css/0.styles.6cca0d72.css" as="style"><link rel="preload" href="/assets/js/app.3c212ffd.js" as="script"><link rel="preload" href="/assets/js/3.4a2a9d93.js" as="script"><link rel="preload" href="/assets/js/11.ed576d58.js" as="script"><link rel="prefetch" href="/assets/js/10.9deede29.js"><link rel="prefetch" href="/assets/js/12.cde92b93.js"><link rel="prefetch" href="/assets/js/13.96baa9be.js"><link rel="prefetch" href="/assets/js/14.be8d5859.js"><link rel="prefetch" href="/assets/js/15.053a800d.js"><link rel="prefetch" href="/assets/js/16.c86ff6eb.js"><link rel="prefetch" href="/assets/js/17.a5bd2f70.js"><link rel="prefetch" href="/assets/js/18.904d8817.js"><link rel="prefetch" href="/assets/js/19.c51e966c.js"><link rel="prefetch" href="/assets/js/20.319ae483.js"><link rel="prefetch" href="/assets/js/21.534c66d1.js"><link rel="prefetch" href="/assets/js/22.352e55a6.js"><link rel="prefetch" href="/assets/js/23.b02a1c93.js"><link rel="prefetch" href="/assets/js/24.4dd9e5be.js"><link rel="prefetch" href="/assets/js/4.057c31d3.js"><link rel="prefetch" href="/assets/js/5.95773a2d.js"><link rel="prefetch" href="/assets/js/6.11513ce4.js"><link rel="prefetch" href="/assets/js/7.c2bfa264.js"><link rel="prefetch" href="/assets/js/8.38adfb93.js"><link rel="prefetch" href="/assets/js/9.0bad6c21.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.271cdf46.js">
<link rel="stylesheet" href="/assets/css/0.styles.6cca0d72.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Vue Styleguidist</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/GettingStarted.html" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/Examples.html" class="nav-link">
Examples
</a></div><div class="nav-item"><a href="/VueCLI3doc.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
Vue CLI Plugin
</a></div><div class="nav-item"><a href="/Configuration.html" class="nav-link">
Reference
</a></div> <a href="https://github.com/vue-styleguidist/vue-styleguidist" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/GettingStarted.html" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/Examples.html" class="nav-link">
Examples
</a></div><div class="nav-item"><a href="/VueCLI3doc.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
Vue CLI Plugin
</a></div><div class="nav-item"><a href="/Configuration.html" class="nav-link">
Reference
</a></div> <a href="https://github.com/vue-styleguidist/vue-styleguidist" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="use-with-the-cli-3"><a href="#use-with-the-cli-3" class="header-anchor">#</a> Use with the cli 3</h1> <p>With Vue CLI 3, developers can now create a working environment in minutes. Use <code>vue create myProject</code> and you are ready to code VueJs. Better, it can help you get started with styleguidist.</p> <h2 id="install"><a href="#install" class="header-anchor">#</a> Install</h2> <p>To add <code>styleguidist</code> to the mix set a terminal in your app's directory and type</p> <div class="language-sh extra-class"><pre class="language-sh"><code>vue <span class="token function">add</span> styleguidist
</code></pre></div><p>Vue Styleguidist will configure itself and add a couple examples to get you started. It will immediately set up the webpack config, Hot Module Reloading and a sample styleguide for you to browse. You can modify the <code>styleguide.config.js</code> to make the styleguide look like what's needed.</p> <blockquote><p><strong>Note</strong> If you wish to use <code>styleguidist</code> with the CLI but without the plugin, it is not impossible. Install <code>styleguidist</code> normally. It is not officially supported though.</p> <p>You might have to remove the HMR from the CLI yourself as it conflicts with styleguidists HMR. You might end up on an infinite HMR loop. See <a href="https://github.com/vue-styleguidist/vue-styleguidist/issues/290" target="_blank" rel="noopener noreferrer">issue 290<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="vue-ui"><a href="#vue-ui" class="header-anchor">#</a> Vue UI</h2> <p>Vue Styleguidist is compatible with the Vue UI so if you want to configure <code>styleguidist</code> through a graphical interface, open a console and run the following command.</p> <div class="language-sh extra-class"><pre class="language-sh"><code>vue ui
</code></pre></div><p>In the plugins configuration, you will find switches to configure your styleguide.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/vue-styleguidist/vue-styleguidist/edit/dev/docs/VueCLI3doc.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.3c212ffd.js" defer></script><script src="/assets/js/3.4a2a9d93.js" defer></script><script src="/assets/js/11.ed576d58.js" defer></script>
</body>
</html>