Vue.js: Quickly build projects with VUE-CLI

What is VUE-CLI?

VUE-CLI is a vue.js scaffold for automatic generation of vue.js template works.

How to use VUE-CLI?

Before installing VUE-CLI, you need to install Vue and Webpack, do not know how to install can see my previous article "Vue + Webpack Implementation of the SPA application Document"
Installing VUE-CLI

NPM install-g VUE-CLI//Global installation VUE-CLI
Vue init webpack projectName//Generate the project name ProjectName template, here the project name ProjectName with your own writing
CD ProjectName
NPM Install//Initialize installation dependencies

So the sub-project is installed. The following directory for the generated project is like this


And then execute

NPM Run Dev

When you open http://localhost:8080 in your browser, you can see the Welcome page.


But this can only be run locally, how to access it on our own server? You need to do this

NPM Run Build

Will generate a static file, in the root directory of the Dist, there is a index.html, which is the server access to the path specified here to access our own projects. But I found a problem is to generate index.html referenced in the CSS and JS reference path is not correct, this time you need to modify the configuration.

Enter Config/index.js

The reference path for the original configuration is


I change myself to


This will enable normal access.

Vue.js: Quickly build projects with VUE-CLI