Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ElemeFE/webpack-typescript
A full-featured Webpack + vue-loader + typescript setup with hot reload, linting, testing & css extraction.
https://github.com/ElemeFE/webpack-typescript
Last synced: 3 months ago
JSON representation
A full-featured Webpack + vue-loader + typescript setup with hot reload, linting, testing & css extraction.
- Host: GitHub
- URL: https://github.com/ElemeFE/webpack-typescript
- Owner: ElemeFE
- Fork: true (vuejs-templates/webpack)
- Created: 2017-09-21T07:59:41.000Z (about 7 years ago)
- Default Branch: develop
- Last Pushed: 2017-10-23T15:35:04.000Z (about 7 years ago)
- Last Synced: 2024-06-09T18:40:20.980Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 998 KB
- Stars: 36
- Watchers: 9
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-webpack-boilerplate
A full-featured Webpack setup with hot-reload, lint-on-save,unit testing & css extraction.
## Note
- This template is still __WIP__, not support unit testing for now, you can try it by `vue init ElemeFE/webpack-typescript project-name` for now.
- Linter is not stable since tslint does not support `.vue` file, we just trick it to make it works.
## Documentation
- [For this template](http://vuejs-templates.github.io/webpack): common questions specific to this template are answered and each part is described in greater detail
- [For Vue 2.0](http://vuejs.org/guide/): general information about how to work with Vue, not specific to this template
## Usage
This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ for a more efficient dependency tree.**
``` bash
$ npm install -g vue-cli
$ vue init ElemeFE/webpack-typescript my-project
$ cd my-project
$ npm install
$ npm run dev
```
If port 8080 is already in use on your machine you must change the port number in `/config/index.js`. Otherwise `npm run dev` will fail.
## 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](https://github.com/mishoo/UglifyJS2).
- HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
- CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/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.
- Use `npm run build --report`to build with bundle size analytics.
- `npm run unit`: Unit tests run in PhantomJS with [Karma](http://karma-runner.github.io/0.13/index.html) + [Mocha](http://mochajs.org/) + [karma-webpack](https://github.com/webpack/karma-webpack).
- Supports ES2015+ in test files.
- Supports all webpack loaders.
- Easy mock injection.
- `npm run e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/).
- Run tests in multiple browsers in parallel.
- Works with one command out of the box:
- Selenium and chromedriver dependencies automatically handled.
- Automatically spawns the Selenium server.
### 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
```