├── .gitignore ├── LICENSE ├── README.md ├── meta.json ├── package.json └── template ├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── build ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── index.html ├── package.json ├── src ├── dev.js ├── hello.vue ├── index.js └── main.vue └── test └── unit ├── .eslintrc ├── index.js ├── karma.conf.js └── specs └── hello.spec.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | docs/_book -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Allen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue2-component-boilerplate 2 | It's a boilerplate for that people who want to develop a vue2 component. This boilerplate inspired by [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), but it's 3 | more simple and suitable for developing a vue2 component instead a vue application or a SPA. 4 | 5 | * Easy to use and understand, less configurations and template 6 | * Use ```webpack-dev-server``` for hot reload development 7 | * A minimal entry and html for preview the result on development 8 | * Only compitable for ```vue2.0``` 9 | 10 | I saw some vue components on github which use boilerplate but there are a lots of configurations 11 | and files is useless, so hope this minimal boilerplate can help you to have a clean and simple enviorment for developing your component. 12 | 13 | ## Getting Started 14 | For using this boilerplate, you need to scaffold your repo by [vue-cli](https://github.com/vuejs/vue-cli) 15 | ```sh 16 | $ vue init AllenFang/vue2-component-boilerplate YOUR_PROJECT_NAME 17 | $ cd YOUR_PROJECT_NAME 18 | $ npm install 19 | $ npm run dev 20 | ``` 21 | 22 | ## What's Included 23 | * ```npm run dev``` : Development 24 | * Hot reload 25 | * ```webpack-dev-server``` as dev server 26 | 27 | * ```npm run build``` : Build for production 28 | * Javascript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2) 29 | * Extract css(Default is false, but you can enable it) 30 | * The bundled js will be placed in ```dist``` folder 31 | 32 | * ```npm run unit``` : Unit test 33 | 34 | ## Project Structure 35 | ```sh 36 | ├── build/ # webpack configuration files 37 | │ └── ... 38 | ├── src/ 39 | │   ├── dev.js # the entry point for development 40 | │   ├── hello.vue # just a sample vue component 41 | │   ├── index.js # the entry point for production 42 | │   ├── main.vue # the index for your components 43 | ├── test/ # unit tests 44 | │ ├── specs # testing spec 45 | │ │ └── ... # testing codes 46 | │ ├── .eslintrc # eslint config for testing 47 | │ ├── index.js # the entry for karam 48 | │ └── karma.conf.js # karma config file 49 | ├── .babelrc # babel config 50 | ├── .editorconfig # editor config 51 | ├── .eslintrc.js # eslint config 52 | ├── .gitignore # git ignore config 53 | ├── index.html # html used on webpack-dev-server 54 | └── package.json # package.json 55 | └── README.md # README.md 56 | ``` 57 | -------------------------------------------------------------------------------- /meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "prompts": { 3 | "name": { 4 | "type": "string", 5 | "required": true, 6 | "message": "Project name" 7 | }, 8 | "description": { 9 | "type": "string", 10 | "required": false, 11 | "message": "Project description", 12 | "default": "A Vue.js 2.0 Component" 13 | }, 14 | "version": { 15 | "type": "string", 16 | "required": false, 17 | "message": "Initial version", 18 | "default": "0.0.0" 19 | }, 20 | "author": { 21 | "type": "string", 22 | "message": "Author" 23 | }, 24 | "lint": { 25 | "type": "confirm", 26 | "message": "Use ESLint to lint your code?" 27 | }, 28 | "lintConfig": { 29 | "when": "lint", 30 | "type": "list", 31 | "message": "Pick an ESLint preset", 32 | "choices": [ 33 | { 34 | "name": "Standard (https://github.com/feross/standard)", 35 | "value": "standard", 36 | "short": "Standard" 37 | }, 38 | { 39 | "name": "AirBNB (https://github.com/airbnb/javascript)", 40 | "value": "airbnb", 41 | "short": "AirBNB" 42 | }, 43 | { 44 | "name": "none (configure it yourself)", 45 | "value": "none", 46 | "short": "none" 47 | } 48 | ] 49 | }, 50 | "ECMAScript": { 51 | "required": true, 52 | "type": "list", 53 | "message": "Pick a script versoin:", 54 | "choices": [ 55 | { 56 | "name": "ES6", 57 | "value": "es6", 58 | "short": "ES6" 59 | }, 60 | { 61 | "name": "ES5", 62 | "value": "es5", 63 | "short": "ES5" 64 | } 65 | ] 66 | }, 67 | "extract": { 68 | "type": "confirm", 69 | "message": "Extract css on production?", 70 | "default": false 71 | }, 72 | "unit": { 73 | "type": "confirm", 74 | "message": "Setup unit tests with Karma + Mocha?" 75 | } 76 | }, 77 | "filters": { 78 | ".eslintrc.js": "lint", 79 | "test/unit/**/*": "unit" 80 | }, 81 | "completeMessage": "To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack" 82 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-component-boilerplate", 3 | "version": "0.2.0", 4 | "license": "MIT", 5 | "description": "It's boilerplate for that people who want to develop a vue2 component", 6 | "scripts": { 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /template/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /template/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | {{#if_eq lintConfig "standard"}} 8 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 9 | extends: 'standard', 10 | {{/if_eq}} 11 | {{#if_eq lintConfig "airbnb"}} 12 | extends: 'airbnb-base', 13 | {{/if_eq}} 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | "globals": { 19 | window: true, 20 | document: true 21 | }, 22 | {{#if_eq lintConfig "airbnb"}} 23 | // check if imports actually resolve 24 | 'settings': { 25 | 'import/resolver': { 26 | 'webpack': { 27 | 'config': 'build/webpack.base.conf.js' 28 | } 29 | } 30 | }, 31 | {{/if_eq}} 32 | // add your custom rules here 33 | 'rules': { 34 | {{#if_eq lintConfig "standard"}} 35 | // allow paren-less arrow functions 36 | 'arrow-parens': 0, 37 | // allow async-await 38 | 'generator-star-spacing': 0, 39 | {{/if_eq}} 40 | {{#if_eq lintConfig "airbnb"}} 41 | // don't require .vue extension when importing 42 | 'import/extensions': ['error', 'always', { 43 | 'js': 'never', 44 | 'vue': 'never' 45 | }], 46 | // allow optionalDependencies 47 | 'import/no-extraneous-dependencies': ['error', { 48 | 'optionalDependencies': ['test/unit/index.js'] 49 | }], 50 | {{/if_eq}} 51 | // allow debugger during development 52 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | {{#unit}} 6 | test/unit/coverage 7 | {{/unit}} 8 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} -------------------------------------------------------------------------------- /template/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 3 | 4 | exports.assetsPath = function (_path) { 5 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 6 | ? config.build.assetsSubDirectory 7 | : config.dev.assetsSubDirectory 8 | return path.posix.join(assetsSubDirectory, _path) 9 | } 10 | 11 | exports.cssLoaders = function (options) { 12 | options = options || {} 13 | // generate loader string to be used with extract text plugin 14 | function generateLoaders (loaders) { 15 | var sourceLoader = loaders.map(function (loader) { 16 | var extraParamChar 17 | if (/\?/.test(loader)) { 18 | loader = loader.replace(/\?/, '-loader?') 19 | extraParamChar = '&' 20 | } else { 21 | loader = loader + '-loader' 22 | extraParamChar = '?' 23 | } 24 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 25 | }).join('!') 26 | 27 | // Extract CSS when that option is specified 28 | // (which is the case during production build) 29 | if (options.extract) { 30 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 31 | } else { 32 | return ['vue-style-loader', sourceLoader].join('!') 33 | } 34 | } 35 | 36 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 37 | return { 38 | css: generateLoaders(['css']) 39 | } 40 | } -------------------------------------------------------------------------------- /template/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var projectRoot = path.resolve(__dirname, '../'); 3 | 4 | module.exports = { 5 | entry: { 6 | app: './src/index.js' 7 | }, 8 | output: { 9 | path: path.resolve(__dirname, '../dist'), 10 | publicPath: '/', 11 | filename: '[name].js' 12 | }, 13 | resolve: { 14 | extensions: ['', '.js', '.vue'], 15 | fallback: [path.join(__dirname, '../node_modules')], 16 | alias: { 17 | 'src': path.resolve(__dirname, '../src') 18 | } 19 | }, 20 | resolveLoader: { 21 | fallback: [path.join(__dirname, '../node_modules')] 22 | }, 23 | {{#lint}} 24 | eslint: { 25 | formatter: require('eslint-friendly-formatter') 26 | }, 27 | {{/lint}} 28 | module: { 29 | {{#lint}} 30 | preLoaders: [{ 31 | test: /\.vue$/, 32 | loader: 'eslint', 33 | include: projectRoot, 34 | exclude: /node_modules/ 35 | }, { 36 | test: /\.js$/, 37 | loader: 'eslint', 38 | include: projectRoot, 39 | exclude: /node_modules/ 40 | }], 41 | {{/lint}} 42 | loaders: [{ 43 | test: /\.vue$/, 44 | loader: 'vue' 45 | }, { 46 | test: /\.js$/, 47 | loader: 'babel', 48 | include: projectRoot, 49 | exclude: /node_modules/ 50 | }] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /template/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var merge = require('webpack-merge'); 4 | var baseWebpackConfig = require('./webpack.base.conf'); 5 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | 7 | // add hot-reload related code to entry chunks 8 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 9 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]); 10 | }) 11 | 12 | module.exports = merge(baseWebpackConfig, { 13 | entry: { 14 | app: './src/dev.js' 15 | }, 16 | devtool: '#eval-source-map', 17 | plugins: [ 18 | new webpack.DefinePlugin({ 19 | 'process.env': "'development'" 20 | }), 21 | new webpack.optimize.OccurenceOrderPlugin(), 22 | new webpack.HotModuleReplacementPlugin(), 23 | new webpack.NoErrorsPlugin(), 24 | new HtmlWebpackPlugin({ 25 | filename: 'index.html', 26 | template: 'index.html', 27 | inject: true 28 | }) 29 | ] 30 | }); -------------------------------------------------------------------------------- /template/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var merge = require('webpack-merge'); 4 | var baseWebpackConfig = require('./webpack.base.conf'); 5 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 6 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | var utils = require('./utils'); 8 | 9 | var distDir = path.resolve(__dirname, '../dist'); 10 | 11 | var webpackConfig = merge(baseWebpackConfig, { 12 | devtool: '#source-map', 13 | output: { 14 | filename: 'js/[name].[chunkhash].js', 15 | chunkFilename: 'js/[id].[chunkhash].js' 16 | }, 17 | vue: { 18 | loaders: utils.cssLoaders({ 19 | sourceMap: true, 20 | extract: true 21 | }) 22 | }, 23 | plugins: [ 24 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 25 | new webpack.DefinePlugin({ 26 | 'process.env': "'production'" 27 | }), 28 | {{#extract}} 29 | new ExtractTextPlugin('css/[name].[contenthash].css'), 30 | {{/extract}} 31 | new webpack.optimize.UglifyJsPlugin({ 32 | compress: { 33 | warnings: false 34 | } 35 | }), 36 | new webpack.optimize.OccurenceOrderPlugin(), 37 | // extract css into its own file 38 | new ExtractTextPlugin('css/[name].[contenthash].css') 39 | ] 40 | }); 41 | 42 | module.exports = webpackConfig; 43 | -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ name }} 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "version": "{{ version }}", 4 | "description": "{{ description }}", 5 | "author": "{{ author }}", 6 | "private": true, 7 | "scripts": { 8 | "build": "webpack -p --config build/webpack.prod.conf.js", 9 | "dev": "webpack-dev-server --inline --hot --config build/webpack.dev.conf.js"{{#unit}}, 10 | "unit": "karma start test/unit/karma.conf.js --single-run"{{/unit}} 11 | }, 12 | "dependencies": { 13 | "vue": "^2.0.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | {{#lint}} 18 | "babel-eslint": "^7.0.0", 19 | {{/lint}} 20 | "babel-loader": "^6.0.0", 21 | "babel-plugin-transform-runtime": "^6.0.0", 22 | "babel-preset-es2015": "^6.0.0", 23 | "babel-preset-stage-2": "^6.0.0", 24 | "babel-register": "^6.0.0", 25 | "babel-runtime": "^6.0.0", 26 | "css-loader": "^0.25.0", 27 | {{#lint}} 28 | "eslint": "^3.7.1", 29 | "eslint-friendly-formatter": "^2.0.5", 30 | "eslint-loader": "^1.5.0", 31 | "eslint-plugin-html": "^1.3.0", 32 | {{#if_eq lintConfig "standard"}} 33 | "eslint-config-standard": "^6.1.0", 34 | "eslint-plugin-promise": "^2.0.1", 35 | "eslint-plugin-standard": "^2.0.1", 36 | {{/if_eq}} 37 | {{#if_eq lintConfig "airbnb"}} 38 | "eslint-config-airbnb-base": "^8.0.0", 39 | "eslint-import-resolver-webpack": "^0.6.0", 40 | "eslint-plugin-import": "^1.16.0", 41 | {{/if_eq}} 42 | {{/lint}} 43 | "extract-text-webpack-plugin": "^1.0.1", 44 | "function-bind": "^1.0.2", 45 | "html-webpack-plugin": "^2.8.1", 46 | {{#unit}} 47 | "karma": "^1.3.0", 48 | "karma-coverage": "^1.1.1", 49 | "karma-mocha": "^1.2.0", 50 | "karma-phantomjs-launcher": "^1.0.0", 51 | "karma-sinon-chai": "^1.2.0", 52 | "karma-sourcemap-loader": "^0.3.7", 53 | "karma-spec-reporter": "0.0.26", 54 | "karma-webpack": "^1.7.0", 55 | "lolex": "^1.4.0", 56 | "mocha": "^3.1.0", 57 | "chai": "^3.5.0", 58 | "sinon": "^1.17.3", 59 | "sinon-chai": "^2.8.0", 60 | "inject-loader": "^2.0.1", 61 | "isparta-loader": "^2.0.0", 62 | "phantomjs-prebuilt": "^2.1.3", 63 | {{/unit}} 64 | "vue-loader": "^9.4.0", 65 | "vue-style-loader": "^1.0.0", 66 | "webpack": "^1.13.2", 67 | "webpack-dev-server": "^1.16.2", 68 | "webpack-merge": "^0.14.1" 69 | }, 70 | "engines": { 71 | "node": ">= 4.0.0" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /template/src/dev.js: -------------------------------------------------------------------------------- 1 | {{#if_eq ECMAScript "es5"}} 2 | var Vue = require('vue'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 3 | var Main = require('./main'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 4 | {{/if_eq}} 5 | {{#if_eq ECMAScript "es6"}} 6 | import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 7 | import Main from './main'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 8 | {{/if_eq}} 9 | 10 | {{#if_eq lintConfig "airbnb"}} 11 | /* eslint-disable no-new */ 12 | {{/if_eq}} 13 | {{#if_eq lintConfig "standard"}} 14 | /* eslint-disable no-new */ 15 | {{/if_eq}} 16 | new Vue({ 17 | el: '#app', 18 | ...Main{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 19 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 20 | -------------------------------------------------------------------------------- /template/src/hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | 30 | 35 | -------------------------------------------------------------------------------- /template/src/index.js: -------------------------------------------------------------------------------- 1 | {{#if_eq ECMAScript "es5"}} 2 | var Main = require('./main'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 3 | {{/if_eq}} 4 | 5 | {{#if_eq ECMAScript "es6"}} 6 | import Main from './main'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 7 | {{/if_eq}} 8 | 9 | if (typeof window !== 'undefined') { 10 | window.Main = Main{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 11 | } 12 | 13 | {{#if_eq ECMAScript "es5"}} 14 | module.exports = { 15 | Main: Main{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 16 | }{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 17 | {{/if_eq}} 18 | {{#if_eq ECMAScript "es6"}} 19 | {{#if_eq lintConfig "airbnb"}} 20 | /* eslint import/prefer-default-export: 0 */ 21 | {{/if_eq}} 22 | export { 23 | Main{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 24 | }{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 25 | {{/if_eq}} -------------------------------------------------------------------------------- /template/src/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | -------------------------------------------------------------------------------- /template/test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "mocha": true 5 | }, 6 | "globals": { 7 | "expect": true, 8 | "sinon": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /template/test/unit/index.js: -------------------------------------------------------------------------------- 1 | // Polyfill fn.bind() for PhantomJS 2 | /* eslint-disable no-extend-native */ 3 | Function.prototype.bind = require('function-bind'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 7 | testsContext.keys().forEach(testsContext){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 13 | srcContext.keys().forEach(srcContext){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 14 | -------------------------------------------------------------------------------- /template/test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 2 | var merge = require('webpack-merge'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 3 | var baseConfig = require('../../build/webpack.base.conf'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 4 | var webpack = require('webpack'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 5 | var projectRoot = path.resolve(__dirname, '../../'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 6 | 7 | var webpackConfig = merge(baseConfig, { 8 | devtool: '#inline-source-map', 9 | vue: { 10 | loaders: { 11 | js: 'isparta' 12 | } 13 | }, 14 | plugins: [ 15 | new webpack.DefinePlugin({ 16 | 'process.env': '"testing"' 17 | }) 18 | ] 19 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 20 | 21 | // no need for app entry during tests 22 | delete webpackConfig.entry{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 23 | 24 | // make sure isparta loader is applied before eslint 25 | webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 26 | webpackConfig.module.preLoaders.unshift({ 27 | test: /\.js$/, 28 | loader: 'isparta', 29 | include: path.resolve(projectRoot, 'src'){{#if_eq lintConfig "airbnb"}},{{/if_eq}} 30 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 31 | 32 | // only apply babel for test files when using isparta 33 | webpackConfig.module.loaders.some(function (loader, i) { 34 | if (loader.loader === 'babel') { 35 | loader.include = path.resolve(projectRoot, 'test/unit'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 36 | return true{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 37 | } 38 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 39 | 40 | module.exports = function (config) { 41 | config.set({ 42 | // to run in additional browsers: 43 | // 1. install corresponding karma launcher 44 | // http://karma-runner.github.io/0.13/config/browsers.html 45 | // 2. add it to the `browsers` array below. 46 | browsers: ['PhantomJS'], 47 | frameworks: ['mocha', 'sinon-chai'], 48 | reporters: ['spec', 'coverage'], 49 | files: ['./index.js'], 50 | preprocessors: { 51 | './index.js': ['webpack', 'sourcemap'] 52 | }, 53 | webpack: webpackConfig, 54 | webpackMiddleware: { 55 | noInfo: true{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 56 | }, 57 | coverageReporter: { 58 | dir: './coverage', 59 | reporters: [ 60 | { type: 'lcov', subdir: '.' }, 61 | { type: 'text-summary' }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 62 | ] 63 | }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 64 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 65 | }{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 66 | -------------------------------------------------------------------------------- /template/test/unit/specs/hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Hello from 'src/hello'; 3 | 4 | describe('hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const vm = new Vue({ 7 | el: document.createElement('div'), 8 | render: h => h(Hello){{#if_eq lintConfig "airbnb"}},{{/if_eq}} 9 | }); 10 | expect(vm.$el.querySelector('.hello h1').textContent) 11 | .to.equal('Welcome to Your Vue.js App'); 12 | }); 13 | }); 14 | --------------------------------------------------------------------------------