vue-browserify-boilerplate

A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

Usage

This is a project template for vue-cli.

$ npm install -g vue-cli
$ vue init browserify my-project
$ cd my-project
$ npm install
$ npm run dev

What's Included

• npm run dev: Browserify + vueify with proper config for source map & hot-reload.

• npm run build: Production build with HTML/CSS/JS minification.

• npm run lint: Lint JavaScript and *.vue files with ESLint.

• npm test: Unit tests in PhantomJS with Karma + karma-jasmine + karma-browserify, with support for mocking and ES2015.

For more information see the docs for vueify.

Customizations

You will likely need to do some tuning to suit your own needs:

• Install additional libraries that you need, e.g. vue-router, vue-resource, vuex, etc...

• Use your preferred .eslintrc config. Don't forget to keep the plugin field so that ESLint can lint *.vue files.

• Add your preferred CSS pre-processor, for example:

  npm install less --save-dev
  

  Then you can do:

  <style lang="less">
    /* write less! */
  </style>
  

• The dev build is served using http-server. You can edit the NPM dev script in package.json to add a proxy option so that ajax requests are proxied to a separate backend API.

• For unit testing:

  • You can run the tests in multiple real browsers by installing more karma launchers and adjusting the browsers field in karma.conf.js.

  • You can also swap out Jasmine for other testing frameworks, e.g. use Mocha with karma-mocha.

Fork It And Make Your Own

You can fork this repo to create your own boilerplate, and use it with vue-cli:

vue init username/repo my-project