├── README.md ├── meta.json └── template ├── .vscode ├── settings.json └── tasks.json ├── README.md ├── index.html ├── package.json ├── src ├── App.vue ├── Hello.ts ├── home │ └── index.ts └── main.ts ├── tsconfig.json └── webpack.config.js /README.md: -------------------------------------------------------------------------------- 1 | # webpack2-simple-vue2 2 | 3 | > A simple webpack2 template with [vuets](https://github.com/vuets/vuets) + vue/vue-router 2.1. 4 | > Supports tree-shaking with es2015 modules 5 | 6 | ### Usage 7 | 8 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). 9 | 10 | ``` bash 11 | $ npm install -g vue-cli 12 | $ vue init vuets/webpack2-simple-vue2 my-project 13 | $ cd my-project 14 | $ npm install 15 | $ npm run dev 16 | ``` 17 | 18 | ### What's Included 19 | 20 | - `npm run dev`: Webpack + `vue-loader` with proper config for source maps & hot-reload. 21 | 22 | - `npm run build`: build with CSS/JS minification using closure compiler. 23 | 24 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 25 | 26 | -------------------------------------------------------------------------------- /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": true, 11 | "label": "Project description", 12 | "default": "A Vue.js project" 13 | }, 14 | "author": { 15 | "type": "string", 16 | "label": "Author" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /template/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "typescript.tsdk": "./node_modules/typescript/lib" 4 | } -------------------------------------------------------------------------------- /template/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "command": "yarn", 4 | "isShellCommand": true, 5 | "showOutput": "always", 6 | "args": [ 7 | "run" 8 | ], 9 | "isWatching": false, 10 | "tasks": [ 11 | { 12 | "taskName": "build" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | yarn install 10 | 11 | # serve with hot reload at localhost:8080 12 | yarn run dev 13 | 14 | # build for production with minification 15 | yarn run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ name }} 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "description": "{{ description }}", 4 | "author": "{{ author }}", 5 | "private": true, 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --open --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "vue": "2.1.10", 12 | "vue-router": "2.1.3", 13 | "vuets": "^0.10.0" 14 | }, 15 | "devDependencies": { 16 | "autoprefixer": "^6.4.0", 17 | "cross-env": "^3.2.4", 18 | "css-loader": "^0.27.3", 19 | "extract-text-webpack-plugin": "^2.1.0", 20 | "file-loader": "^0.10.1", 21 | "less": "^2.7.2", 22 | "less-loader": "^2.2.3", 23 | "stylus": "^0.54.5", 24 | "stylus-loader": "^3.0.1", 25 | "ts-loader": "^2.0.1", 26 | "typescript": "^2.2.1", 27 | "url-loader": "^0.5.8", 28 | "vue-loader": "9.9.5", 29 | "vue-template-compiler": "2.1.10", 30 | "webpack": "^2.2.1", 31 | "webpack-closure-compiler": "2.0.2", 32 | "webpack-dev-server": "^2.2.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /template/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 19 | 36 | 37 | -------------------------------------------------------------------------------- /template/src/Hello.ts: -------------------------------------------------------------------------------- 1 | import { component } from 'vuets' 2 | 3 | abstract class HasMsg { 4 | msg: string = 'Hello, world!' 5 | append(suffix: string) { 6 | this.msg += suffix 7 | } 8 | } 9 | 10 | export class Hello extends HasMsg { 11 | activate = 0 12 | deactivate = 0 13 | constructor() { 14 | super() 15 | } 16 | static activate(self: Hello) { 17 | self.activate++ 18 | } 19 | static deactivate(self: Hello): boolean { 20 | self.deactivate++ 21 | return true 22 | } 23 | append(suffix: string) { 24 | super.append('?' + suffix) 25 | } 26 | } 27 | export default component({ 28 | template: ` 29 |
30 |

\{{ msg }}

31 |
32 | activate count: \{{ activate }} 33 |
34 |
35 | deactivate count: \{{ deactivate }} 36 |
37 |
38 | ` 39 | }, Hello, Hello.activate, Hello.deactivate) 40 | -------------------------------------------------------------------------------- /template/src/home/index.ts: -------------------------------------------------------------------------------- 1 | import { component } from 'vuets' 2 | 3 | export class Home { 4 | msg = 'Home' 5 | activate = 0 6 | deactivate = 0 7 | static activate(self: Home) { 8 | self.activate++ 9 | } 10 | static deactivate(self: Home): boolean { 11 | self.deactivate++ 12 | return true 13 | } 14 | append(suffix: string) { 15 | this.msg += suffix 16 | } 17 | } 18 | export default component({ 19 | template: ` 20 |
21 |

\{{ msg }} | activate count: \{{ activate }} | deactivate count: \{{ deactivate }}

22 |
23 | ` 24 | }, Home, Home.activate, Home.deactivate) 25 | -------------------------------------------------------------------------------- /template/src/main.ts: -------------------------------------------------------------------------------- 1 | declare function require(path: string): any; 2 | import * as Vue from 'vue' 3 | import * as Router from 'vue-router' 4 | import Home from './home/' 5 | import Hello from './Hello' 6 | 7 | Vue.use(Router) 8 | const config = { 9 | linkActiveClass: 'active', 10 | scrollBehavior: () => ({ x: 0, y: 0 }), 11 | routes: [ 12 | { path: '/home', component: Home }, 13 | { path: '/hello', component: Hello }, 14 | { path: '*', redirect: '/home' } 15 | ] 16 | } 17 | let app = require('./App.vue') 18 | app.router = new Router(config) 19 | new Vue(app).$mount('#app') 20 | -------------------------------------------------------------------------------- /template/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "lib": ["dom", "scripthost", "es5", "es2015.promise"], 7 | "sourceMap": false, 8 | "declaration": false, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "emitDecoratorMetadata": false, 12 | "experimentalDecorators": true, 13 | "suppressImplicitAnyIndexErrors": true, 14 | "strictNullChecks": true, 15 | "noImplicitThis": true, 16 | "removeComments": true 17 | }, 18 | "compileOnSave": false, 19 | "files": [ 20 | "./src/main.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /template/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var ClosureCompilerPlugin = require('webpack-closure-compiler') 4 | 5 | module.exports = { 6 | entry: './src/main.ts', 7 | output: { 8 | path: path.resolve(__dirname, './dist'), 9 | publicPath: '/dist/', 10 | filename: 'build.js' 11 | }, 12 | resolve: { 13 | extensions: ['.js', '.ts', '.vue'], 14 | alias: { 15 | 'vue$': 'vue/dist/vue.common.js' 16 | } 17 | }, 18 | module: { 19 | loaders: [ 20 | { 21 | test: /\.vue$/, 22 | loader: 'vue-loader' 23 | }, 24 | { 25 | test: /\.ts$/, 26 | loader: 'ts-loader' 27 | }, 28 | { 29 | test: /\.less$/, 30 | loader: 'less-loader' 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg|ttf)$/, 34 | loader: 'file-loader', 35 | query: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | devtool: '#eval-source-map' 46 | } 47 | 48 | if (process.env.NODE_ENV === 'production') { 49 | module.exports.devtool = '#source-map' 50 | // http://vue-loader.vuejs.org/en/workflow/production.html 51 | module.exports.plugins = (module.exports.plugins || []).concat([ 52 | new webpack.DefinePlugin({ 53 | 'process.env': { 54 | NODE_ENV: '"production"' 55 | } 56 | }), 57 | new ClosureCompilerPlugin({ 58 | compiler: { 59 | language_in: 'ECMASCRIPT6', 60 | language_out: 'ECMASCRIPT5', 61 | compilation_level: 'SIMPLE'/*, 62 | create_source_map: true*/ 63 | }, 64 | concurrency: 3 65 | }) 66 | ]) 67 | } 68 | --------------------------------------------------------------------------------