vue-webpack-typescript-boilerplate

A full-featured Webpack setup with TypeScript, hot-reload, lint-on-save, unit testing & css extraction.

Usage

This is a project template for vue-cli.

$ npm install -g vue-cli
$ vue init AbeHaruhiko/vue-webpack-typescript my-project
$ cd my-project
$ npm install
$ tsd install
$ npm run dev

Folder Structure

.
├── package.json              # build scripts and dependencies
├── .babelrc                  # babel configuration
├── .eslintrc.js              # eslint configuration
├── tsconfig.json             # TypeScript configuration
├── tsd.json                  # tsd configuration
├── tslint.json               # tslint configuration
├── build
│   ├── dev-server.js         # development server script
│   ├── karma.conf.js         # unit testing config
│   ├── webpack.base.conf.js  # shared base webpack config
│   ├── webpack.dev.conf.js   # development webpack config
│   └── webpack.prod.conf.js  # production webpack config
├── src
│   ├── index.html            # main html file
│   ├── main.ts               # app entry file
│   ├── App.ts                # main app component
│   ├── App.html              # main app component template
│   ├── components            # ui components
│   │   └── ...
│   └── assets                # static assets
│       └── ...
└── test
    └── unit                  # unit tests
        ├── index.js          # unit test entry file
        └── ...

What's Included

• npm run dev: first-in-class development experience.

  • Webpack + vue-loader for single file Vue components.
  • State preserving hot-reload
  • State preserving compilation error overlay
  • Lint-on-save with ESLint
  • Source maps

• npm run build: Production ready build.

  • JavaScript minified with UglifyJS.
  • HTML minified with html-minifier.
  • CSS across all components extracted into a single file and minified with cssnano.
  • 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.

• npm test: Unit tests run in PhantomJS with Karma + karma-jasmine + karma-webpack.

  • Supports ES2015 in test files.
  • Supports all webpack loaders.
  • Easy mock injection.

For detailed explanation on how things work, consult the docs for vue-loader.

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.

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

  npm install less-loader --save-dev

• Working with an existing backend server:

  • The dev server is simply an Express server with webpack-dev-middleware and 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!

• For unit testing:

  • You can run the tests in multiple real browsers by installing more karma launchers and adjusting the browsers field in build/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