Awesome Open Source
Awesome Open Source

Vue Boilerplate Template

🍒(vue webpack vuex vue-router vue-i18n element-ui) out of the box
🍎 Nice Boilerplate Template for creating medium plus Vue.js(2.*) project

Goal and Philosophy

For how to build medium-sized (+) VUE projects, provide some reference based on past experience. The latest Vue Boilerplate based on vue-cli3 has been open source: awesome-vue-cli3-example, If you pay attention to it, I believe it is very worthwhile 🎉.


Node.js (>=4.x, 8.x preferred), Npm version 4+(Yarn preferred), and Git.


Online Demo Page



git clone (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

Go to http://localhost:8080/. If port 8080 is already in use on your machine, the program will specify the available port (incremental) for you, for example, 8081 / 8082 .... Of course, you can temporarily replace the port using the following command:

PORT=8888 npm run dev

Additional supplement: You need to make sure that PORT is a command that can be executed on your machine .

More Command
npm run build

Equivalent execution node build.js, initiate a build project .

npm run build:dll

Equivalent execution webpack --config build/webpack.dll.conf.js, For more information see webpack.DllPlugin.

npm run jarvis / yarn run jarvis

run webpack-jarvis(A very intelligent browser based Webpack dashboard),In your browser open: localhost:1337 , you have it.

JARVIS for Webpack

npm run pretest

Using nodejs to build the local server: http://localhost:3000/ , do a simple pre test for the code after the package.

npm run analyz

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. It will automatically open this address:http://localhost:8888/ .


Dependent plugin list

  • vue2
  • vue-router
  • vuex
  • vue-i18n
  • axios
  • bootstrap
  • element-ui
  • lodash
  • moment dayjs
  • js-cookie
  • ... ...

Operation request

Your backend can return the following format data, it's better .

  success: true,
  message: 'err message content',
  value: [
    // Useful data

At the front end, you can handle the request like this:

let params = {
  // Interface required parameters
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false

So considerate, Template has been helped to handle the request uniformly, so you can be so easy to use, of course, you can change your own as needed in the helper/ajax.js file .



See the example in the boilerplate template. Or An example that has been applied, Online address:



Copyright (c) 2017-present, nicejade.

Alternatives To Vue Boilerplate Template
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,160,038
Vue (73,249
Vuejs2 (73,195
Webpack (23,949
Admin (21,748
Router (13,760
Vuex (5,698
I18n (4,935
Vue Router (2,096
Element Ui (1,693
Lodash (1,519
Boilerplate Template (650
Vue I18n (77
Vue Boilerplate (38
Vuex3 (24