├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── meta.js
├── package.json
└── template
    ├── .babelrc
    ├── .gitignore
    ├── LICENSE
    ├── README.md
    ├── dist
        └── .gitkeep
    ├── package.json
    ├── src
        ├── Components
        │   └── ExampleComponent.vue
        └── main.js
    ├── webpack.config.js
    └── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "es2015"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | dist/*
 6 | !dist/.gitkeep
 7 | dist-module/
 8 | 
 9 | # Editor directories and files
10 | .idea
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | 
 6 | # Editor directories and files
 7 | .idea
 8 | *.suo
 9 | *.ntvs*
10 | *.njsproj
11 | *.sln
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">⚠️ This package is abandoned in favor of Vue Cli3 ⚠️</h1>
 2 | <p align="center">Refer to its documentation for creating new Vue packages</p>
 3 | 
 4 | <br>
 5 | <br>
 6 | 
 7 | # Vue package ES6 boilerplate
 8 | This is a simple boilerplate for your next Vue plugin.
 9 | 
10 | ## Table of contents:
11 | * [Installation](#installation)
12 | * [How it works](#how-it-works)
13 |     * [NPM usage](#npm-usage)
14 |     * [Browser usage](#browser-usage)
15 | * [Contributing](#contributing)
16 | * [License](#license)
17 | * [Issues](#issues)
18 | 
19 | ## Installation
20 | ```
21 | $ npm install -g vue-cli
22 | $ vue init DCzajkowski/vue-package-template my-package
23 | $ cd my-package
24 | $ yarn # or npm install
25 | ```
26 | 2. Write your package code in `src/main.js`
27 | 3. Open `package.json` file. Find (all) and replace following keys:
28 |     * `package-git-url` - Full url to the git folder, e.g. https://github.com/user/package.git
29 |     * `package-repo-url` - Full url to the repo, e.g. https://github.com/user/package
30 | 4. Run `npm login`
31 | 5. Run `npm publish`
32 | 
33 | ## How it works
34 | This template uses two different build systems.
35 | 
36 | ### NPM usage
37 | All code meant for npm usage is compiled with Webpack. All code goes into `dist-module/` folder.
38 | 
39 | It is ignored by Git, but is being published to npm.
40 | 
41 | ### Browser usage
42 | All code meant for browser usage ie. `<script>` import is compiled with Browserify + Vueify. All code goes to `dist/` folder.
43 | 
44 | It is ignored by Git, but is being published to npm.
45 | 
46 | ## Contributing
47 | You are welcome to contribute to this package in any way or form you want. New issues and pull requests are welcome.
48 | 
49 | I am not a JavaScript expert and some things may not be made in the best way possible. Feel free to point out anything that sticks out.
50 | 
51 | ## License
52 | Just use it. For free. Forever.
53 | 
54 | ## Issues
55 | If you find any bug or problem with the template please open an issue or create a pull request on the [Github repo](https://github.com/DCzajkowski/npm-vue-es6-package).
56 | 


--------------------------------------------------------------------------------
/meta.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "helpers": {
 3 |     "if_or": function (v1, v2, options) {
 4 |       if (v1 || v2) {
 5 |         return options.fn(this);
 6 |       }
 7 | 
 8 |       return options.inverse(this);
 9 |     }
10 |   },
11 |   "prompts": {
12 |     "name": {
13 |       "type": "string",
14 |       "required": true,
15 |       "message": "Project name"
16 |     },
17 |     "description": {
18 |       "type": "string",
19 |       "required": false,
20 |       "message": "Project description",
21 |       "default": "A Vue.js project"
22 |     },
23 |     "author": {
24 |       "type": "string",
25 |       "message": "Author"
26 |     }
27 |   },
28 |   "completeMessage": "To get started:\n\n  {{^inPlace}}cd {{destDirName}}\n  {{/inPlace}}yarn or npm install\n\nDocumentation can be found at https://github.com/DCzajkowski/npm-vue-es6-cli-package"
29 | };
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "npm-vue-es6-cli-package",
 3 |   "version": "1.0.0",
 4 |   "license": "MIT",
 5 |   "description": "A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.",
 6 |   "devDependencies": {
 7 |     "vue-cli": "^2.8.1"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/template/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "es2015"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/template/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | dist/*
 6 | !dist/.gitkeep
 7 | dist-module/
 8 | 
 9 | # Editor directories and files
10 | .idea
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/template/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013-present, Yuxi (Evan) You
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
 1 | # {{ name }}
 2 | ## Demo
 3 | The live demo is available here: [link](link).
 4 | 
 5 | ## Installation
 6 | ### With npm:
 7 | ```bash
 8 | npm i {{ name }} --save
 9 | ```
10 | 
11 | ### With a CDN:
12 | ```html
13 | <!-- In <head> -->
14 | <meta rel="stylesheet" href="https://unpkg.com/{{ name }}/dist/{{ name }}.css">
15 | <!-- In <body>, after Vue import -->
16 | <script src="https://unpkg.com/{{ name }}/dist/{{ name }}.js"></script>
17 | ```
18 | 
19 | ## Usage
20 | ### With an ES6 bundler (via npm)
21 | In your index file
22 | ```js
23 | import CustomPackage from '{{ name }}'
24 | Vue.use(CustomPackage)
25 | ```
26 | 
27 | ### With a CDN
28 | ```html
29 | <script>
30 |     Vue.use(CustomPackage)
31 | 
32 |     new Vue({
33 |         // ...
34 |     })
35 | </script>
36 | ```
37 | 
38 | ---
39 | 
40 | ### Available props:
41 | //
42 | 
43 | ## Contents
44 | //
45 | 
46 | ## License
47 | //
48 | 
49 | ## Bugs
50 | //
51 | 


--------------------------------------------------------------------------------
/template/dist/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DCzajkowski/vue-package-template/01fe186977550712d684681ccd11208363c1cda1/template/dist/.gitkeep


--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "{{ name }}",
 3 |   "description": "{{ description }}",
 4 |   "version": "0.0.1",
 5 |   "main": "dist-module/main.js",
 6 |   "scripts": {
 7 |     "prepublish": "npm run build && npm run browser-build",
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
10 |     "browser-build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/{{ name }}.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/{{ name }}.js"
11 |   },
12 |   "browserify": {
13 |     "transform": [
14 |       "babelify",
15 |       "vueify"
16 |     ]
17 |   },
18 |   "browser": {
19 |     "vue": "vue/dist/vue.common.js"
20 |   },
21 |   "repository": {
22 |     "url": "git+package-git-url",
23 |     "type": "git"
24 |   },
25 |   "keywords": [],
26 |   "author": "{{ author }}",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "package-repo-url/issues"
30 |   },
31 |   "homepage": "package-repo-url#readme",
32 |   "dependencies": {
33 |     "vue": "^2.3.3"
34 |   },
35 |   "devDependencies": {
36 |     "babel-cli": "^6.24.1",
37 |     "babel-core": "^6.0.0",
38 |     "babel-loader": "^6.0.0",
39 |     "babel-plugin-transform-runtime": "^6.0.0",
40 |     "babel-preset-env": "^1.5.1",
41 |     "babel-preset-es2015": "^6.24.1",
42 |     "babel-preset-stage-2": "^6.0.0",
43 |     "babel-runtime": "^6.0.0",
44 |     "babelify": "^7.2.0",
45 |     "browserify": "^14.4.0",
46 |     "browserify-hmr": "^0.3.1",
47 |     "cross-env": "^3.0.0",
48 |     "css-loader": "^0.25.0",
49 |     "envify": "^3.4.1",
50 |     "file-loader": "^0.9.0",
51 |     "http-server": "^0.9.0",
52 |     "node-sass": "^4.5.0",
53 |     "npm-run-all": "^2.3.0",
54 |     "phantomjs-prebuilt": "^2.1.3",
55 |     "proxyquireify": "^3.0.1",
56 |     "sass-loader": "^5.0.1",
57 |     "uglify-js": "^2.5.0",
58 |     "vue-loader": "^12.1.0",
59 |     "vue-template-compiler": "^2.3.3",
60 |     "vueify": "^9.4.1",
61 |     "watchify": "^3.4.0",
62 |     "webpack": "^2.6.1",
63 |     "webpack-dev-server": "^2.4.5"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/template/src/Components/ExampleComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         Hello World!
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         //
10 |     }
11 | </script>
12 | 
13 | <style>
14 |     /* You css styles */
15 | </style>
16 | 


--------------------------------------------------------------------------------
/template/src/main.js:
--------------------------------------------------------------------------------
 1 | import ExampleComponent from './Components/ExampleComponent.vue'
 2 | 
 3 | const PackageName = {
 4 |     install(Vue, options = {}) {
 5 |         /**
 6 |          * Here comes your plugin's logic
 7 |          *
 8 |          * To make use of it you can declare a Vue mixin:
 9 |          * Vue.mixin({
10 |          *     // Your Vue related logic goes here
11 |          * });
12 |          *
13 |          * If you don't want to use a mixin, you can also use all Vue-connected declarations like so:
14 |          * Vue.component('component-name', ImportedComponent)
15 |          *
16 |          * Good resources:
17 |          * - https://alligator.io/vuejs/creating-custom-plugins/
18 |          * - https://vuejs.org/v2/guide/plugins.html
19 |          */
20 | 
21 |         // Example component declaration:
22 |         Vue.component('example-component', ExampleComponent)
23 |     },
24 | }
25 | 
26 | if (typeof window !== 'undefined') {
27 |     if (window.Vue) {
28 |         window.Vue.use(PackageName)
29 |     }
30 | 
31 |     window.PackageName = PackageName
32 | }
33 | 
34 | export { PackageName }
35 | export default PackageName
36 | 


--------------------------------------------------------------------------------
/template/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist-module'),
 8 |     publicPath: '/dist-module/',
 9 |     filename: 'main.js',
10 |     library: 'es6Module',
11 |     libraryTarget: 'umd'
12 |   },
13 |   module: {
14 |     rules: [
15 |       {
16 |         test: /\.vue$/,
17 |         loader: 'vue-loader',
18 |         options: {
19 |           loaders: {
20 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
21 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
22 |             // other preprocessors should work out of the box, no loader config like this necessary.
23 |             'scss': 'vue-style-loader!css-loader!sass-loader',
24 |             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
25 |           }
26 |           // other vue-loader options go here
27 |         }
28 |       },
29 |       {
30 |         test: /\.js$/,
31 |         loader: 'babel-loader',
32 |         exclude: /node_modules/
33 |       },
34 |       {
35 |         test: /\.(png|jpg|gif|svg)$/,
36 |         loader: 'file-loader',
37 |         options: {
38 |           name: '[name].[ext]?[hash]'
39 |         }
40 |       }
41 |     ]
42 |   },
43 |   resolve: {
44 |     alias: {
45 |       'vue$': 'vue/dist/vue.esm.js'
46 |     }
47 |   },
48 |   devServer: {
49 |     historyApiFallback: true,
50 |     noInfo: true
51 |   },
52 |   performance: {
53 |     hints: false
54 |   },
55 |   devtool: '#eval-source-map'
56 | }
57 | 
58 | if (process.env.NODE_ENV === 'production') {
59 |   module.exports.devtool = '#source-map'
60 |   // http://vue-loader.vuejs.org/en/workflow/production.html
61 |   module.exports.plugins = (module.exports.plugins || []).concat([
62 |     new webpack.DefinePlugin({
63 |       'process.env': {
64 |         NODE_ENV: '"production"'
65 |       }
66 |     }),
67 |     new webpack.optimize.UglifyJsPlugin({
68 |       sourceMap: true,
69 |       compress: {
70 |         warnings: false
71 |       }
72 |     }),
73 |     new webpack.LoaderOptionsPlugin({
74 |       minimize: true
75 |     })
76 |   ])
77 | }
78 | 


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