use vue cli 3

Author: ravenq

README.md

@@ -1,29 +1,46 @@
 # vue-cli-plugin-component-lib
 
-## Project setup
-```
-npm install
-```
+create a component lib with example for `@vue/cli` 3.0.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## Feature
 
-### Compiles and minifies for production
-```
-npm run build
-```
+* example code for your component.
+* travis config if you need.
 
-### Run your tests
-```
-npm run test
-```
+## Install
 
-### Lints and fixes files
-```
-npm run lint
+First you need to install `@vue/cli` globally (follow the instructions [here](https://cli.vuejs.org/)).
+
+Then create a project and add the Element plugin:
+
+```bash
+vue create my-app
+cd my-app
+vue add component-lib
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Use with vue-cli UI
+
+Skip this part if you've done everything in the `Install` section.
+
+If you prefer managing your project in vue-cli UI (by running `vue ui`), here's how you can add component lib plugin: go to the Plugins menu, click the upper right `+ Add plugin` button, find `vue-cli-plugin-component-lib` and install it.
+
+## Options
+
+### travis
+
+create ```.travis.yml``` for you project.
+
+#### npm
+
+depoly to npm by travis. and you may provide your email for you npm acount.
+
+tips: you may config your travis env ```NPM_TOKEN``` first.
+
+![npm token](doc/npm_token.png)
+
+## Hack in your component
+
+```sh
+yarn serve
+```

babel.config.js

@@ -0,0 +1,72 @@
+const camelCase = require('lodash.camelcase')
+const upperFirst = require('lodash.upperfirst')
+const kebabCase = require('lodash.kebabcase')
+const endsWith = require('lodash.endswith')
+
+module.exports = (api, opts, rootOptions) => {
+  // delete files created by default.
+  api.postProcessFiles(files => {
+    for (const file in files) {
+      if (/src\/main\.js$|src\/App\.vue$|src\/components\/HelloWorld\.vue$/.test(file)) {
+        delete files[file]
+      }
+    }
+  })
+
+  const libNameCamelCase = upperFirst(camelCase(opts.libName))
+  const libNameKebabCase = kebabCase(opts.libName)
+
+  api.extendPackage({
+    name: libNameKebabCase,
+    main: `dist/${opts.libName}.umd.min.js`,
+    scripts: {
+      'serve': 'vue-cli-service serve ./example/main.js',
+      'build:lib': 'vue-cli-service build --target lib ./src/index.js',
+      'build:example': 'vue-cli-service build --dest example/dist ./example/main.js',
+      'build': 'npm run build:lib && npm run build:example',
+      'lint': 'vue-cli-service lint'
+    }
+  })
+
+  if (opts.npm) {
+    let repository = opts.repository
+    if (endsWith(repository, '.git')) {
+      repository = repository.substring(0, repository.length - 4)
+    }
+    api.extendPackage({
+      private: false,
+      description: opts.description,
+      author: opts.author,
+      license: opts.license,
+      repository: {
+        type: 'git',
+        url: `git+${repository}.git`
+      },
+      bugs: {
+        url: `${repository}issues`
+      },
+      homepage: repository,
+    })
+  }
+
+  api.render({
+    './example/components/ComponentLib.vue': './templates/example/components/ComponentLib.vue',
+    './example/App.vue': './templates/example/App.vue',
+    './example/main.js': './templates/example/main.js',
+  }, {
+    libNameCamelCase: libNameCamelCase
+  })
+
+  api.render({
+    './src/index.js': './templates/src/index.js',
+    './src/my-component.vue': `./templates/src/${opts.libName}.vue`,
+  }, {
+    libNameCamelCase: libNameCamelCase
+  })
+
+  if (opts.travis) {
+    api.render({
+      './.travis.yml': './templates/_travis.yml'
+    })
+  }
+}

doc/npm_token.png

@@ -0,0 +1,15 @@
+language: node_js
+node_js:
+  - "10"
+script:
+  - yarn build
+
+<%_ if (options.npm) { _%>
+deploy:
+  provider: npm
+  email: <%= options.email %>
+  api_key: "$NPM_TOKEN"
+  skip_cleanup: true
+  on:
+    tags: true
+<%_ } _%>

example/assets/logo.png

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <component-lib/>
+    <component-lib />
   </div>
 </template>
 

generator/index.js

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import MyComponent from '../../src'
+import <%= libNameCamelCase %> from '../../src'
 export default {
   components: {
-    MyComponent
+    <%= libNameCamelCase %>
   },
-  data () {
+  data() {
     return {}
   }
 }

generator/templates/_travis.yml

@@ -0,0 +1,13 @@
+import <%= libNameCamelCase %> from './<%= options.libName %>'
+
+const install = function (Vue) {
+  Vue.component(<%= libNameCamelCase %>.name, <%= libNameCamelCase %>)
+}
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+<%= libNameCamelCase %>.install = install
+export default <%= libNameCamelCase %>

example/App.vue renamed to generator/templates/example/App.vue

@@ -4,8 +4,8 @@
 
 <script>
 export default {
-  name: "my-component",
-  data () {
+  name: '<%= options.libName %>',
+  data() {
     return {}
   }
 };

example/components/ComponentLib.vue renamed to generator/templates/example/components/ComponentLib.vue

@@ -0,0 +1 @@
+module.exports = () => {}