Get plugin Use to work with installation mode

Author: tmlee

examples/src/main.js

@@ -2,12 +2,15 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import FloatThead from '../../dist/vue-floatthead.js'
 
 Vue.config.productionTip = false
 
+Vue.use(FloatThead)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
-  template: '<App/>',
+  template: '<div><App/></div>',
   components: { App }
 })

package.json

@@ -4,7 +4,10 @@
   "description": "Vue 2 component for jquery.floatThead",
   "author": " <tm89lee@gmail.com>",
   "private": false,
-  "keywords":[
+  "main": "dist/vue-floatthead.js",
+  "module": "dist/vue-floatthead.js",
+  "unpkg": "dist/vue-floatthead.js",
+  "keywords": [
     "vue",
     "vuejs",
     "floatthead",
@@ -35,19 +38,22 @@
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^3.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^3.1.4",
     "css-loader": "^0.26.1",
     "eslint": "^3.14.1",
+    "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-html": "^2.0.0",
-    "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
@@ -58,8 +64,7 @@
     "function-bind": "^1.1.0",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "cross-env": "^3.1.4",
+    "inject-loader": "^2.0.1",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
@@ -70,25 +75,24 @@
     "karma-webpack": "^2.0.2",
     "lolex": "^1.5.2",
     "mocha": "^3.2.0",
-    "chai": "^3.5.0",
-    "sinon": "^1.17.7",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^2.0.1",
-    "babel-plugin-istanbul": "^3.1.2",
-    "phantomjs-prebuilt": "^2.1.14",
-    "semver": "^5.3.0",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.1.0",
+    "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue-loader": "^11.1.4",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.2.4",
     "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
-    "webpack-merge": "^2.6.1"
+    "webpack-merge": "^2.6.1",
+    "webpack-node-externals": "^1.5.4"
   },
   "engines": {
     "node": ">= 4.0.0",

src/main.js

@@ -0,0 +1,7 @@
+import FloatThead from './components/FloatThead.vue'
+
+function install(Vue, options) {
+   Vue.component('FloatThead', FloatThead);
+}
+
+export default install;

webpack.config.js

@@ -0,0 +1,58 @@
+const path = require('path');
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+
+const config = module.exports = {
+  plugins: []
+};
+
+// Set context to root of project
+config.context = path.resolve(__dirname);
+
+// Client entry
+config.entry = {
+  "vue-floatThead": path.resolve(__dirname, 'src/main')
+};
+
+// Basic output config
+config.output = {
+  path: path.resolve(__dirname, 'dist'),
+  filename: 'vue-floatthead.js',
+  library: ["vue-floatThead"],
+  libraryTarget: "umd",
+};
+
+config.externals = [{
+  'vue': {
+    umd: 'Vue',
+    global: 'Vue',
+    root: 'Vue',
+    commonjs2: 'vue',
+    commonjs: 'vue',
+    amd: 'vue'
+  }
+}];
+// Resolver config
+config.resolve = {
+  extensions: ['.js', '.vue'],
+  enforceExtension: false
+};
+
+config.resolveLoader = {
+  modules: config.resolve.modules
+};
+
+config.module = {
+  loaders: [
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader'
+    },
+    {
+      test: /\.js$/,
+      loader: 'babel-loader',
+      // important: exclude files in node_modules, otherwise it's going to be really slow!
+      exclude: /node_modules|vendor/
+    },
+  ]
+};