Vue CLI is the Standard Tooling for Vue.js Development.
Documentation
Docs are available at https://cli.vuejs.org/ - we are still working on refining it and contributions are welcome!
Contributing
Please see contributing guide.
Vue CLI is the Standard Tooling for Vue.js Development.
Docs are available at https://cli.vuejs.org/ - we are still working on refining it and contributions are welcome!
Please see contributing guide.
Here are the rough ideas:
--transpile-all
CLI flag to include node_modules
for transpiration, as a fail-safe for the transpileDependencies
option.~~ The transpileDependencies
option can be set to true
to transpile all dependencies in node_modules
. It should be the recommended way to build your app, especially when you are using webpack 5, as the compilation overhead should be tolerable with the persistent cache.modern-only
and no-modern
CLI optionspolyfills
chunk by defaultbrowserslist
integration. For example, safari-no-module-fix
can be dropped when browserslist
config does not target those buggy browsers.vue serve/build
will be an alias of npm run serve/build
. If an entry is designated and no package.json
found, it’ll prompt to use vite
(Vue 3) or parcel
(Vue 2) for instant prototyping instead.node-sass
See https://github.com/RIAEvangelist/node-ipc/issues/233#issuecomment-1068182278 the node-ipc
is doing things far more than ever expected.
I don't think vue team has done enough job just releaasing new versions, we should at lease
add POPUPs in official website about that
deprecate all the infected vue-cli packages to add a message for that
Also, we can do:
vue-devtools
by publishing new versions, so that users may get a chance automatically upgrade and see the warning.@sodatea @yyx990803 Please take actions as soon as possible!❤️
3.0.0-rc.10
Node 8.11.2 / Yarn 1.7.0 / Windows 10
HMR should update the browser's content based on changes made on src file
HMR is failing, any changes done to the src files are not being hot reloaded in browser.
when runing dev-server there throw these two Error
ERROR Failed to compile with 2 errors 10:53:28
These relative modules were not found:
Listening at http://localhost:8080
node-version 6.8.0 window10 i don't modify the webpack default config, it can run the app sometime but mostly throw the error
3.0.1
nvm 0.33.1 / Node v8.11.4 / Ubuntu 16.04
npm run build fails because vue-cli-service: command not found
npm run build succeeds
npm run build fails because vue-cli-service: command not found
Installed globally with npm install -g @vue/[email protected]
3.1.1
npm 6.4.1
npm install -g @vue/cli
Install Successful
npm WARN [email protected] requires a peer of [email protected]^0.11.0 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN @apollographql/[email protected] requires a peer of [email protected]^0.13.1 but none is installed. You must install peer dependencies yourself.
Even after I manually install graphql with npm install -g [email protected]^0.13.1, when I do npm -g list --depth=0, npm still warns
npm ERR! peer dep missing: [email protected]^0.11.0 || ^0.12.0 || ^0.13.0, required by [email protected]
npm ERR! peer dep missing: [email protected]^0.13.1, required by @apollographql/[email protected]
npm ERR! peer dep missing: [email protected]^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0, required by [email protected]
npm ERR! peer dep missing: [email protected]^0.13.0, required by [email protected]
npm ERR! peer dep missing: [email protected]^0.13.1, required by @apollographql/[email protected]
npm ERR! peer dep missing: [email protected]^0.10.5 || ^0.11.3 || ^0.12.0 || ^0.13.0, required by [email protected]
npm ERR! peer dep missing: [email protected]^0.13.0, required by [email protected]
We have been discussing an upgrade for vue-cli
for a while, in order to address a few issues in the current version.
Currently, project build configurations are directly included in the template. This leads to a few problems:
once created, it becomes difficult to upgrade an existing project to track latest changes in the remote template;
pulling directly from github lacks proper version control mechanism that npm packages have;
less experienced users can get intimidated by the seemingly complex code in the build
directory.
Too many decisions to make upfront resulting in a less smooth onboarding experience.
The user has to first pick a template, but for beginners they usually do not possess the experience to decide which template fits their use case best. The official webpack
template has a number of questions regarding linters and test tools, which can also be intimidating for beginners.
[email protected]
will be moving towards a "config/scripts in a package" model, which is commonly used among several other tools:
Instead of forcing users to make non-reversible decisions upfront, we would:
Phase out browserify support. There will be just one template which is webpack based.
Configurations for common use cases (pwa, ts, ssr) can be added on demand via presets, similar to how Neutrino/Poi works. The presets can be maintained and versioned individually.
In addition to the encapsulated package, we will also offer the ability to configure the tooling via vue.config.js
. This file exposes two functionalities:
A centralized entry for configuring/toggling high-level built-in features, e.g. env variables, css extraction, API proxying.
Get lower level access to the underlying webpack config and tweak it (probably with webpack-chain). This essentially works like a local preset.
We will probably split out vue build
into an addon (e.g. vue-cli-build
) so the initial install of vue-cli
can be faster. vue build
can simply try to call vue-cli-build
, and prompt installation if it is not found.
vue list
will be deprecated, OR list available presets instead.
Default integration of vue-test-utils
and probably Jest as the runner (although it can lead to license concerns)
Better error reporting, e.g. jumping directly to source code from error overlay.
Grep for common warning / error messages and suggest potential doc links.
Auto port detection (suggested by @billyryanwill)
Your idea here
I realize this is in fact very similar to Poi and since @egoist has been an active contributor to vue-cli
itself, I would love to get feedback from @egoist and potentially collaborate with him to build the new version. Maybe we can even build this on top of a fork of Poi?
/cc @vuejs/collaborators
3.0.0-alpha.13
npm create test1
Please pick a preset: default (babel, eslint)
create successfull
ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist
I choosed taobao registry, I can't change anymore.
It's time for a major version bump. This will be a relatively small release but will include a number of necessary breaking changes.
@vue/babel-preset/app
, for now we use core-js 2 by default, babel 7.4.0 supports core-js 3, once we upgraded core-js, some undocumented public APIs may change)vue-template-loader
: preserveWhitespace: false
-> whitespace: 'condense'
#3853NODE_ENV=production
by default if not specified when running vue-cli-service build
#3859plugin-pwa
: manifest.json
should be generated during the build process rather than scaffolding #2981Most proposed new features other than plugin APIs can also be landed in v3.x so they are not listed here.
vue upgrade
overhaul, allowing running codemods from pluginsvue-cli-service e2e
command (already deprecated since 3.0 rc) (#3774)Please let us know your thoughts and if we missed anything. We'll be more than happy to explain our rationale around these decisions if there's any further questions.
If there's anything you (and the community) feel strongly about but is not found on this list, please make an effort to send a PR! We'll be more than happy to accept contributions.
3.0.0-beta.15
https://github.com/xrei/vuecli-bug
Well.. it's not hard to reproduce but takes time.
Run yarn serve
and develop for some hours :)
Stable working dev server
After some hours (~1-2) dev server will crash with an error:
95% emitting CopyPlugin
<--- Last few GCs --->
[2032:000001F314F3C8F0] 5471846 ms: Mark-sweep 1381.6 (1414.7) -> 1381.6 (1414.7) MB, 250.8 / 0.0 m
s allocation failure GC in old space requested
[2032:000001F314F3C8F0] 5472120 ms: Mark-sweep 1381.6 (1414.7) -> 1381.6 (1413.7) MB, 273.5 / 0.0 m
s last resort GC in old space requested
[2032:000001F314F3C8F0] 5472433 ms: Mark-sweep 1381.6 (1413.7) -> 1381.6 (1413.7) MB, 313.7 / 0.0 m
s last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 000001CC26384281]
Security context: 000002F26A1206A9 <JSObject>
1: fromString(aka fromString) [buffer.js:349] [bytecode=0000006AEF71E081 offset=148](this=000001
3071A022E1 <undefined>,string=0000031511A4D141 <Very long string[3793765]>,encoding=000002F26A131A29
<String[4]: utf8>)
2: from [buffer.js:201] [bytecode=0000006AEF71DC01 offset=11](this=0000023CE59638A9 <JSFunction
Buffer (sfi = 0000037B38A8B959)>,val...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::DecodeWrite
2: node_module_register
3: v8::internal::FatalProcessOutOfMemory
4: v8::internal::FatalProcessOutOfMemory
5: v8::internal::Heap::MaxHeapGrowingFactor
6: v8::internal::Factory::NewRawTwoByteString
7: v8::internal::Smi::SmiPrint
8: unibrow::Utf8DecoderBase::WriteUtf16Slow
9: v8::String::WriteUtf8
10: std::basic_ostream<char,std::char_traits<char> >::basic_ostream<char,std::char_traits<char> >
11: node::Buffer::New
12: node::Buffer::New
13: v8::internal::interpreter::BytecodeDecoder::Decode
14: v8::internal::RegExpImpl::Exec
15: v8::internal::RegExpImpl::Exec
16: v8::internal::RegExpImpl::Exec
17: 000001CC26384281
error Command failed with exit code 134.
https://jsfiddle.net/b5u87965/
when create a new vue project:
vue init webpack my-project
vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET
init a new vue project
vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET
4.5.17
Environment Info:
System:
OS: Windows 10 10.0.17763
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Not Found
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.1.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 4.5.18
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 4.5.18
@vue/cli-plugin-babel: 4.5.17 => 4.5.17
@vue/cli-plugin-router: 4.5.18
@vue/cli-plugin-vuex: 4.5.18
@vue/cli-service: 4.5.17 => 4.5.17
@vue/cli-shared-utils: 4.5.18
@vue/component-compiler-utils: 3.3.0
@vue/preload-webpack-plugin: 1.1.2
@vue/web-component-wrapper: 1.3.0
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.8 (16.8.3)
vue-style-loader: 4.1.3
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: Not Found
yarn build:normal
console output:
warning in ./src/test/invalid.vue
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> this is a invalid vue file.
|
@ ./src/test lazy ^\.\/.*\.vue$ namespace object
@ ./src/main.js
@ multi ./src/main.js
yarn build:error
console output:
warning in ./src/test/invalid.vue
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> this is a invalid vue file.
|
@ ./src/test lazy ^\.\/.*$ namespace object
@ ./src/main.js
@ multi ./src/main.js
There are two different outputs here:
@ ./src/test lazy ^\.\/.*\.vue$ namespace object
@ ./src/test lazy ^\.\/.*$ namespace object
I probably know the reason is that some dependencies of @vue/[email protected] have been updated, but I don't know which ones.
I've found that this also seems to be related to the .browserslistrc file, I tried this and it worked:
src/main.js
let component = '';
let componentPath = () => {
// return import('./test/' + `${component}.vue`);
return import('./test/' + component + '.vue');
};
But I still don't know why.
Scenario 1:
NODE_ENV = development
+ workbox v6 displays logs
- @vue/cli-plugin-pwa generates a noop service worker
Scenario 2:
NODE_ENV = production
- workbox v6 does not display logs
+ @vue/cli-plugin-pwa generates a service worker
Problem:
Adding configuration flag to disable noop service worker in development mode:
Scenario 3: (new Scenario be available in this case)
NODE_ENV = development && disableNoopServiceWorker = true
+ workbox v6 displays logs
+ @vue/cli-plugin-pwa generates a service worker
pwa: {
name : "test",
//...
disableNoopServiceWorker : true,
workboxPluginMode : "InjectManifest",
workboxOptions : {
//...
}
}
5.0.6
Environment Info:
System:
OS: macOS 11.5.2
CPU: (8) x64 Apple M1
Binaries:
Node: 12.22.12 - ~/.volta/tools/image/node/12.22.12/bin/node
Yarn: 1.22.15 - ~/.volta/tools/image/yarn/1.22.15/bin/yarn
npm: 6.14.16 - ~/.volta/tools/image/node/12.22.12/bin/npm
Browsers:
Chrome: 103.0.5060.53
Edge: Not Found
Firefox: Not Found
Safari: 14.1.2
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.1.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 5.0.6
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 5.0.6
@vue/cli-plugin-babel: ~5.0.0 => 5.0.6
@vue/cli-plugin-eslint: ~5.0.0 => 5.0.6
@vue/cli-plugin-router: 5.0.6
@vue/cli-plugin-typescript: ~5.0.0 => 5.0.6
@vue/cli-plugin-unit-jest: ~5.0.0 => 5.0.6
@vue/cli-plugin-vuex: 5.0.6
@vue/cli-service: ~5.0.0 => 5.0.6
@vue/cli-shared-utils: 5.0.6
@vue/compiler-core: 3.2.37
@vue/compiler-dom: 3.2.37
@vue/compiler-sfc: 3.2.37
@vue/compiler-ssr: 3.2.37
@vue/component-compiler-utils: 3.3.0
@vue/eslint-config-typescript: ^9.1.0 => 9.1.0
@vue/reactivity: 3.2.37
@vue/reactivity-transform: 3.2.37
@vue/runtime-core: 3.2.37
@vue/runtime-dom: 3.2.37
@vue/server-renderer: 3.2.37
@vue/shared: 3.2.37
@vue/test-utils: ^2.0.0-0 => 2.0.0
@vue/vue3-jest: ^27.0.0-alpha.1 => 27.0.0
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^8.0.3 => 8.7.1
jest-serializer-vue: 2.0.2
typescript: ~4.5.5 => 4.5.5
vue: ^3.2.13 => 3.2.37
vue-eslint-parser: 8.3.0
vue-hot-reload-api: 2.3.4
vue-loader: 17.0.0 (15.9.8)
vue-style-loader: 4.1.3
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: Not Found
Create a new Vue project with vue-cli with custom options: Vue 3, TypeScript, Eslint + Prettier, testing with jest
As stated in the eslint.vuejs.org guide here: https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-generate-no-undef-warnings "Compiler macros such as defineProps and defineEmits generate no-undef warnings" and thus "You need to enable the compiler macros environment in your ESLint configuration file."
No eslint "no-undef" warning when using defineProps, defineEmits, withDefaults.
Eslint throws warnings: 'withDefaults' is not defined.
I suggest adding "vue/setup-compiler-macros": true
to the default generated eslint config so those warnings don't appear anymore.
Fixes #7198
What kind of change does this PR introduce? (check at least one)
Does this PR introduce a breaking change? (check one)
Other information:
5.0.6
Environment Info:
System:
OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
CPU: (16) x64 AMD Ryzen 7 PRO 5850U with Radeon Graphics
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: Not Found
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: Not Found
Firefox: 101.0.1
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.1.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 5.0.6
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 5.0.6
@vue/cli-plugin-babel: ~5.0.0 => 5.0.6
@vue/cli-plugin-eslint: ~5.0.0 => 5.0.6
@vue/cli-plugin-router: 5.0.6
@vue/cli-plugin-vuex: 5.0.6
@vue/cli-service: ~5.0.0 => 5.0.6
@vue/cli-shared-utils: 5.0.6
@vue/component-compiler-utils: 3.3.0
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^8.0.3 => 8.7.1
vue: ^2.6.14 => 2.6.14
vue-eslint-parser: 8.3.0
vue-hot-reload-api: 2.3.4
vue-loader: 17.0.0 (15.9.8)
vue-style-loader: 4.1.3
vue-template-compiler: ^2.6.14 => 2.6.14
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 5.0.6
npm i npm run serve
The button showed should be red.
The red color is not applied, because the container class name imported in javascript (ES import) does not match the name generated by the "composes import".
It stopped working after upgrading to Vue cli v5 from v4
What kind of change does this PR introduce? (check at least one)
Does this PR introduce a breaking change? (check one)
Other information:
currently the error info is not print when the stats has errors so we add some code to print the error info
vuesion The most complete boilerplate for production-ready PWAs. With focus on performance, development speed, and best practices 一个灵活的、可扩展的、自定的,已经准备好
Vue-CRUD Application A Complete Single Page Application (SPA) or Product CRUD Application using Vue 3, Vue Router, Vue-Pagination, Searching, Sweet Al
Vue, Vuetify, Vuex, Vue-router, i18n boilerplate A good way to quickly start a Vue project with good foundations ! [ Demo ] ?? Features Vue 2.x Vuetif
Overview The boilerplate for making electron applications built with vue / nuxt. Currently runs with: Electron v12 Electron Builder v22 Vue v2 Nuxt v2
Vue 3 Webpack Boilerplate (Vue 3, Vue Router 4, Vuex 4, Typescript)
Cookiecutter Django-Vue Powered by Cookiecutter, inspired by Cookiecutter Django. Features Docker 12 Factor Server: Nginx Frontend: Vue + vue-cli + PW
Awesome Vue Boilerplate This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3. Getting
Vue Enterprise Boilerplate This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI. Questio
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
精美的IM前端客户端实现,基于vite + vue 3 + ant-design-vue, 可作为PWA应用使用,通过mirai-reactivity-ws对接mah作为后端。
?????? A wails template based on Vue and Vue-Router
This template allows you to quickly scaffold a Vue project with Vue Router, VueX, TailwindCss with JIT Compiler and vite as a bundler.
RouterDevs Dashboard básico que se conecta com uma API REST utilizando Vue.js ⬆️ Status ✔️ The main phase is complete ?? Automation and design phase a
Vue Starter ?? A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite. Table of Contents Project Setup Key Features Docker
VueJS 3 Starter ✨ A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS Architecture ├─ publi
vite-vue3-essential-typescript-eslint-starter This template should help get you started developing with Vue 3 and Typescript in Vite. The template use
Vue Typescript Starter Project Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production
Monty Hall Problem Projeto do Problema de Monty Hall, feito no Curso Vue JS 2 da Cod3r Veja em https://monty-hall-problem-lukkanog.vercel.app/ Feito c
Vue NestJs Boilerplate Have any questions? Want to get in contact? Hit me up on