Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: vuejs-templates/webpack
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: develop
Choose a base ref
...
head repository: w3tecch/vue-typescript-template
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: develop
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
  • 9 commits
  • 18 files changed
  • 2 contributors

Commits on Apr 22, 2018

  1. 🎉 init fork from vue.js webpack template

    Robert Kleger committed Apr 22, 2018

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    40f1711 View commit details
  2. 📝 update readme

    Robert Kleger committed Apr 22, 2018
    Copy the full SHA
    0c647d4 View commit details
  3. 📝 update readme

    Robert Kleger committed Apr 22, 2018
    Copy the full SHA
    149dcb8 View commit details

Commits on Apr 23, 2018

  1. 👌 remove contributor names from readme

    Robert Kleger committed Apr 23, 2018
    Copy the full SHA
    7c5dbdf View commit details
  2. 🚧 remove babel and add ts config and tslint config

    Robert Kleger committed Apr 23, 2018
    Copy the full SHA
    38b93bc View commit details
  3. Copy the full SHA
    c50d5a0 View commit details

Commits on Apr 24, 2018

  1. Merge pull request #3 from w3tecch/feature/add-ts-config

    Feature/add ts config
    Robert Kleger authored Apr 24, 2018
    Copy the full SHA
    7ddca5a View commit details
  2. Merge pull request #1 from w3tecch/feature/first-setup

    Feature/first setup
    Robert Kleger authored Apr 24, 2018
    Copy the full SHA
    0b987d2 View commit details
  3. Feature/add nps (#2)

    ✨ add nps support
    Robert Kleger authored Apr 24, 2018
    Copy the full SHA
    fe8be80 View commit details
87 changes: 41 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,66 +1,61 @@
# vue-webpack-boilerplate
<p align="center">
<img src="./w3tec-logo.png" alt="w3tec" width="400" />
</p>

> A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.
<h1 align="center">Vue Typescript Template</h1>

> This template is Vue 2.0 compatible. For Vue 1.x use this command: `vue init webpack#1.0 my-project`
<p align="center">
<b>A full featured <a href="https://github.com/vuejs/vue-cli">vue-cli</a> TypeScript and Webpack template for Vue.js 2.0</b>
</br></br>
<span>
Inspired by official <a href="https://github.com/vuejs-templates/webpack">Vue.js Webpack template</a>
</span>
</br>
</p>

## Documentation
<br />

- [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
![divider](./w3tec-divider.png)

## Usage
## ❯ Why

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.**
Our main goal with this project is to provide you a feature complete Vue.js template.
We like you to be focused on your business and not spending hours in project configuration.

``` bash
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
```
Try it!! We are happy to hear your feedback or any kind of new features.

This will scaffold the project using the `master` branch. If you wish to use the latest version of the webpack template, do the following instead:
![divider](./w3tec-divider.png)

``` bash
$ vue init webpack#develop my-project
```
## ❯ Table of Contents

:warning: **The develop branch is not considered stable and can contain bugs or not build at all, so use at your own risk.**
- [Getting Started](#-getting-started)

The development server will run on port 8080 by default. If that port is already in use on your machine, the next free port will be used.
![divider](./w3tec-divider.png)

## What's Included
## ❯ Getting Started

- `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
### Step 1: Set up the Development Environment

- `npm run build`: Production ready build.
- JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
- 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).
- Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production `index.html` with proper URLs to these generated assets.
- Use `npm run build --report`to build with bundle size analytics.
You need to set up your development environment before you can do anything.

- `npm run unit`: Unit tests run in [JSDOM](https://github.com/tmpvar/jsdom) with [Jest](https://facebook.github.io/jest/), or in PhantomJS with Karma + Mocha + karma-webpack.
- Supports ES2015+ in test files.
- Easy mocking.
Install [Node.js and NPM](https://nodejs.org/en/download/)

- `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.
- on OSX use [homebrew](http://brew.sh) `brew install node`
- on Windows use [chocolatey](https://chocolatey.org/) `choco install nodejs`

### Fork It And Make Your Own
### Step 2: Download vue-cli

You can fork this repo to create your own boilerplate, and use it with `vue-cli`:
Download <a href="https://github.com/vuejs/vue-cli">vue-cli</a>

``` bash
vue init username/repo my-project
```bash
npm install -g vue-cli
```

### Step 3: Init new Project

Create a new Vue.js project based on this template and follow wizard instructions.

```bash
vue init w3tecch/vue-typescript-template my-project-name
```

Binary file added icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 7 additions & 30 deletions meta.js
Original file line number Diff line number Diff line change
@@ -77,29 +77,7 @@ module.exports = {
lint: {
when: 'isNotTest',
type: 'confirm',
message: 'Use ESLint to lint your code?',
},
lintConfig: {
when: 'isNotTest && lint',
type: 'list',
message: 'Pick an ESLint preset',
choices: [
{
name: 'Standard (https://github.com/standard/standard)',
value: 'standard',
short: 'Standard',
},
{
name: 'Airbnb (https://github.com/airbnb/javascript)',
value: 'airbnb',
short: 'Airbnb',
},
{
name: 'none (configure it yourself)',
value: 'none',
short: 'none',
},
],
message: 'Use TSLint to lint your code?',
},
unit: {
when: 'isNotTest',
@@ -139,16 +117,16 @@ module.exports = {
message:
'Should we run `npm install` for you after the project has been created? (recommended)',
choices: [
{
name: 'Yes, use NPM',
value: 'npm',
short: 'npm',
},
{
name: 'Yes, use Yarn',
value: 'yarn',
short: 'yarn',
},
{
name: 'Yes, use NPM',
value: 'npm',
short: 'npm',
},
{
name: 'No, I will handle that myself',
value: false,
@@ -158,8 +136,7 @@ module.exports = {
},
},
filters: {
'.eslintrc.js': 'lint',
'.eslintignore': 'lint',
'tslint.json': 'lint',
'config/test.env.js': 'unit || e2e',
'build/webpack.test.conf.js': "unit && runner === 'karma'",
'test/unit/**/*': 'unit',
2,209 changes: 0 additions & 2,209 deletions package-lock.json

This file was deleted.

8 changes: 8 additions & 0 deletions package-scripts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

/**
* Windows: Please do not use trailing comma as windows will fail with token error
*/
module.exports = {
scripts: {
}
};
31 changes: 28 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,38 @@
{
"name": "vue-cli-template-webpack",
"version": "1.3.1",
"name": "vue-typescript-template",
"version": "0.0.1",
"license": "MIT",
"description": "A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.",
"repository": "git+ssh://git@github.com:w3tecch/vue-typescript-boilerplate.git",
"contributors": [
{
"name": "Robert Kleger",
"email": "",
"url": "https://github.com/DaNautilus"
}
],
"keywords": [
"Vue.js",
"TypeScript",
"Webpack",
"boilerplate",
"skeleton",
"template",
"w3tec.ch"
],
"engines": {
"node": ">= 6.0.0"
},
"homepage": "https://github.com/w3tecch/vue-typescript-boilerplate#readme",
"author": "w3tec.ch <info@w3tec.ch>",
"scripts": {
"start": "nps",
"docs": "cd docs && gitbook serve",
"docs:deploy": "bash ./deploy-docs.sh"
},
"devDependencies": {
"nps": "^5.9.0",
"nps-utils": "^1.5.0",
"vue-cli": "^2.8.1"
}
}
}
19 changes: 0 additions & 19 deletions template/.babelrc

This file was deleted.

4 changes: 4 additions & 0 deletions template/.editorconfig
Original file line number Diff line number Diff line change
@@ -7,3 +7,7 @@ indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
7 changes: 0 additions & 7 deletions template/.eslintignore

This file was deleted.

74 changes: 0 additions & 74 deletions template/.eslintrc.js

This file was deleted.

23 changes: 8 additions & 15 deletions template/build/webpack.base.conf.js
Original file line number Diff line number Diff line change
@@ -8,16 +8,7 @@ function resolve (dir) {
return path.join(__dirname, '..', dir)
}

{{#lint}}const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
}){{/lint}}
const nodeModulesDir = path.resolve(__dirname, 'node_modules');

module.exports = {
context: path.resolve(__dirname, '../'),
@@ -43,17 +34,19 @@ module.exports = {
module: {
rules: [
{{#lint}}
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.ts$/, enforce: 'pre',
loader: 'tslint-loader'
},
{{/lint}}
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
{ test: /\.ts$/i,
loader: 'awesome-typescript-loader',
exclude: nodeModulesDir
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
29 changes: 29 additions & 0 deletions template/package-scripts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* Windows: Please do not use trailing comma as windows will fail with token error
*/
module.exports = {
scripts: {
default: 'webpack',
webpack: {
default: 'webpack.dev',
dev: 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js'
},
{{#if_or unit e2e}}
test: {
{{#if_eq runner "jest"}}
unit: 'jest --config test/unit/jest.conf.js --coverage'{{#e2e}},{{/e2e}}
{{/if_eq}}
{{#if_eq runner "karma"}}
unit: '"cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run'{{#e2e}},{{/e2e}}
{{/if_eq}}
{{#e2e}}
e2e: 'node test/e2e/runner.js'
{{/e2e}}
},
{{/if_or}}
{{#lint}}
lint: './node_modules/.bin/tslint -c tslint.json "src/**/*.ts"',
{{/lint}}
build: 'node build/build.js'
}
};
59 changes: 9 additions & 50 deletions template/package.json
Original file line number Diff line number Diff line change
@@ -5,53 +5,14 @@
"author": "{{ author }}",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
{{#if_eq runner "jest"}}
"unit": "jest --config test/unit/jest.conf.js --coverage",
{{/if_eq}}
{{#if_eq runner "karma"}}
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
{{/if_eq}}
{{#e2e}}
"e2e": "node test/e2e/runner.js",
{{/e2e}}
{{#if_or unit e2e}}
"test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}",
{{/if_or}}
{{#lint}}
"lint": "eslint --ext .js,.vue src{{#unit}} test/unit{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}",
{{/lint}}
"build": "node build/build.js"
"start": "nps"
},
"dependencies": {
"vue": "^2.5.2"{{#router}},
"vue-router": "^3.0.1"{{/router}}
},
"devDependencies": {
{{#lint}}
"babel-eslint": "^7.2.3",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
{{#if_eq lintConfig "standard"}}
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
{{/if_eq}}
{{#if_eq lintConfig "airbnb"}}
"eslint-config-airbnb-base": "^11.3.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-import": "^2.7.0",
{{/if_eq}}
{{/lint}}
{{#if_eq runner "jest"}}
"babel-jest": "^21.0.2",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"vue-jest": "^1.0.2",
@@ -72,25 +33,16 @@
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
{{/if_eq}}
{{#e2e}}
"babel-register": "^6.22.0",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
{{/e2e}}
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"awesome-typescript-loader": "^5.0.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
@@ -100,11 +52,18 @@
"html-webpack-plugin": "^2.30.1",
"webpack-bundle-analyzer": "^2.9.0",
"node-notifier": "^5.1.2",
"nps": "^5.9.0",
"nps-utils": "^1.5.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
{{#lint}}
"tslint": "^5.9.1",
"tslint-loader": "^3.6.0",
{{/lint}}
"typescript": "^2.8.3",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
29 changes: 29 additions & 0 deletions template/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"compileOnSave": false,
"compilerOptions": {
"target": "es5",
"module": "es6",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"allowJs": true,
"sourceRoot": "src",
"importHelpers": true,
"lib": [
"es2017", "dom"
],
"pretty": true,
"strict": true,
"noImplicitAny": false,
"noUnusedLocals": true,
"noImplicitReturns": true,
"noUnusedParameters": true,
"suppressImplicitAnyIndexErrors": true,
"suppressExcessPropertyErrors": true,
},
"exclude": [
"node_modules",
"dist",
"static"
]
}
26 changes: 26 additions & 0 deletions template/tslint.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"extends": "tslint:recommended",
"rules": {
"array-type": [
true,
"array"
],
"arrow-parens": [
true,
"ban-single-arg-parens"
],
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"no-bitwise": false,
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false
}
}
Binary file added w3tec-divider.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added w3tec-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2,239 changes: 2,239 additions & 0 deletions yarn.lock

Large diffs are not rendered by default.