├── LICENSE
├── README.md
├── meta.json
└── template
    ├── .babelrc
    ├── .eslintrc
    ├── .gitignore
    ├── README.md
    ├── index.html
    ├── package.json
    ├── src
        ├── App.vue
        ├── components
        │   └── Home.vue
        ├── main.ts
        ├── router
        │   └── index.js
        └── store
        │   └── index.js
    ├── static
        └── .gitkeep
    ├── tsconfig.json
    └── webpack.config.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Akira Laine
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vuets
  2 | A Vue, TypeScript ready boilerplate using class-style components
  3 | 
  4 | *Usage*
  5 | ```bash
  6 | # Download vue-cli and Vuets template
  7 | npm i -g vue-cli
  8 | vue init akiralaine/vuets <PROJECT_NAME>
  9 | 
 10 | # Install dependencies
 11 | cd <PROJECT_NAME>
 12 | yarn (or npm i)
 13 | yarn run dev (or npm run dev)
 14 | ```
 15 | 
 16 | ### What's a class-style component?
 17 | Vuets uses [vue-class-component](https://github.com/vuejs/vue-class-component) to enable the following
 18 | ```js
 19 | <script lang='ts'>
 20 | import Vue from 'vue'
 21 | import Component from 'vue-class-component'
 22 | import Intro from './components/Intro'
 23 | 
 24 | @Component({
 25 |   components: {
 26 |     Intro
 27 |   }
 28 | })
 29 | export default class App extends Vue {
 30 |   // data
 31 |   appName : string = 'vuets'
 32 | 
 33 |   // lifecycle hooks
 34 |   mounted () {
 35 |     this.printToConsole()
 36 |   }
 37 | 
 38 |   // methods
 39 |   printToConsole () {
 40 |     console.log('Welcome to Vuets')
 41 |   }
 42 | 
 43 |   // computed
 44 |   get properName () {
 45 |     return `${this.appName[0].toUpperCase()}${this.appName.slice(1)}`
 46 |   }
 47 | }
 48 | </script>
 49 | ```
 50 | 
 51 | ### What's different?
 52 | Data
 53 | --
 54 | Normal Syntax:
 55 | ```js 
 56 | data () {
 57 |   return {
 58 |     foo: 'bar'
 59 |   }
 60 | }
 61 | ```
 62 | Class syntax:
 63 | ```js 
 64 | foo = 'bar'
 65 | ```
 66 | Using types:
 67 | ```js
 68 | foo : string = 'bar'
 69 | ```
 70 | 
 71 | Methods
 72 | --
 73 | Methods are the same except they don't go in a `methods` object
 74 | 
 75 | Computed
 76 | --
 77 | Like methods, computed properties don't go in a `computed` object. But you must specify a `getter` like so:
 78 | ```js
 79 | get someProp () {
 80 |   return 'hello'
 81 | }
 82 | ```
 83 | using types:
 84 | ```js 
 85 | get sommeProp () : string {
 86 |   return 'hello'
 87 | }
 88 | ```
 89 | Props / Watchers / Components
 90 | --
 91 | Unlike everything else, the above are specified in your `Component` decorator.
 92 | ```jsx
 93 | import SomeComponent from './SomeComponent'
 94 | 
 95 | @Component({
 96 |   components: {
 97 |     SomeComponent
 98 |   }
 99 |   props: ['someProp'],
100 |   watch: {
101 |     'foo' (val) {
102 |       console.log(val)
103 |     }
104 |   }
105 | })
106 | ```


--------------------------------------------------------------------------------
/meta.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "prompts": {
 3 |     "name": {
 4 |       "required": true,
 5 |       "message": "Project name"
 6 |     },
 7 |     "description": {
 8 |       "message": "Project description",
 9 |       "default": "A Vuets project"
10 |     },
11 |     "plugins": {
12 |       "message": "What plugins do you want to use",
13 |       "type": "checkbox",
14 |       "choices": ["vue-router", "vuex", "axios"],
15 |       "default": ["vue-router", "vuex", "axios"]
16 |     },
17 |     "lint": {
18 |       "type": "confirm",
19 |       "message": "Use ESLint?",
20 |       "required": true,
21 |       "default": true
22 |     },
23 |     "lintConfig": {
24 |       "when": "lint",
25 |       "type": "list",
26 |       "message": "Which ESLint style do you want to use?",
27 |       "choices": [
28 |         {
29 |           "name": "Standard (https://github.com/feross/standard)",
30 |           "short": "Standard",
31 |           "value": "standard"
32 |         },
33 |         {
34 |           "name": "AirBNB (https://github.com/airbnb/javascript)",
35 |           "short": "AirBNB",
36 |           "value": "airbnb-base"
37 |         }
38 |       ]
39 |     }
40 |   },
41 |   "filters": {
42 |     "src/router/**/*": "plugins['vue-router']",
43 |     "src/store/**/*": "plugins['vuex']",
44 |     ".eslintrc": "lint"
45 |   }
46 | }


--------------------------------------------------------------------------------
/template/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "targets": {
 5 |         "browsers": ["last 4 versions"]
 6 |       },
 7 |       "modules": false
 8 |     }],
 9 |     "stage-0"
10 |   ],
11 |   "plugins": ["transform-decorators-legacy", "transform-class-properties"]
12 | }


--------------------------------------------------------------------------------
/template/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "{{ lintConfig }}",
 3 |   "parser": "babel-eslint",
 4 |   "parserOptions": {
 5 |     "sourceType": "module"
 6 |   },
 7 |   "plugins": ["html"],
 8 |   "rules": {
 9 |     {{#if_eq lintConfig "airbnb-base"}}
10 |     "import/extensions": 0,
11 |     "import/no-unresolved": 0,
12 |     "linebreak-style": 0,
13 |     "comma-dangle": 0,
14 |     "no-console": 0,
15 |     "class-methods-use-this": 0
16 |     {{/if_eq}}
17 |   }
18 | }


--------------------------------------------------------------------------------
/template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
 1 | # {{ name }}
 2 | > {{ description }}
 3 | 
 4 | Run project locally
 5 | ```bash
 6 | # Install dependencies
 7 | cd <PROJECT_NAME>
 8 | yarn (or npm i)
 9 | yarn run dev (or npm run dev)
10 | ```
11 | 
12 | ---
13 | 
14 | This project was built using [Vuets](https://github.com/AkiraLaine/Vuets)


--------------------------------------------------------------------------------
/template/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Vuets</title>
 5 | </head>
 6 | <body>
 7 |   <div id='app'></div>
 8 | 
 9 |   <!-- Webpack bundle will be auto-injected -->
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "{{ name }}",
 3 |   "version": "1.0.0",
 4 |   "description": "{{ description }}",
 5 |   "scripts": {
 6 |     {{#lint}}
 7 |     "lint": "eslint --ext .js,.vue,.ts src",
 8 |     "lint:fix": "eslint --ext .js,.vue,.ts src --fix",
 9 |     "postinstall": "npm run lint:fix",
10 |     {{/lint}}
11 |     "dev": "webpack-dev-server",
12 |     "build": "cross-env NODE_ENV=production webpack"
13 |   },
14 |   "dependencies": {
15 |     {{#plugins.axios}}
16 |     "axios": "^0.16.2",
17 |     {{/plugins.axios}}
18 |     {{#plugins.vue-router}}
19 |     "vue-router": "^2.5.3",
20 |     {{/plugins.vue-router}}
21 |     {{#plugins.vuex}}
22 |     "vuex": "^2.3.1",
23 |     {{/plugins.vuex}}
24 |     "vue": "^2.3.4",
25 |     "vue-class-component": "^5.0.1"
26 |   },
27 |   "devDependencies": {
28 |     "autoprefixer": "^7.1.1",
29 |     {{#lint}}
30 |     "babel-eslint": "^7.2.3",
31 |     {{/lint}}
32 |     "babel-loader": "^7.0.0",
33 |     "babel-plugin-transform-class-properties": "^6.24.1",
34 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
35 |     "babel-preset-env": "^1.5.2",
36 |     "babel-preset-stage-0": "^6.24.1",
37 |     "babili-webpack-plugin": "^0.1.1",
38 |     "copy-webpack-plugin": "^4.0.1",
39 |     "cross-env": "^5.0.1",
40 |     "css-loader": "^0.28.4",
41 |     {{#lint}}
42 |     "eslint": "^4.0.0",
43 |     {{#if_eq lintConfig "standard"}}
44 |     "eslint-config-standard": "^10.2.1",
45 |     "eslint-plugin-standard": "^3.0.1",
46 |     {{/if_eq}}
47 |     {{#if_eq lintConfig "airbnb-base"}}
48 |     "eslint-config-airbnb-base": "^11.2.0",
49 |     "eslint-import-resolver-webpack": "^0.8.1",
50 |     "eslint-plugin-import": "^2.2.0",
51 |     {{/if_eq}}
52 |     "eslint-friendly-formatter": "^3.0.0",
53 |     "eslint-loader": "^1.7.1",
54 |     "eslint-plugin-html": "^3.0.0",
55 |     "eslint-plugin-import": "^2.3.0",
56 |     "eslint-plugin-node": "^5.0.0",
57 |     "eslint-plugin-promise": "^3.5.0",
58 |     {{/lint}}
59 |     "friendly-errors-webpack-plugin": "^1.6.1",
60 |     "html-webpack-plugin": "^2.28.0",
61 |     "style-loader": "^0.18.2",
62 |     "ts-loader": "^2.1.0",
63 |     "typescript": "^2.3.4",
64 |     "vue-loader": "^12.2.1",
65 |     "vue-template-compiler": "^2.3.4",
66 |     "webpack": "^3.0.0",
67 |     "webpack-dev-server": "^2.4.5"
68 |   },
69 |   "keywords": [
70 |     "vuejs",
71 |     "webpack",
72 |     "typescript",
73 |     "boilerplate"
74 |   ],
75 |   "license": "MIT"
76 | }
77 | 


--------------------------------------------------------------------------------
/template/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id='app'>
 3 |     {{#plugins.vue-router}}
 4 |     <router-view></router-view>
 5 |     {{else}}
 6 |     <home></home>
 7 |     {{/plugins.vue-router}}
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang='ts'>
12 | import Vue from 'vue'
13 | import Component from 'vue-class-component'
14 | {{#plugins.vue-router}}
15 | {{else}}
16 | import Home from './components/Home'
17 | {{/plugins.vue-router}}
18 | 
19 | {{#plugins.vue-router}}
20 | @Component
21 | {{else}}
22 | @Component({
23 |   components: {
24 |     Home
25 |   }
26 | })
27 | {{/plugins.vue-router}}
28 | export default class App extends Vue {
29 |   // data
30 |   appName : string = 'vuets'
31 | 
32 |   // lifecycle hooks
33 |   mounted () {
34 |     this.printToConsole()
35 |   }
36 | 
37 |   // methods
38 |   printToConsole () {
39 |     console.log('Welcome to Vuets')
40 |   }
41 | 
42 |   // computed
43 |   get properName () {
44 |     return `${this.appName[0].toUpperCase()}${this.appName.slice(1)}`
45 |   }
46 | }
47 | </script>
48 | 
49 | <style>
50 | * {
51 |   margin: 0;
52 |   padding: 0;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/template/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h3>Welcome to {{ properName }}</h3>
 4 |     This is the Home page
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang='ts'>
 9 | import Vue from 'vue'
10 | import Component from 'vue-class-component'
11 | 
12 | @Component
13 | export default class Home extends Vue {
14 | 
15 | }
16 | </script>
17 | 
18 | <style scoped>
19 | 
20 | </style>
21 | 


--------------------------------------------------------------------------------
/template/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | {{#plugins.vue-router}}
 4 | import router from './router'
 5 | {{/plugins.vue-router}}
 6 | {{#plugins.vuex}}
 7 | import store from './store'
 8 | {{/plugins.vuex}}
 9 | 
10 | /* eslint-disable no-new */
11 | new Vue({
12 |   {{#plugins.vue-router}}
13 |   router,
14 |   {{/plugins.vue-router}}
15 |   {{#plugins.vuex}}
16 |   store,
17 |   {{/plugins.vuex}}
18 |   render: h => h(App)
19 | }).$mount('#app')
20 | 


--------------------------------------------------------------------------------
/template/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | import Home from '../components/Home'
 5 | 
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       name: 'home',
13 |       component: Home
14 |     }
15 |   ]
16 | })
17 | 


--------------------------------------------------------------------------------
/template/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const state = {
 7 | 
 8 | }
 9 | 
10 | const mutations = {
11 | 
12 | }
13 | 
14 | export default new Vuex.Store({
15 |   state,
16 |   mutations
17 | })
18 | 


--------------------------------------------------------------------------------
/template/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AkiraLaine/Vuets/56487cd04ca2e2a06a32214c87ab49545c61a8d3/template/static/.gitkeep


--------------------------------------------------------------------------------
/template/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "experimentalDecorators": true,
 5 |     "lib": [
 6 |       "dom",
 7 |       "es5",
 8 |       "es2015.promise"
 9 |     ],
10 |     "module": "es2015",
11 |     "moduleResolution": "node",
12 |     "isolatedModules": false,
13 |     "noImplicitAny": true,
14 |     "noImplicitThis": true,
15 |     "strictNullChecks": true,
16 |     "removeComments": true,
17 |     "suppressImplicitAnyIndexErrors": true,
18 |     "allowJs": true,
19 |     "target": "es5"
20 |   },
21 |   "include": ["src/**/*.ts", "src/**/*.vue"],
22 |   "exclude": ["node_modules"],
23 |   "compileOnSave": false
24 | }


--------------------------------------------------------------------------------
/template/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 5 | const BabiliPlugin = require('babili-webpack-plugin')
 6 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 7 | const autoprefixer = require('autoprefixer')
 8 | 
 9 | const config = {
10 |   entry: './src/main.ts',
11 |   output: {
12 |     path: path.resolve(__dirname, 'dist'),
13 |     filename: '[hash].bundle.js'
14 |   },
15 |   devServer: {
16 |     hot: true,
17 |     overlay: true,
18 |     quiet: false
19 |   },
20 |   module: { 
21 |     rules: [
22 |       {{#lint}}
23 |       {
24 |         test: /\.(js|vue|ts)$/,
25 |         enforce: 'pre',
26 |         loader: 'eslint-loader',
27 |         options: {
28 |           formatter: require('eslint-friendly-formatter')
29 |         }
30 |       },
31 |       {{/lint}}
32 |       {
33 |         test: /\.js$/,
34 |         use: 'babel-loader'
35 |       },
36 |       {
37 |         test: /\.vue$/,
38 |         loader: 'vue-loader',
39 |         options: {
40 |           postcss: [autoprefixer({
41 |             "browsers": ["last 4 versions"]
42 |           })],
43 |           esModule: true
44 |         }
45 |       },
46 |       {
47 |         test: /\.ts$/,
48 |         loader: 'ts-loader',
49 |         options: {
50 |           appendTsSuffixTo: [/\.vue$/]
51 |         }
52 |       },
53 |       {
54 |         test: /\.css$/,
55 |         use: [
56 |           'style-loader',
57 |           'css-loader'
58 |         ]
59 |       }
60 |     ]
61 |   },
62 |   resolve: {
63 |     extensions: ['.js', '.json', '.vue', '.ts']
64 |   },
65 |   plugins: [
66 |     new HtmlWebpackPlugin({
67 |       template: './index.html'
68 |     }),
69 |     new webpack.NoEmitOnErrorsPlugin(),
70 |     new FriendlyErrorsWebpackPlugin(),
71 |     new webpack.HotModuleReplacementPlugin(),
72 |     new webpack.DefinePlugin({
73 |       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
74 |     }),
75 |     new webpack.optimize.ModuleConcatenationPlugin()
76 |   ]
77 | }
78 | 
79 | if (process.env.NODE_ENV === 'production') {
80 |   config.plugins.push(
81 |     new BabiliPlugin(),
82 |     new CopyWebpackPlugin([{
83 |       from: path.resolve(__dirname, 'static'),
84 |       to: path.resolve(__dirname, 'dist', 'static')
85 |     }])
86 |   )
87 | }
88 | 
89 | module.exports = config
90 | 


--------------------------------------------------------------------------------