init

README.md

@@ -0,0 +1,65 @@
+# vue-browserify-boilerplate
+
+> A full-featured Browserify + `vueify` setup with hot-reload, linting & unit testing.
+
+### Usage
+
+This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
+
+``` bash
+$ 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](https://github.com/vuejs/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:
+
+  ``` bash
+  npm install less --save-dev
+  ```
+
+  Then you can do:
+
+  ``` vue
+  <style lang="less">
+    /* write less! */
+  </style>
+  ```
+
+- The dev build is served using [http-server](https://github.com/indexzero/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](http://karma-runner.github.io/0.13/config/browsers.html) 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](https://github.com/karma-runner/karma-mocha).
+
+### Fork It And Make Your Own
+
+You can fork this repo to create your own boilerplate, and use it with `vue-cli`:
+
+``` bash
+vue init username/repo my-project
+```

meta.json

@@ -0,0 +1,22 @@
+{
+  "schema": {
+    "name": {
+      "type": "string",
+      "required": true,
+      "label": "Project name"
+    },
+    "description": {
+      "type": "string",
+      "required": true,
+      "label": "Project description"
+    },
+    "author": {
+      "type": "string",
+      "label": "Author"
+    },
+    "private": {
+      "type": "boolean",
+      "default": true
+    }
+  }
+}

template/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"]
+}

template/.eslintrc

@@ -0,0 +1,185 @@
+{
+  "plugins": [
+    "html"
+  ],
+
+  "env": {
+    "browser": true,
+    "node": true
+  },
+
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "destructuring": true,
+    "classes": true,
+    "defaultParams": true,
+    "blockBindings": true,
+    "modules": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "restParams": true,
+    "spread": true,
+    "forOf": true,
+    "generators": true,
+    "templateStrings": true,
+    "superInFunctions": true,
+    "experimentalObjectRestSpread": true
+  },
+
+  "rules": {
+    "accessor-pairs": 2,
+    "array-bracket-spacing": 0,
+    "block-scoped-var": 0,
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": 0,
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "complexity": 0,
+    "computed-property-spacing": 0,
+    "consistent-return": 0,
+    "consistent-this": 0,
+    "constructor-super": 2,
+    "curly": [2, "multi-line"],
+    "default-case": 0,
+    "dot-location": [2, "property"],
+    "dot-notation": 0,
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "func-names": 0,
+    "func-style": 0,
+    "generator-star-spacing": [2, { "before": true, "after": true }],
+    "guard-for-in": 0,
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "linebreak-style": 0,
+    "lines-around-comment": 0,
+    "max-nested-callbacks": 0,
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
+    "newline-after-var": 0,
+    "no-alert": 0,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-catch-shadow": 0,
+    "no-cond-assign": 2,
+    "no-console": 0,
+    "no-constant-condition": 0,
+    "no-continue": 0,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-div-regex": 0,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-else-return": 0,
+    "no-empty": 0,
+    "no-empty-character-class": 2,
+    "no-empty-label": 2,
+    "no-eq-null": 0,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 0,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inline-comments": 0,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 0,
+    "no-loop-func": 0,
+    "no-mixed-requires": 0,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-nested-ternary": 0,
+    "no-new": 2,
+    "no-new-func": 0,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-param-reassign": 0,
+    "no-path-concat": 0,
+    "no-process-env": 0,
+    "no-process-exit": 0,
+    "no-proto": 0,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-restricted-modules": 0,
+    "no-return-assign": 2,
+    "no-script-url": 0,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 0,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-sync": 0,
+    "no-ternary": 0,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-undefined": 0,
+    "no-underscore-dangle": 0,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": 2,
+    "no-unreachable": 2,
+    "no-unused-expressions": 0,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-use-before-define": 0,
+    "no-var": 0,
+    "no-void": 0,
+    "no-warning-comments": 0,
+    "no-with": 2,
+    "object-curly-spacing": 0,
+    "object-shorthand": 0,
+    "one-var": [2, { "initialized": "never" }],
+    "operator-assignment": 0,
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": 0,
+    "prefer-const": 0,
+    "quote-props": 0,
+    "quotes": [2, "single", "avoid-escape"],
+    "radix": 2,
+    "semi": [2, "never"],
+    "semi-spacing": 0,
+    "sort-vars": 0,
+    "space-after-keywords": [2, "always"],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, "always"],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-return-throw-case": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
+    "strict": 0,
+    "use-isnan": 2,
+    "valid-jsdoc": 0,
+    "valid-typeof": 2,
+    "vars-on-top": 0,
+    "wrap-iife": [2, "any"],
+    "wrap-regex": 0,
+    "yoda": [2, "never"]
+  }
+}

template/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist/build.js

template/README.md

@@ -0,0 +1,24 @@
+# {{ name }}
+
+> {{ description }}
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# lint all *.js and *.vue files
+npm run lint
+
+# run unit tests
+npm test
+```
+
+For more information see the [docs for vueify](https://github.com/vuejs/vueify).

template/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>{{ name }}</title>
+  </head>
+  <body>
+    <app></app>
+    <script src="dist/build.js"></script>
+  </body>
+</html>

template/karma.conf.js

@@ -0,0 +1,20 @@
+// https://github.com/Nikku/karma-browserify
+module.exports = function (config) {
+  config.set({
+    browsers: ['PhantomJS'],
+    frameworks: ['browserify', 'jasmine'],
+    files: ['test/unit/**/*.js'],
+    reporters: ['spec'],
+    preprocessors: {
+      'test/unit/**/*.js': ['browserify']
+    },
+    browserify: {
+      debug: true,
+      // needed to enable mocks
+      plugin: [require('proxyquireify').plugin]
+    },
+    // if you want to continuously re-run tests on file-save,
+    // replace the following line with `autoWatch: true`
+    singleRun: true
+  })
+}

template/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "{{ name }}",
+  "description": "{{ description }}",
+  "author": "{{ author }}",
+  {{#private}}
+  "private": true,
+  {{/private}}
+  "scripts": {
+    "dev": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js & http-server -c 1 -a localhost",
+    "build": "cross-env NODE_ENV=production browserify -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js",
+    "lint": "eslint --ext .js,.vue src test/unit",
+    "test": "karma start karma.conf.js"
+  },
+  "browserify": {
+    "transform": [
+      "vueify",
+      "babelify"
+    ]
+  },
+  "dependencies": {
+    "vue": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "babel-runtime": "^5.8.0",
+    "babelify": "^7.2.0",
+    "browserify": "^12.0.1",
+    "browserify-hmr": "^0.3.1",
+    "cross-env": "^1.0.5",
+    "eslint": "^1.10.3",
+    "eslint-plugin-html": "^1.1.0",
+    "http-server": "^0.8.5",
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.15",
+    "karma-browserify": "^4.4.2",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-spec-reporter": "0.0.23",
+    "phantomjs": "^1.9.19",
+    "proxyquireify": "^3.0.1",
+    "uglify-js": "^2.5.0",
+    "vue-hot-reload-api": "^1.2.2",
+    "vueify": "^8.0.0",
+    "vueify-insert-css": "^1.0.0",
+    "watchify": "^3.4.0"
+  }
+}

template/src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <hello></hello>
+  </div>
+</template>
+
+<script>
+import Hello from './components/Hello.vue'
+
+export default {
+  components: {
+    Hello
+  }
+}
+</script>
+
+<style>
+body {
+  font-family: Helvetica, sans-serif;
+}
+</style>

template/src/components/Hello.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="hello">
+    <h1>\{{ msg }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello World!'
+    }
+  }
+}
+</script>

template/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+/* eslint-disable no-new */
+new Vue({
+  el: 'body',
+  components: { App }
+})

template/test/unit/Hello.spec.js

@@ -0,0 +1,17 @@
+/* global describe, it, expect */
+
+import Vue from 'vue'
+import Hello from '../../src/components/Hello.vue'
+
+describe('Hello.vue', () => {
+  it('should render correct contents', () => {
+    const vm = new Vue({
+      template: '<div><hello></hello></div>',
+      components: { Hello }
+    }).$mount()
+    expect(vm.$el.querySelector('.hello h1').textContent).toBe('Hello World!')
+  })
+})
+
+// also see example testing a component with mocks at
+// https://github.com/vuejs/vueify-example/blob/master/test/unit/a.spec.js#L22-L43