fix(build): fix build proccess and documentation

Author: Walker Leite

template/.gitignore

@@ -1,6 +1,8 @@
 .DS_Store
 node_modules/
 dist/
+cjs/
+umd/
 styleguide/
 npm-debug.log
 yarn-error.log

template/README.md

@@ -2,16 +2,26 @@
 
 > {{ description }}
 
-# Usage
+## Installation
 
-## ES6 Modules / CommonJS
+### Using yarn
 
-```bash
-$ npm run build
-```
+`yarn add {{ name }}`
+
+### Using npm
+
+`npm i --save {{ name }}`
+
+## Demo and Docs
+
+`npm run serve`
+
+## Usage
+
+### With [vue-loader](https://github.com/vuejs/vue-loader) or [vueify](https://github.com/vuejs/vueify)
 
 ```js
-import {{ camelcase name }} from 'dist/{{ name }}';
+import {{ camelcase name }} from '{{ name }}.vue';
 
 Vue.component('{{ name }}', {{ camelcase name }});
 ```
@@ -20,36 +30,36 @@ Vue.component('{{ name }}', {{ camelcase name }});
 <{{name}} text="Hello World!"></{{name}}>
 ```
 
-## UMD
+### ES6 Modules / CommonJS
+
+```js
+import {{ camelcase name }} from '{{ name }}/cjs/{{ name }}.min.js';
+import '{{ name }}/cjs/{{ name }}.min.css';
+
+Vue.component('{{ name }}', {{ camelcase name }});
+```
 
-```bash
-$ npm run build:umd
+```html
+<{{name}} text="Hello World!"></{{name}}>
 ```
 
+### UMD
+
 ```html
 <{{name}} text="Hello World!"></{{name}}>
 
 <script src="https://unpkg.com/vue" charset="utf-8"></script>
-<script src="./dist/{{ name }}.min.js" charset="utf-8"></script>
+<script src="./umd/{{ name }}.min.js" charset="utf-8"></script>
+<link rel="stylesheet" type="text/css" href="./umd/{{ name }}.min.css">
 
 <script type="text/javascript">
   Vue.component('{{ name }}', window.{{ camelcase name }});
 </script>
 ```
 
-## Installation
-
-### Using yarn
+## Build
 
-`yarn add {{ name }}`
-
-### Using npm
-
-`npm i --save {{ name }}`
-
-## Demo and Docs
-
-`npm run serve`
+Build configuration is located in the `poi.config.js` file, to build just run: `npm run build`, it will build to `cjs` and `umd` directories.
 
 ## Tests
 

template/package.json

@@ -3,12 +3,11 @@
   "version": "0.0.1",
   "description": "{{ description }}",
   "author": "{{ author }}",
-  "main": "dist/{{name}}.min.js",
+  "main": "src/{{name}}/{{name}}.vue",
   "license": "MIT",
   "scripts": {
     "lint": "eslint src/**/*.vue",
-    "build": "poi build --format cjs",
-    "build:umd": "poi build --format umd",
+    "build": "poi build --format cjs --dist cjs; poi build --format umd --dist umd",
     "build:doc": "vue-styleguidist build",
     "serve": "vue-styleguidist server",
     "test": "poi test",
@@ -20,7 +19,8 @@
     "component"
   ],
   "files": [
-    "dist/"
+    "umd/",
+    "cjs/"
   ],
   "dependencies": {
     "vue": "^2.5.3"

template/poi.config.js

@@ -7,6 +7,7 @@ module.exports = {
   entry: glob('./src/**/*.vue'),
   filename: {
     js: name + '.min.js',
+    css: name + '.min.css',
   },
   sourceMap: true,
   html: false,

template/src/Component/Component.vue

@@ -20,3 +20,7 @@ export default {
   },
 }
 </script>
+
+<style lang="css" scoped>
+  /* place here your styles */
+</style>

test.js

@@ -5,7 +5,7 @@ const commands = [
   {cmd: './node_modules/.bin/vue', args: ['init', '.', 'test-cmp'], yes: true},
   {cmd: 'npm', args: ['install'], cwd: 'test-cmp'},
   {cmd: 'npm', args: ['run', 'lint'], cwd: 'test-cmp'},
-  {cmd: 'npm', args: ['run', 'build:umd'], cwd: 'test-cmp'},
+  {cmd: 'npm', args: ['run', 'build'], cwd: 'test-cmp'},
   {cmd: 'npm', args: ['run', 'build:doc'], cwd: 'test-cmp'},
   {cmd: 'npm', args: ['run', 'test'], cwd: 'test-cmp'},
   {cmd: 'npm', args: ['run', 'test:cov'], cwd: 'test-cmp'}