A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
Vue JavaScript HTML
Latest commit 7b45fbb Jan 20, 2017 @LinusBorg LinusBorg committed on GitHub add stage-2 preset
stage 2 preset is a devDependency but was missing from babelrc. Should be included for the object spread operator
Permalink
Failed to load latest commit information.
template add stage-2 preset Jan 20, 2017
README.md More direct 1.0 usage note. Aug 19, 2016
meta.json Merge pull request #25 from charbelrami/include-version Nov 2, 2016

README.md

vue-browserify-boilerplate

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

This template is Vue 2.0 compatible. For Vue 1.x use this command: vue init browserify#1.0 my-project

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