├── README.md ├── meta.json └── template ├── .babelrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── build ├── dev-server.js ├── karma.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── package.json ├── src ├── App.css ├── App.html ├── App.ts ├── assets │ └── logo.png ├── components │ ├── Hello.html │ └── Hello.ts ├── index.html └── main.ts ├── test └── unit │ ├── Hello.spec.js │ └── index.js ├── tsconfig.json ├── tsd.json └── tslint.json /README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-typescript-boilerplate 2 | 3 | > A full-featured Webpack setup with TypeScript, hot-reload, lint-on-save, unit testing & css extraction. 4 | 5 | ### Usage 6 | 7 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). 8 | 9 | ``` bash 10 | $ npm install -g vue-cli 11 | $ vue init AbeHaruhiko/vue-webpack-typescript my-project 12 | $ cd my-project 13 | $ npm install 14 | $ tsd install 15 | $ npm run dev 16 | ``` 17 | 18 | ### Folder Structure 19 | 20 | ``` bash 21 | . 22 | ├── package.json # build scripts and dependencies 23 | ├── .babelrc # babel configuration 24 | ├── .eslintrc.js # eslint configuration 25 | ├── tsconfig.json # TypeScript configuration 26 | ├── tsd.json # tsd configuration 27 | ├── tslint.json # tslint configuration 28 | ├── build 29 | │   ├── dev-server.js # development server script 30 | │   ├── karma.conf.js # unit testing config 31 | │   ├── webpack.base.conf.js # shared base webpack config 32 | │   ├── webpack.dev.conf.js # development webpack config 33 | │   └── webpack.prod.conf.js # production webpack config 34 | ├── src 35 | │ ├── index.html # main html file 36 | │   ├── main.ts # app entry file 37 | │   ├── App.ts # main app component 38 | │   ├── App.html # main app component template 39 | │   ├── components # ui components 40 | │   │   └── ... 41 | │   └── assets # static assets 42 | │      └── ... 43 | └── test 44 | └── unit # unit tests 45 | ├── index.js # unit test entry file 46 | └── ... 47 | ``` 48 | 49 | ### What's Included 50 | 51 | - `npm run dev`: first-in-class development experience. 52 | - Webpack + `vue-loader` for single file Vue components. 53 | - State preserving hot-reload 54 | - State preserving compilation error overlay 55 | - Lint-on-save with ESLint 56 | - Source maps 57 | 58 | - `npm run build`: Production ready build. 59 | - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2). 60 | - HTML minified with [html-minifier](https://github.com/kangax/html-minifier). 61 | - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano). 62 | - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets. 63 | 64 | - `npm test`: Unit tests run in PhantomJS with Karma + karma-jasmine + karma-webpack. 65 | - Supports ES2015 in test files. 66 | - Supports all webpack loaders. 67 | - Easy [mock injection](http://vuejs.github.io/vue-loader/workflow/testing-with-mocks.html). 68 | 69 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 70 | 71 | ### Customizations 72 | 73 | You will likely need to do some tuning to suit your own needs: 74 | 75 | - Install additional libraries that you need, e.g. `vue-router`, `vue-resource`, `vuex`, etc... 76 | 77 | - Use your preferred `.eslintrc` config. 78 | 79 | - Add your preferred CSS pre-processor, for example: 80 | 81 | ``` bash 82 | npm install less-loader --save-dev 83 | ``` 84 | 85 | - Working with an existing backend server: 86 | 87 | - The dev server is simply an [Express](http://expressjs.com/) server with [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) and [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) pre-configured. You can add your own routing rules to `build/dev-server.js` to proxy certain requests to an existing backend server. Or, if you are using Express yourself, you can simply copy the middleware configuration, but **make sure to add them only in development mode!** 88 | 89 | - For unit testing: 90 | 91 | - 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 `build/karma.conf.js`. 92 | 93 | - You can also swap out Jasmine for other testing frameworks, e.g. use Mocha with [karma-mocha](https://github.com/karma-runner/karma-mocha). 94 | 95 | ### Fork It And Make Your Own 96 | 97 | You can fork this repo to create your own boilerplate, and use it with `vue-cli`: 98 | 99 | ``` bash 100 | vue init username/repo my-project 101 | ``` 102 | -------------------------------------------------------------------------------- /meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": { 3 | "name": { 4 | "type": "string", 5 | "required": true, 6 | "label": "Project name" 7 | }, 8 | "description": { 9 | "type": "string", 10 | "required": false, 11 | "label": "Project description", 12 | "default": "A Vue.js project" 13 | }, 14 | "author": { 15 | "type": "string", 16 | "label": "Author" 17 | }, 18 | "private": { 19 | "type": "boolean", 20 | "default": true 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /template/.eslintrc.js: -------------------------------------------------------------------------------- 1 | var production = process.env.NODE_ENV === 'production' 2 | 3 | module.exports = { 4 | 'root': true, 5 | 6 | 'env': { 7 | 'browser': true, 8 | 'node': true 9 | }, 10 | 11 | 'ecmaFeatures': { 12 | 'arrowFunctions': true, 13 | 'destructuring': true, 14 | 'classes': true, 15 | 'defaultParams': true, 16 | 'blockBindings': true, 17 | 'modules': true, 18 | 'objectLiteralComputedProperties': true, 19 | 'objectLiteralShorthandMethods': true, 20 | 'objectLiteralShorthandProperties': true, 21 | 'restParams': true, 22 | 'spread': true, 23 | 'forOf': true, 24 | 'generators': true, 25 | 'templateStrings': true, 26 | 'superInFunctions': true, 27 | 'experimentalObjectRestSpread': true 28 | }, 29 | 30 | 'rules': { 31 | 'accessor-pairs': 2, 32 | 'array-bracket-spacing': 0, 33 | 'block-scoped-var': 0, 34 | 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], 35 | 'camelcase': 0, 36 | 'comma-dangle': [2, 'never'], 37 | 'comma-spacing': [2, { 'before': false, 'after': true }], 38 | 'comma-style': [2, 'last'], 39 | 'complexity': 0, 40 | 'computed-property-spacing': 0, 41 | 'consistent-return': 0, 42 | 'consistent-this': 0, 43 | 'constructor-super': 2, 44 | 'curly': [2, 'multi-line'], 45 | 'default-case': 0, 46 | 'dot-location': [2, 'property'], 47 | 'dot-notation': 0, 48 | 'eol-last': 2, 49 | 'eqeqeq': [2, 'allow-null'], 50 | 'func-names': 0, 51 | 'func-style': 0, 52 | 'generator-star-spacing': [2, { 'before': true, 'after': true }], 53 | 'guard-for-in': 0, 54 | 'handle-callback-err': [2, '^(err|error)$' ], 55 | 'indent': [2, 2, { 'SwitchCase': 1 }], 56 | 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], 57 | 'linebreak-style': 0, 58 | 'lines-around-comment': 0, 59 | 'max-nested-callbacks': 0, 60 | 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], 61 | 'new-parens': 2, 62 | 'newline-after-var': 0, 63 | 'no-alert': 0, 64 | 'no-array-constructor': 2, 65 | 'no-caller': 2, 66 | 'no-catch-shadow': 0, 67 | 'no-cond-assign': 2, 68 | 'no-console': 0, 69 | 'no-constant-condition': 0, 70 | 'no-continue': 0, 71 | 'no-control-regex': 2, 72 | 'no-debugger': production ? 2 : 0, 73 | 'no-delete-var': 2, 74 | 'no-div-regex': 0, 75 | 'no-dupe-args': 2, 76 | 'no-dupe-keys': 2, 77 | 'no-duplicate-case': 2, 78 | 'no-else-return': 0, 79 | 'no-empty': 0, 80 | 'no-empty-character-class': 2, 81 | 'no-empty-label': 2, 82 | 'no-eq-null': 0, 83 | 'no-eval': 2, 84 | 'no-ex-assign': 2, 85 | 'no-extend-native': 2, 86 | 'no-extra-bind': 2, 87 | 'no-extra-boolean-cast': 2, 88 | 'no-extra-parens': 0, 89 | 'no-extra-semi': 0, 90 | 'no-fallthrough': 2, 91 | 'no-floating-decimal': 2, 92 | 'no-func-assign': 2, 93 | 'no-implied-eval': 2, 94 | 'no-inline-comments': 0, 95 | 'no-inner-declarations': [2, 'functions'], 96 | 'no-invalid-regexp': 2, 97 | 'no-irregular-whitespace': 2, 98 | 'no-iterator': 2, 99 | 'no-label-var': 2, 100 | 'no-labels': 2, 101 | 'no-lone-blocks': 2, 102 | 'no-lonely-if': 0, 103 | 'no-loop-func': 0, 104 | 'no-mixed-requires': 0, 105 | 'no-mixed-spaces-and-tabs': 2, 106 | 'no-multi-spaces': 2, 107 | 'no-multi-str': 2, 108 | 'no-multiple-empty-lines': [2, { 'max': 1 }], 109 | 'no-native-reassign': 2, 110 | 'no-negated-in-lhs': 2, 111 | 'no-nested-ternary': 0, 112 | 'no-new': 2, 113 | 'no-new-func': 0, 114 | 'no-new-object': 2, 115 | 'no-new-require': 2, 116 | 'no-new-wrappers': 2, 117 | 'no-obj-calls': 2, 118 | 'no-octal': 2, 119 | 'no-octal-escape': 2, 120 | 'no-param-reassign': 0, 121 | 'no-path-concat': 0, 122 | 'no-process-env': 0, 123 | 'no-process-exit': 0, 124 | 'no-proto': 0, 125 | 'no-redeclare': 2, 126 | 'no-regex-spaces': 2, 127 | 'no-restricted-modules': 0, 128 | 'no-return-assign': 2, 129 | 'no-script-url': 0, 130 | 'no-self-compare': 2, 131 | 'no-sequences': 2, 132 | 'no-shadow': 0, 133 | 'no-shadow-restricted-names': 2, 134 | 'no-spaced-func': 2, 135 | 'no-sparse-arrays': 2, 136 | 'no-sync': 0, 137 | 'no-ternary': 0, 138 | 'no-this-before-super': 2, 139 | 'no-throw-literal': 2, 140 | 'no-trailing-spaces': 2, 141 | 'no-undef': 2, 142 | 'no-undef-init': 2, 143 | 'no-undefined': 0, 144 | 'no-underscore-dangle': 0, 145 | 'no-unexpected-multiline': 2, 146 | 'no-unneeded-ternary': 2, 147 | 'no-unreachable': 2, 148 | 'no-unused-expressions': 0, 149 | 'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }], 150 | 'no-use-before-define': 0, 151 | 'no-var': 0, 152 | 'no-void': 0, 153 | 'no-warning-comments': 0, 154 | 'no-with': 2, 155 | 'object-curly-spacing': 0, 156 | 'object-shorthand': 0, 157 | 'one-var': [2, { 'initialized': 'never' }], 158 | 'operator-assignment': 0, 159 | 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], 160 | 'padded-blocks': 0, 161 | 'prefer-const': 0, 162 | 'quote-props': 0, 163 | 'quotes': [2, 'single', 'avoid-escape'], 164 | 'radix': 2, 165 | 'semi': [2, 'never'], 166 | 'semi-spacing': 0, 167 | 'sort-vars': 0, 168 | 'space-after-keywords': [2, 'always'], 169 | 'space-before-blocks': [2, 'always'], 170 | 'space-before-function-paren': [2, 'always'], 171 | 'space-in-parens': [2, 'never'], 172 | 'space-infix-ops': 2, 173 | 'space-return-throw-case': 2, 174 | 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], 175 | 'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!'] }], 176 | 'strict': 0, 177 | 'use-isnan': 2, 178 | 'valid-jsdoc': 0, 179 | 'valid-typeof': 2, 180 | 'vars-on-top': 0, 181 | 'wrap-iife': [2, 'any'], 182 | 'wrap-regex': 0, 183 | 'yoda': [2, 'never'] 184 | } 185 | } 186 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/static/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # run unit tests 18 | npm test 19 | ``` 20 | 21 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /template/build/dev-server.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var webpack = require('webpack') 3 | var config = require('./webpack.dev.conf') 4 | 5 | var app = express() 6 | var compiler = webpack(config) 7 | 8 | // handle fallback for HTML5 history API 9 | app.use(require('connect-history-api-fallback')()) 10 | 11 | // serve webpack bundle output 12 | app.use(require('webpack-dev-middleware')(compiler, { 13 | publicPath: config.output.publicPath, 14 | stats: { 15 | colors: true, 16 | chunks: false 17 | } 18 | })) 19 | 20 | // enable hot-reload and state-preserving 21 | // compilation error display 22 | app.use(require('webpack-hot-middleware')(compiler)) 23 | 24 | app.listen(8080, 'localhost', function (err) { 25 | if (err) { 26 | console.log(err) 27 | return 28 | } 29 | console.log('Listening at http://localhost:8080') 30 | }) 31 | -------------------------------------------------------------------------------- /template/build/karma.conf.js: -------------------------------------------------------------------------------- 1 | var webpackConf = require('./webpack.base.conf') 2 | delete webpackConf.entry 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | browsers: ['PhantomJS'], 7 | frameworks: ['jasmine'], 8 | reporters: ['spec'], 9 | files: ['../test/unit/index.js'], 10 | preprocessors: { 11 | '../test/unit/index.js': ['webpack'] 12 | }, 13 | webpack: webpackConf, 14 | webpackMiddleware: { 15 | noInfo: true 16 | } 17 | }) 18 | } 19 | -------------------------------------------------------------------------------- /template/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | 3 | module.exports = { 4 | entry: { 5 | app: './src/main.ts' 6 | }, 7 | output: { 8 | path: path.resolve(__dirname, '../dist/static'), 9 | publicPath: '/static/', 10 | filename: '[name].js' 11 | }, 12 | resolve: { 13 | extensions: ['', '.js', '.ts'], 14 | alias: { 15 | 'src': path.resolve(__dirname, '../src') 16 | } 17 | }, 18 | resolveLoader: { 19 | root: path.join(__dirname, 'node_modules') 20 | }, 21 | module: { 22 | loaders: [ 23 | { 24 | test: /\.html$/, 25 | loader: "html" 26 | }, 27 | { 28 | test: /\.css$/, 29 | loader: 'style!css' 30 | }, 31 | { 32 | test: /\.ts$/, 33 | loader: 'ts-loader' 34 | }, 35 | { 36 | test: /\.vue$/, 37 | loader: 'vue' 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel!eslint', 42 | exclude: /node_modules/ 43 | }, 44 | { 45 | test: /\.json$/, 46 | loader: 'json' 47 | }, 48 | { 49 | test: /\.(png|jpg|gif|svg)$/, 50 | loader: 'url', 51 | query: { 52 | limit: 10000, 53 | name: '[name].[ext]?[hash:7]' 54 | } 55 | } 56 | ] 57 | }, 58 | vue: { 59 | loaders: { 60 | js: 'babel!eslint' 61 | } 62 | }, 63 | eslint: { 64 | formatter: require('eslint-friendly-formatter') 65 | }, 66 | ts: { 67 | experimentalDecorators: true 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /template/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var config = require('./webpack.base.conf') 3 | var HtmlWebpackPlugin = require('html-webpack-plugin') 4 | 5 | // eval-source-map is faster for development 6 | config.devtool = 'eval-source-map' 7 | 8 | // add hot-reload related code to entry chunks 9 | var polyfill = 'eventsource-polyfill' 10 | var hotClient = 'webpack-hot-middleware/client?noInfo=true&reload=true' 11 | Object.keys(config.entry).forEach(function (name, i) { 12 | var extras = i === 0 ? [polyfill, hotClient] : [hotClient] 13 | config.entry[name] = extras.concat(config.entry[name]) 14 | }) 15 | 16 | // necessary for the html plugin to work properly 17 | // when serving the html from in-memory 18 | config.output.publicPath = '/' 19 | 20 | config.plugins = (config.plugins || []).concat([ 21 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 22 | new webpack.optimize.OccurenceOrderPlugin(), 23 | new webpack.HotModuleReplacementPlugin(), 24 | new webpack.NoErrorsPlugin(), 25 | // https://github.com/ampedandwired/html-webpack-plugin 26 | new HtmlWebpackPlugin({ 27 | filename: 'index.html', 28 | template: 'src/index.html', 29 | inject: true 30 | }) 31 | ]) 32 | 33 | module.exports = config 34 | -------------------------------------------------------------------------------- /template/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var config = require('./webpack.base.conf') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | var HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | // naming output files with hashes for better caching. 7 | // dist/index.html will be auto-generated with correct URLs. 8 | config.output.filename = '[name].[chunkhash].js' 9 | config.output.chunkFilename = '[id].[chunkhash].js' 10 | 11 | // whether to generate source map for production files. 12 | // disabling this can speed up the build. 13 | var SOURCE_MAP = true 14 | 15 | config.devtool = SOURCE_MAP ? 'source-map' : false 16 | 17 | // generate loader string to be used with extract text plugin 18 | function generateExtractLoaders (loaders) { 19 | return loaders.map(function (loader) { 20 | return loader + '-loader' + (SOURCE_MAP ? '?sourceMap' : '') 21 | }).join('!') 22 | } 23 | 24 | config.vue.loaders = { 25 | js: 'babel!eslint', 26 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 27 | css: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css'])), 28 | less: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'less'])), 29 | sass: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'sass'])), 30 | stylus: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'stylus'])) 31 | } 32 | 33 | config.plugins = (config.plugins || []).concat([ 34 | // http://vuejs.github.io/vue-loader/workflow/production.html 35 | new webpack.DefinePlugin({ 36 | 'process.env': { 37 | NODE_ENV: '"production"' 38 | } 39 | }), 40 | new webpack.optimize.UglifyJsPlugin({ 41 | compress: { 42 | warnings: false 43 | } 44 | }), 45 | new webpack.optimize.OccurenceOrderPlugin(), 46 | // extract css into its own file 47 | new ExtractTextPlugin('[name].[contenthash].css'), 48 | // generate dist index.html with correct asset hash for caching. 49 | // you can customize output by editing /src/index.html 50 | // see https://github.com/ampedandwired/html-webpack-plugin 51 | new HtmlWebpackPlugin({ 52 | filename: '../index.html', 53 | template: 'src/index.html', 54 | inject: true, 55 | minify: { 56 | removeComments: true, 57 | collapseWhitespace: true, 58 | removeAttributeQuotes: true 59 | // more options: 60 | // https://github.com/kangax/html-minifier#options-quick-reference 61 | } 62 | }) 63 | ]) 64 | 65 | module.exports = config 66 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "description": "{{ description }}", 4 | "author": "{{ author }}", 5 | {{#private}} 6 | "private": true, 7 | {{/private}} 8 | "scripts": { 9 | "dev": "node build/dev-server.js", 10 | "build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js", 11 | "test": "karma start build/karma.conf.js --single-run" 12 | }, 13 | "dependencies": { 14 | "vue": "^1.0.16" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-plugin-transform-runtime": "^6.0.0", 20 | "babel-preset-es2015": "^6.0.0", 21 | "babel-preset-stage-2": "^6.0.0", 22 | "babel-runtime": "^5.8.0", 23 | "connect-history-api-fallback": "^1.1.0", 24 | "css-loader": "^0.23.0", 25 | "eslint": "^1.10.3", 26 | "eslint-friendly-formatter": "^1.2.2", 27 | "eslint-loader": "^1.2.0", 28 | "eventsource-polyfill": "^0.9.6", 29 | "express": "^4.13.3", 30 | "extract-text-webpack-plugin": "^1.0.1", 31 | "file-loader": "^0.8.4", 32 | "function-bind": "^1.0.2", 33 | "html-loader": "^0.4.0", 34 | "html-webpack-plugin": "^2.8.1", 35 | "inject-loader": "^2.0.1", 36 | "jasmine-core": "^2.4.1", 37 | "json-loader": "^0.5.4", 38 | "karma": "^0.13.15", 39 | "karma-jasmine": "^0.3.6", 40 | "karma-phantomjs-launcher": "^1.0.0", 41 | "karma-spec-reporter": "0.0.23", 42 | "karma-webpack": "^1.7.0", 43 | "phantomjs-prebuilt": "^2.1.3", 44 | "rimraf": "^2.5.0", 45 | "style-loader": "^0.13.0", 46 | "ts-loader": "^0.8.0", 47 | "typescript": "^1.7.5", 48 | "url-loader": "^0.5.7", 49 | "vue-class-component": "^3.2.0", 50 | "vue-hot-reload-api": "^1.2.0", 51 | "vue-html-loader": "^1.0.0", 52 | "vue-loader": "^8.0.0", 53 | "vue-style-loader": "^1.0.0", 54 | "webpack": "^1.12.2", 55 | "webpack-dev-middleware": "^1.4.0", 56 | "webpack-hot-middleware": "^2.6.0" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /template/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica, sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /template/src/App.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /template/src/App.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | 'use strict' 4 | 5 | import VueComponent from 'vue-class-component' 6 | 7 | import Hello from './components/Hello' 8 | 9 | require('./App.css') 10 | 11 | @VueComponent({ 12 | template: require('./App.html'), 13 | components: { 14 | Hello 15 | } 16 | }) 17 | export default class { 18 | } 19 | -------------------------------------------------------------------------------- /template/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeHaruhiko/vue-webpack-typescript/24a93001d0767246c6b77eee9a775143ce775dab/template/src/assets/logo.png -------------------------------------------------------------------------------- /template/src/components/Hello.html: -------------------------------------------------------------------------------- 1 |
2 |

\{{ msg }}

3 |
4 | -------------------------------------------------------------------------------- /template/src/components/Hello.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | 'use strict' 4 | 5 | import VueComponent from 'vue-class-component' 6 | 7 | @VueComponent({ 8 | template: require('./Hello.html') 9 | }) 10 | export default class { 11 | data(): { msg: string } { 12 | return { 13 | msg: 'Hello World!' 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /template/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ name }} 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /template/src/main.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import Vue = require('vue') 4 | import App from './App' 5 | 6 | new Vue({ 7 | el: 'body', 8 | components: { App } 9 | }) 10 | -------------------------------------------------------------------------------- /template/test/unit/Hello.spec.js: -------------------------------------------------------------------------------- 1 | /* global describe, it, expect */ 2 | 3 | import Vue from 'vue' 4 | import Hello from 'src/components/Hello' 5 | 6 | describe('Hello.vue', () => { 7 | it('should render correct contents', () => { 8 | const vm = new Vue({ 9 | template: '
', 10 | components: { Hello } 11 | }).$mount() 12 | expect(vm.$el.querySelector('.hello h1').textContent).toBe('Hello World!') 13 | }) 14 | }) 15 | 16 | // also see example testing a component with mocks at 17 | // https://github.com/vuejs/vue-loader-example/blob/master/test/unit/a.spec.js#L24-L49 18 | -------------------------------------------------------------------------------- /template/test/unit/index.js: -------------------------------------------------------------------------------- 1 | // Polyfill fn.bind() for PhantomJS 2 | /* eslint-disable no-extend-native */ 3 | Function.prototype.bind = require('function-bind') 4 | 5 | // require all test files (files that ends with .spec.js) 6 | var testsContext = require.context('.', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | -------------------------------------------------------------------------------- /template/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.7.5", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "module": "commonjs", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "removeComments": true, 9 | "noLib": false, 10 | "preserveConstEnums": true, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "experimentalDecorators": true 13 | }, 14 | "formatCodeOptions": { 15 | "indentSize": 2, 16 | "tabSize": 2, 17 | "newLineCharacter": "\r\n", 18 | "convertTabsToSpaces": true, 19 | "insertSpaceAfterCommaDelimiter": true, 20 | "insertSpaceAfterSemicolonInForStatements": true, 21 | "insertSpaceBeforeAndAfterBinaryOperators": true, 22 | "insertSpaceAfterKeywordsInControlFlowStatements": true, 23 | "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true, 24 | "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false, 25 | "placeOpenBraceOnNewLineForFunctions": true, 26 | "placeOpenBraceOnNewLineForControlBlocks": true 27 | }, 28 | "compileOnSave": false, 29 | "filesGlob": [ 30 | "./**/*.ts", 31 | "!./node_modules/**/*.ts" 32 | ], 33 | "files": [ 34 | "./src/App.ts", 35 | "./src/components/Hello.ts", 36 | "./src/main.ts", 37 | "./typings/node/node.d.ts", 38 | "./typings/tsd.d.ts", 39 | "./typings/vue/vue.d.ts" 40 | ], 41 | "atom": { 42 | "rewriteTsconfig": true 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /template/tsd.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "v4", 3 | "repo": "borisyankov/DefinitelyTyped", 4 | "ref": "master", 5 | "path": "typings", 6 | "bundle": "typings/tsd.d.ts", 7 | "installed": { 8 | "vue/vue.d.ts": { 9 | "commit": "3030a4be536b6530c06b80081f1333dc0de4d703" 10 | }, 11 | "node/node.d.ts": { 12 | "commit": "bcd5761826eb567876c197ccc6a87c4d05731054" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /template/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "curly": true, 5 | "eofline": false, 6 | "expr" : true, 7 | "forin": true, 8 | "indent": [true, "spaces"], 9 | "label-position": true, 10 | "label-undefined": true, 11 | "max-line-length": [true, 140], 12 | "no-arg": true, 13 | "no-bitwise": true, 14 | "no-console": [true, 15 | "debug", 16 | "info", 17 | "time", 18 | "timeEnd", 19 | "trace" 20 | ], 21 | "no-construct": true, 22 | "no-debugger": true, 23 | "no-duplicate-key": true, 24 | "no-duplicate-variable": true, 25 | "no-empty": true, 26 | "no-eval": true, 27 | "no-string-literal": false, 28 | "no-switch-case-fall-through": true, 29 | "no-trailing-comma": true, 30 | "no-trailing-whitespace": true, 31 | "no-unused-expression": false, 32 | "no-unused-variable": true, 33 | "no-unreachable": true, 34 | "no-use-before-declare": true, 35 | "one-line": [true, 36 | "check-open-brace", 37 | "check-catch", 38 | "check-else", 39 | "check-whitespace" 40 | ], 41 | "quotemark": [true, "single"], 42 | "radix": false, 43 | "semicolon": false, 44 | "triple-equals": [true, "allow-null-check"], 45 | "variable-name": false, 46 | "whitespace": [true, 47 | "check-branch", 48 | "check-decl", 49 | "check-operator", 50 | "check-separator", 51 | "check-type" 52 | ] 53 | } 54 | } 55 | --------------------------------------------------------------------------------