docs: structure rework [ci skip]

Author: Guillaume Chau

docs/.vuepress/config.js

@@ -2,7 +2,7 @@ module.exports = {
   locales: {
     '/': {
       lang: 'en-US',
-      title: 'Vue CLI',
+      title: 'Vue CLI 3',
       description: '🛠️ Standard Tooling for Vue.js Development'
     }
   },
@@ -30,7 +30,7 @@ module.exports = {
             link: '/config/'
           },
           {
-            text: 'Dev Guide',
+            text: 'Plugin Dev Guide',
             items: [
               { text: 'Plugin Dev Guide', link: '/dev-guide/plugin-dev.md' },
               { text: 'UI Plugin Info', link: '/dev-guide/ui-info.md' },
@@ -59,20 +59,21 @@ module.exports = {
         sidebar: {
           '/guide/': [
             '/guide/',
+            '/guide/installation',
             {
-              title: 'CLI',
+              title: 'Basics',
               collapsable: false,
               children: [
-                '/guide/creating-a-project',
                 '/guide/prototyping',
-                '/guide/plugins-and-presets'
+                '/guide/creating-a-project',
+                '/guide/plugins-and-presets',
+                '/guide/cli-service'
               ]
             },
             {
               title: 'Development',
               collapsable: false,
               children: [
-                '/guide/cli-service',
                 '/guide/browser-compatibility',
                 '/guide/html-and-static-assets',
                 '/guide/css',
@@ -85,9 +86,15 @@ module.exports = {
           ],
           '/dev-guide/': [
             '/dev-guide/plugin-dev.md',
-            '/dev-guide/ui-info.md',
-            '/dev-guide/ui-api.md',
-            '/dev-guide/ui-localization.md'
+            {
+              title: 'UI Development',
+              collapsable: false,
+              children: [
+                '/dev-guide/ui-info.md',
+                '/dev-guide/ui-api.md',
+                '/dev-guide/ui-localization.md'
+              ]
+            }
           ]
         }
       }

docs/.vuepress/public/ui-analyzer.png

@@ -24,7 +24,7 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
     <p>Vue CLI is fully configurable without the need for ejecting. This allows your project to stay up-to-date for the long run.</p>
   </div>
   <div class="feature">
-    <h2>GUI on top of the CLI</h2>
+    <h2>Graphical User Interface</h2>
     <p>Create, develop and manage your projects through an accompanying graphical user interface.</p>
   </div>
   <div class="feature">
@@ -39,10 +39,18 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
 
 ## Getting Started
 
+Install:
+
 ``` bash
 npm install -g @vue/cli
 # OR
 yarn global add @vue/cli
+```
+
+Create a project:
 
+``` bash
 vue create my-project
+# OR
+vue ui
 ```

docs/README.md

@@ -10,6 +10,8 @@ sidebar: auto
 
 Some global configurations for `@vue/cli`, such as your preferred package manager and your locally saved presets, are stored in a JSON file named `.vuerc` in your home directory. You can edit this file directory with your editor of choice to change the saved options.
 
+You can also use the `vue config` command to inspect or modify the global CLI config.
+
 ## Target Browsers
 
 See the [Browser Compatibility](../guide/browser-compatibility.md#browserslist) section in guide.

docs/config/README.md

@@ -6,6 +6,10 @@ sidebarDepth: 0
 
 <Bit/>
 
+::: warning
+This documentation is for `@vue/cli` version **3.x**. For the old `vue-cli`, see [here](https://github.com/vuejs/vue-cli/tree/v2#vue-cli--).
+:::
+
 Vue CLI is a full system for rapid Vue.js development, providing:
 
 - Interactive project scaffolding via `@vue/cli`.
@@ -16,6 +20,7 @@ Vue CLI is a full system for rapid Vue.js development, providing:
   - Configurable via in-project config file;
   - Extensible via plugins
 - A rich collection of official plugins integrating the best tools in the frontend ecosystem.
+- A full graphical user intefrace to create and manage Vue.js projects.
 
 Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.
 

docs/guide/README.md

@@ -29,6 +29,14 @@ If you have [npx](https://github.com/zkat/npx) available (should be bundled with
 npx vue-cli-service serve
 ```
 
+::: tip
+You can run scripts with additional features using the GUI with the `vue ui` command.
+:::
+
+Here is the Webpack Analyzer from the GUI in action:
+
+![UI Webpack Analyzer](/ui-analyzer.png)
+
 ## vue-cli-service serve
 
 ```

docs/guide/cli-service.md

@@ -1,19 +1,5 @@
 # Creating a Project
 
-## Installation
-
-::: tip Node Version Requirement
-Vue CLI requires [Node.js](https://nodejs.org/) version 8 or above (8.10.0+ recommended). You can manage multiple versions of Node on the same machine with [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows).
-:::
-
-``` bash
-npm install -g @vue/cli
-# OR
-yarn global add @vue/cli
-```
-
-After installation, you will have access to the `vue` binary in your command line. You can verify that it is properly installed by simply running `vue`, which should present you with a help message listing all available commands.
-
 ## vue create
 
 To create a new project, run:

docs/guide/creating-a-project.md

@@ -0,0 +1,26 @@
+# Installation
+
+::: danger
+The package name changed from `vue-cli` to `@vue/cli`.
+If you have the previous `vue-cli` (1.x or 2.x) package installed globally, you need to uninstall it first with `npm uninstall vue-cli -g` or `yarn global remove vue-cli`.
+:::
+
+::: tip Node Version Requirement
+Vue CLI requires [Node.js](https://nodejs.org/) version 8 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows).
+:::
+
+To install the new package, use on of those commands:
+
+``` bash
+npm install -g @vue/cli
+# OR
+yarn global add @vue/cli
+```
+
+After installation, you will have access to the `vue` binary in your command line. You can verify that it is properly installed by simply running `vue`, which should present you with a help message listing all available commands.
+
+You can check you have the right version (3.x) with this command:
+
+```bash
+vue --version
+```

docs/guide/installation.md

@@ -6,6 +6,10 @@ Vue CLI uses a plugin-based architecture. If you inspect a newly created project
 
 The plugin based architecture makes Vue CLI flexible and extensible. If you are interested in developing a plugin, check out the [Plugin Development Guide](../dev-guide/plugin-dev.md).
 
+::: tip
+You can install and manage Plugins using the GUI with the `vue ui` command.
+:::
+
 ### Installing Plugins in an Existing Project
 
 Each CLI plugin ships with a generator (which creates files) and a runtime plugin (which tweaks the core webpack config and injects commands). When you use `vue create` to create a new project, some plugins will be pre-installed for you based on your feature selection. In case you want to install a plugin into an already created project, you can do so with the `vue add` command: