├── template
    ├── .gitignore
    ├── README.md
    ├── src
    │   ├── index.js
    │   ├── demo.vue
    │   └── Component.vue
    ├── package.json
    └── build.config.js
├── meta.json
└── README.md


/template/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 | 


--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
 1 | # {{ name }}
 2 | 
 3 | > {{ description }}
 4 | 
 5 | # Usage
 6 | 
 7 | ## Installation
 8 | 
 9 | ### Using yarn
10 | 
11 | `yarn add {{ name }}`
12 | 
13 | ### Using npm
14 | 
15 | `npm i --save {{ name }}`
16 | 
17 | ## License
18 | 
19 | This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)
20 | 


--------------------------------------------------------------------------------
/template/src/index.js:
--------------------------------------------------------------------------------
 1 | // need to use require instead of import (changes from babel 5 to 6)
 2 | const Component = require('./Component.vue')
 3 | module.exports = Component
 4 | 
 5 | Component.install = Vue => Vue.component(Component.name, Component)
 6 | Component.version = proccess.env.VERSION
 7 | 
 8 | // Install by default if using the script tag
 9 | if (typeof window !== 'undefined' && window.Vue) {
10 |   window.Vue.use(Component)
11 | }
12 | 


--------------------------------------------------------------------------------
/template/src/demo.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 | <div style="padding-top: 50px">
 3 |   <h1>DEMO {{ name }} Vue.js Component</h1>
 4 | 
 5 |   <p>
 6 |     <{{ name }} v-model="value" :maxlength="40" @left-chars="leftChars = $event"></{{ name }}>
 7 |     <strong>\{{ leftChars }}</strong>
 8 |   </p>
 9 | 
10 |   <p>
11 |     \{{ value }}
12 |   </p>
13 | </div>
14 | </template>
15 | 
16 | <script>
17 | 
18 | import Component from '../src/Component.vue'
19 | 
20 | export default {
21 |   components: {'{{ name }}': Component},
22 |   data () {
23 |     return {
24 |       value: 'My Input Value',
25 |       leftChars: 0
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/meta.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "prompts": {
 3 |     "name": {
 4 |       "type": "string",
 5 |       "required": true,
 6 |       "label": "Component name in kebab-case format",
 7 |       "default": "v-awesome-component"
 8 |     },
 9 |     "description": {
10 |       "type": "string",
11 |       "required": true,
12 |       "label": "Project description",
13 |       "default": "A Vue.js component"
14 |     },
15 |     "author": {
16 |       "type": "string",
17 |       "label": "Author"
18 |     }
19 |   },
20 |   "completeMessage": "To get started:\n\n{{^inPlace}}cd {{destDirName}}\n\n{{/inPlace}}1. Write your component in src/Component.vue\n2. Write a demo in src/demo.vue\n3. npm run dev\n4. npm run dist\n5. npm run dist:demo\n6. npm run demo:open"
21 | }
22 | 


--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "{{ name }}",
 3 |   "version": "0.0.1",
 4 |   "description": "{{ description }}",
 5 |   "author": "{{ author }}",
 6 |   "main": "dist/{{ name }}.js",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "dist": "vue build ./src/index.js --config ./build.config.js --dist ./dist/ --prod --lib",
10 |     "dist:demo": "vue build ./src/demo.vue --config ./build.config.js --dist ./demo/ --prod",
11 |     "build": "npm run dist -- --disable-compress",
12 |     "start": "npm run dev",
13 |     "dev": "vue build ./src/demo.vue --config ./build.config.js",
14 |     "demo:open": "open 'http://localhost:3000/'; serve ./demo/"
15 |   },
16 |   "files": [
17 |     "dist/"
18 |   ],
19 |   "keywords": [
20 |     "vue",
21 |     "component"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/template/src/Component.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 | <textarea class="{{ name }}" v-model="editableValue" :maxlength="maxlength"></textarea>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: '{{ name }}',
 8 |   props: {
 9 |     value: {
10 |       type: String,
11 |       default: '',
12 |       required: true
13 |     },
14 | 
15 |     maxlength: {
16 |       type: Number,
17 |       default: 0,
18 |       required: true
19 |     }
20 |   },
21 | 
22 |   data () {
23 |     console.log(this.value)
24 |     return {
25 |       editableValue: this.value
26 |     }
27 |   },
28 | 
29 |   watch: {
30 |     value (newValue) {
31 |       this.editableValue = newValue
32 |     },
33 | 
34 |     editableValue: {
35 |       immediate: true,
36 |       handler (newValue) {
37 |         this.$emit('input', newValue)
38 |         this.$emit('left-chars', this.leftChars)
39 |       }
40 |     }
41 |   },
42 | 
43 |   computed: {
44 |     leftChars () {
45 |       return this.maxlength - this.editableValue.length
46 |     }
47 |   }
48 | }
49 | </script>
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Component Template Using Webpack
 2 | 
 3 | > Build your standalone components using this tiny template.
 4 | 
 5 | > This template is Vue 2.x **only**.
 6 | 
 7 | ### Usage
 8 | 
 9 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
10 | 
11 | ``` bash
12 | $ npm install -g vue-cli
13 | $ vue init vuejs-tips/vue-component-webpack-template my-component
14 | $ cd my-component
15 | $ npm run dev
16 | $ npm run dist
17 | $ npm run dist:demo
18 | $ npm run demo:open
19 | ```
20 | 
21 | The generated output in ./dist can be used with node and the browser.
22 | 
23 | ### What's Included
24 | 
25 | - NOTHING. Just use the global *vue-cli*
26 | 
27 | For configuration and detailed explanation on how things work, consult the [docs for vue-cli build](https://github.com/vuejs/vue-cli/blob/master/docs/build.md).
28 | 
29 | ### Fork It And Make Your Own
30 | 
31 | You can fork this repo to create your own boilerplate, and use it with `vue-cli`:
32 | 
33 | ``` bash
34 | vue init your-username/your-template your-component
35 | ```
36 | 
37 | ### TODO
38 | 
39 | - Include unit testing
40 | - Correctly generate css in dist
41 | 


--------------------------------------------------------------------------------
/template/build.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require.main.require('webpack')
 2 | const {name, version} = require('./package.json')
 3 | 
 4 | const demo = process.env.NODE_ENV === 'development' || process.env.npm_lifecycle_event === 'dist:demo'
 5 | 
 6 | module.exports = {
 7 |   // generate html only for dev and dist:demo
 8 |   html: demo,
 9 |   webpack: {
10 |     devtool: false, // disable source-map
11 |     output: {
12 |       publicPath: '.', // generate client.*.js relative to ./demo/index.html
13 |       filename: demo ? undefined : kebabCase(name) + '.js', // my-component.js
14 |       library: demo ? undefined : camelCase(name) // MyComponent
15 |     },
16 |     plugins: [
17 |       new webpack.DefinePlugin({
18 |         'proccess.env.VERSION': JSON.stringify(version) // adds MyComponent.version
19 |       })
20 |     ]
21 |   }
22 | }
23 | 
24 | // utils
25 | 
26 | // converts MyComponent to my-component
27 | function kebabCase (s) {
28 |   return s.replace(/([A-Z])([^A-Z\-])/g, (_, a, b) => `-${a}${b}`)
29 |           .toLowerCase()
30 |           .replace(/[\s_-]+/g, '-')
31 |           .replace(/(^\W)|(\W$)/g, '')
32 | }
33 | 
34 | // converts my-component to MyComponent
35 | function camelCase (s) {
36 |   return s.replace(/([\-_\s]+[a-z])|(^[a-z])/g, $1 => $1.toUpperCase())
37 |           .replace(/[\-_\s]+/g, '')
38 | }
39 | 


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