📦 A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)
Clone or download
Vitre and egoist Update webpack.base.js (#153)
Word `root` typo fix
Latest commit 57cdad5 Dec 5, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs move postcss config to package.json Jun 3, 2017
template Update webpack.base.js (#153) Dec 5, 2017
.editorconfig add editorconfig Aug 12, 2016
.gitignore switch files in jsx mode Aug 12, 2016
LICENSE init Aug 6, 2016
README.md Update README.md (#152) Oct 31, 2017
meta.json tweaks Jun 3, 2017
package.json Release v3.3.1 Aug 2, 2017
sao.js tweaks Sep 6, 2017
yarn.lock move babel config to package.json Jun 3, 2017



VuePack is a modern Vue.js starter
which uses Vue 2, Vuex, Vue-router and Webpack 2.


I highly recommend you to try Poi, you can develop Vue.js app with no-config until you need it. Less boilerplate code, more happiness ❤️

Here's the plan for VuePack 4.0, you can support my work by donating or joining the development.


Check out the docs for more usages.

Get Started

You'd better have node >=4 and npm >=3 installed:


This template can be used with sao, which also means you can use the template offline:

yarn global add sao
# from npm
sao vuepack new-project
# or git repo
sao egoist/vuepack new-project


$ npm install -g vue-cli
$ vue init egoist/vuepack new-project
$ cd new-project
$ npm install

# edit files and start developing
$ npm run dev
# bundle all scripts and styles for production use
$ npm run build

# lint your code
$ npm run lint

For Windows users

Install git with unix tools before getting started.

Folder Structure

If you did not enable Electron support, the dest folder is ./dist, otherwise it's ./app/dist.

./app folder only exists when you enabled Electron support.

├── app             # the actual app you want to bundle with Electron
│    ├── dist       # directory which contains all bundled files
│    └── index.js   # entry file for Electron
├── build           # webpack configs and other scripts
├── client          # client-side app files
├── dist            # bundled files and index.html
│    ├── index.html
│    └── [...other bundled files]  
├── tests           # e2e tests written by testcafe 
├── node_modules    # dependencies
└── package.json    # package info

Custom template

You want to customize the output of index.html, simply modify index.html, see more at html-webpack-plugin.