diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index d215fb51dd..6e214637b2 100644 --- a/docs/.vuepress/config.js +++ b/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' + ] + } ] } } diff --git a/docs/.vuepress/public/ui-analyzer.png b/docs/.vuepress/public/ui-analyzer.png new file mode 100644 index 0000000000..428c83ff13 Binary files /dev/null and b/docs/.vuepress/public/ui-analyzer.png differ diff --git a/docs/README.md b/docs/README.md index 7a875b943a..25ab320ca3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -24,7 +24,7 @@ footer: MIT Licensed | Copyright © 2018-present Evan You

Vue CLI is fully configurable without the need for ejecting. This allows your project to stay up-to-date for the long run.

-

GUI on top of the CLI

+

Graphical User Interface

Create, develop and manage your projects through an accompanying graphical user interface.

@@ -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 ``` diff --git a/docs/config/README.md b/docs/config/README.md index c161946c2f..1dd6585dee 100644 --- a/docs/config/README.md +++ b/docs/config/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. @@ -346,9 +348,10 @@ See [@vue/cli-plugin-e2e-cypress](https://github.com/vuejs/vue-cli/tree/dev/pack See [@vue/cli-plugin-e2e-nightwatch](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch) for more details. ## Example Configurations + ### Disable Hashed Filenames -While generated static asset filenames contain a hash to [ensure the browser picks up changed files](https://webpack.js.org/guides/caching/#output-filenames) this can be disabled. One common scenario for this is when integrating Vue with a backend that dictates a code structure other than what Vue CLI generates, such as with WordPress or Laravel. To disable the hashed filenames, the following can be added to `[vue.config.js](https://cli.vuejs.org/config/#vue-config-js)`: +While generated static asset filenames contain a hash to [ensure the browser picks up changed files](https://webpack.js.org/guides/caching/#output-filenames) this can be disabled. One common scenario for this is when integrating Vue with a backend that dictates a code structure other than what Vue CLI generates, such as with WordPress or Laravel. To disable the hashed filenames, the following can be added to [`vue.config.js`](#vue-config-js): ``` js // vue.config.js @@ -376,8 +379,10 @@ module.exports = { ::: tip When manually overwriting `filename` or `chunkFilename`, `assetsDir` does not need to be included in their path values. ::: + ### Disable Generating index.html -When using Vue CLI with an existing backend, you may need to disable the generation of `index.html` so that they generated assets can be used with another default document. To do so, the following can be added to `[vue.config.js](https://cli.vuejs.org/config/#vue-config-js)`: + +When using Vue CLI with an existing backend, you may need to disable the generation of `index.html` so that they generated assets can be used with another default document. To do so, the following can be added to [`vue.config.js`](#vue-config-js): ``` js // vue.config.js @@ -391,5 +396,5 @@ module.exports = { ``` ::: warning -[Modern Mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode) will not work when the `html-webpack-plugin` is disabled. +[Modern Mode](../guide/browser-compatibility.md#modern-mode) will not work when the `html-webpack-plugin` is disabled. ::: diff --git a/docs/guide/README.md b/docs/guide/README.md index 736ca049de..5469501744 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -6,6 +6,10 @@ sidebarDepth: 0 +::: 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. diff --git a/docs/guide/cli-service.md b/docs/guide/cli-service.md index 9725e462d7..223880d178 100644 --- a/docs/guide/cli-service.md +++ b/docs/guide/cli-service.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 ``` diff --git a/docs/guide/creating-a-project.md b/docs/guide/creating-a-project.md index bcbc13bdae..b4e5953828 100644 --- a/docs/guide/creating-a-project.md +++ b/docs/guide/creating-a-project.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: diff --git a/docs/guide/installation.md b/docs/guide/installation.md new file mode 100644 index 0000000000..9b3eb1047f --- /dev/null +++ b/docs/guide/installation.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.9 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 +``` diff --git a/docs/guide/plugins-and-presets.md b/docs/guide/plugins-and-presets.md index 8d423d9f5e..2cd9106f61 100644 --- a/docs/guide/plugins-and-presets.md +++ b/docs/guide/plugins-and-presets.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: @@ -57,6 +61,20 @@ vue add vuex If a plugin is already installed, you can skip the installation and only invoke its generator with the `vue invoke` command. The command takes the same arguments as `vue add`. +::: tip +If for some reason your plugins are listed in a `package.json` file other than the one located in your project, you can set the `vueCli.resolvePlugins` option in the project `package.json` with the path to the folder containing the other `package.json` file. + +For example, if you have a `.config/package.json` file: + +```json +{ + "vueCli": { + "resolvePlugins": ".config" + } +} +``` +::: + ## Presets A Vue CLI preset is a JSON object that contains pre-defined options and plugins for creating a new project so that the user don't have to go through the prompts to select them. diff --git a/package.json b/package.json index 3d37933286..e0a60d9cc7 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ ] }, "devDependencies": { + "@vue/conventional-changelog": "^0.1.0", "babel-core": "7.0.0-bridge.0", "conventional-changelog": "^1.1.24", "debug": "^3.1.0", diff --git a/packages/@vue/cli-service/lib/Service.js b/packages/@vue/cli-service/lib/Service.js index 045156842b..72bd16a032 100644 --- a/packages/@vue/cli-service/lib/Service.js +++ b/packages/@vue/cli-service/lib/Service.js @@ -36,11 +36,15 @@ module.exports = class Service { }, {}) } - resolvePkg (inlinePkg) { + resolvePkg (inlinePkg, context = this.context) { if (inlinePkg) { return inlinePkg - } else if (fs.existsSync(path.join(this.context, 'package.json'))) { - return readPkg.sync({ cwd: this.context }) + } else if (fs.existsSync(path.join(context, 'package.json'))) { + const pkg = readPkg.sync({ cwd: context }) + if (pkg.vueCli && pkg.vueCli.resolvePlugins) { + return this.resolvePkg(null, path.resolve(context, pkg.vueCli.resolvePlugins)) + } + return pkg } else { return {} } diff --git a/packages/@vue/cli/lib/invoke.js b/packages/@vue/cli/lib/invoke.js index bda2fdf919..539ff2a1e0 100644 --- a/packages/@vue/cli/lib/invoke.js +++ b/packages/@vue/cli/lib/invoke.js @@ -1,4 +1,4 @@ -const fs = require('fs') +const fs = require('fs-extra') const path = require('path') const execa = require('execa') const chalk = require('chalk') @@ -43,7 +43,11 @@ function getPkg (context) { if (!fs.existsSync(pkgPath)) { throw new Error(`package.json not found in ${chalk.yellow(context)}`) } - return loadModule(pkgPath, context, true) + const pkg = fs.readJsonSync(pkgPath) + if (pkg.vueCli && pkg.vueCli.resolvePlugins) { + return getPkg(path.resolve(context, pkg.vueCli.resolvePlugins)) + } + return pkg } async function invoke (pluginName, options = {}, context = process.cwd()) { diff --git a/packages/@vue/cli/package.json b/packages/@vue/cli/package.json index b48fcfff04..a38ef8eaa4 100644 --- a/packages/@vue/cli/package.json +++ b/packages/@vue/cli/package.json @@ -60,6 +60,6 @@ "yaml-front-matter": "^3.4.1" }, "engines": { - "node": ">=8" + "node": ">=8.9" } } diff --git a/scripts/genChangelog.js b/scripts/genChangelog.js index a784a22396..2c3d5fee19 100644 --- a/scripts/genChangelog.js +++ b/scripts/genChangelog.js @@ -1,11 +1,12 @@ const execa = require('execa') const cc = require('conventional-changelog') +const config = require('@vue/conventional-changelog') const gen = module.exports = version => { const fileStream = require('fs').createWriteStream(`CHANGELOG.md`) cc({ - preset: 'angular', + config, releaseCount: 0, pkg: { transform (pkg) { diff --git a/yarn.lock b/yarn.lock index cc6be040ea..57ec37f03f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1041,6 +1041,14 @@ source-map "^0.5.6" vue-template-es2015-compiler "^1.6.0" +"@vue/conventional-changelog@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@vue/conventional-changelog/-/conventional-changelog-0.1.0.tgz#f3f7e19e4f8b32b1b589f6f3b1b720256a333d88" + dependencies: + compare-func "^1.3.2" + execa "^0.10.0" + q "^1.5.1" + "@vue/preload-webpack-plugin@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.0.0.tgz#08f156532909824da2aad258e151742d1e8f822e" @@ -2994,7 +3002,7 @@ commondir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" -compare-func@^1.3.1: +compare-func@^1.3.1, compare-func@^1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648" dependencies: