Vue Cli 4

Posted on  by admin

Vue CLI 4 is the latest version of the Vue Command Line Interface.

Inspect Your Webpack Config Without Ejecting

Throughout this tutorial, we are going to learn to use Vue CLI to generate our Vue front-end application.

Vue CLI 4 Tutorial by Example. In this tutorial, we're going to see:.

How to install the latest version of Vue CLI — version 4. How to use various features of the Vue CLI v4. How to use the Vue CLI v3 to create a front-end .

How to set environment variables for development and production .

How to add a proxy to forward API calls. How to install and add Vue CLI plugins manually etc. The Vue CLI v4 provides a new experience to developers as it allows you to easily generate new Vue projects with zero initial configuration but once your project needs more control you have the possibility to add more configuration options using plugins.


Unlike create-react-app, you can customize your configuration without ejecting but only via Vue CLI plugins. The Vue CLI is a complete tooling system that provides many features, out of the box, such as:.



  • Interactive project scaffolding via @vue/cli.
  • Zero configuration rapid prototyping via @vue/cli and @vue/cli-service-global.

Step 1 - Installing Vue CLI 4

A runtime dependency (@vue/cli-service) that provides many features: It's upgradeable, built on top of webpack, has sensible defaults, configurable via in-project config file, extensible via plugins etc. Official plugins to support using powerful existing tools in the front-end ecosystem.

So you don't need to eject webpack in order to customize your project's configuration. You can install the Vue CLI v4 from npm using the following command:.

AMD Module Loaders

Runtime + Compiler vs. Runtime-only

This will install the Vue CLI 4 globally on your system so depending on your npm configuration your may need super-user access i.e add sudo on debian-based systems.

Vue is using scoped packages for various packages such as the cli using the @vue namespace. If you are using yarn instead of npm, you can run the following command instead:.

  1. Using the Vue CLI 4, you can create or generate a new Vue app by running the following command from your terminal:. You'll be asked for various features such as TypeScript support, adding the Vue Router, adding Vuex etc.
  2. Choose the features you need in your application and press Enter. Wait for application to get generated and for packages to install before you can use your newly created Vue application. After generating the new Vue application using Vue CLI v3, you can use various built-in scripts to work with the application.


Navigate inside your project's root folder and run the following command in order to serve your front-end application using a local development server:. This is the output you are going to get:. Using your web browser, you can navigate to http://localhost:8080/ to see your Vue application up and running.

The Vue front-end application generated with Vue CLI v4 has a special directory structure.

  • Let's use the tree command to display this structure excluding the node_modules folder which contains installed packages:.
  • The output is similar to the following:. Let's quickly describe these files and folders:. babel.config.js: Contains Babel (ES Transpiler that allows you to use modern JavaScript features which are not yet implemented on the browser ) configuration.
  • package.json: Required for each Node.js module. It contains project's meta information and dependencies. public: This is a folder that contains public assets such as index.html and favicon.


src: This is the folder where we are going to spend most time. It contains the source code of our Vue application. src/main.js: This file contains the initialization or bootstrapping code of our application. src/App.vue: This file contains the main component of our Vue application.

src/assets: It contains the static assets. src/components: It contains the components of our Vue application.

  • The Vue CLI v4 provides many other npm scripts (build and lint) which setups zero-configuration development and production environments with various features such as hot code or module reloading, concatenation, minification and linting etc. If your open package.json of your project you'll see different available (serve, build and lint) scripts:. All scripts use the vue-cli-service which has ready webpack configurations for development and production so you don't have to deal with Webpack when you are just starting to work with your project. Once your Vue application is ready, you can run the build command to build a production ready version of your project:.
  • You can also define environment variables to be available for specific environments i.e development or production by adding an appropriate suffix to the name of the environment file. .env.development: For development . .env.production: For production.
  • Environment variables defined in .env will be overridden with the same variables if they are defined in .env.development or .env.production etc. Sometimes, when making API calls from your Vue front-end application, you'll need to use a proxy to proxy calls in order to avoid issues such as CORS related to Same Origin Policy enforced by web browsers. Vue CLI v4 provides a built-in feature to use a proxy. You can configure a proxy by simply adding a proxy object to package.json file.

Semantic Versioning

So if you need to make API calls to Django server running at http://localhost:8000 you simply call http://localhost:8080/api/* and Vue CLI will take care of forwarding the calls to http://localhost:8000/*.

Vue CLI v4 makes use of plugins to provide different functionalities. When you choose features at the start of project initialization the Vue CLI installs and invokes the required plugins but you can also install any plugin and invoke it manually.

Release Notes

For example, you can add the Progressive Web App (PWA) functionality using the following commands:. The Vue CLI relives you from manually dealing with Webpack configuration by providing plugins for configuring many features and dependencies.

Compatibility Note

But, in many situations, you'll want to have access to the Webpack configuration file for making advanced things not available via a CLI plugin. Aside from ejecting, the Vue CLI allows you also to inspect the Webpack configuration to see what's the Vue CLI is generating.

Development vs. Production Mode

  • This will help you to make sure the generated configuration is what you're expecting. In your project generated with the Vue CLI, run the following command:.
  • This will display the Webpack configuration in your terminal but you can write it into a file by running the following command:.
  • You can also inspect portions of the configuration file using dots paths:. In this tutorial, we've seen how to install the Vue CLI 4 and various features such as adding plugins, adding environment variables and proxying API calls. ** 安装步骤和vue-cli3.0的一模一样**. vue create project-name.
  • default 是 使用默认配置. Manually select features 是 自定义配置. 语法检测工具,这里我选择ESLint + Prettier. cd project-name // 进入项目根目录npm run serve // 运行项目. Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. Vue Router & Vuex.
  • ESLint / TSLint / Prettier. 用 Jest 或 Mocha 进行单元测试. 用 Cypress 或者 Nightwatch 进行 E2E 测试. 命令:vue create vueapp. 7、关于Babel, PostCSS, ESLint, etc.这些配置文件你是想放在package.json里面还是单独放在外面编辑器一般默认会在项目根目录下寻找配置文件,这里我就直接回车选择In dedicated config files.
  • 图形化操作非常方便,我就不一步步演示了,主要懒得贴图 (°ー°〃). 根目录中多了一个.browserslist文件,可以指定项目的目标浏览器的范围用于转译的 JavaScript 特性和添加CSS 浏览器前缀,可以减少兼容代码提高代码质量如果想少一个文件,你也可以在package.json中添加browserslist字段,参数是一个数组. 使用 npx browserslist 可以查看项目的浏览器兼容情况将需要支持的目标浏览器参数放在文件中就好.
  • 在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令Vue CLI 项目有三个模式: development 模式用于启动,production 模式用于打包和e2e测试,test 模式用于unit测试.
  • 这个命令会产生两个应用的版本:一个现代版的包,面向支持 ES modules 的现代浏览器,另一个旧版的包,面向不支持的旧浏览器而且不需要我们手动去部署和设置什么,简直很贴心.

Explanation of Different Builds