added demo project

d2phap · d2phap · commit 490bc5de53a4 · 2019-10-30T16:44:48.000+08:00
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "vue-file-selector-demo",
+  "version": "0.0.1",
+  "description": "File selector demo",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack --watch --config ./webpack.config.js --progress --hide-modules --mode=development",
+    "build": "webpack --config ./webpack.config.js --progress --hide-modules --mode=production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/d2phap/vue-file-selector.git"
+  },
+  "keywords": [
+    "vue-plugin",
+    "file-selector",
+    "file-upload",
+    "file-input",
+    "drag-and-drop",
+    "vue-component",
+    "vue-resource",
+    "vuejs"
+  ],
+  "author": "Duong Dieu Phap",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/d2phap/vue-file-selector/issues"
+  },
+  "homepage": "https://github.com/d2phap/vue-file-selector#readme",
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/preset-env": "^7.6.3",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.2.0",
+    "node-sass": "^4.13.0",
+    "sass-loader": "^8.0.0",
+    "vue-loader": "^15.7.1",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9"
+  },
+  "dependencies": {
+    "vue": "^2.6.10"
+  }
+}
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script src="../dist/index.js"></script>
+  <script src="index.js"></script>
 </body>
 </html>
diff --git a/demo/public/index.js b/demo/public/index.js
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -2,26 +2,21 @@
   <div>
     My App.vue comp
 
-    <FileSelector
+    <file-selector
       accept-extensions=".zip"
       :height="300"
       @validate="validate"
       @change="change"
     >
       hahahah
-    </FileSelector>
+    </file-selector>
   </div>
 </template>
 
-<script>
-import FileSelector from './components/FileSelector.vue';
 
+<script>
 export default {
   name: 'App',
-  components: {
-    FileSelector,
-  },
-
   methods: {
     validate(result, files) {
       console.log('Validation result: ' + result);
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import FileSelector from '../../dist/index';
+import App from './App.vue';
+
+
+Vue.use(FileSelector);
+
+
+new Vue({
+  el: '#app',
+  render: h => h(App),
+});
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -0,0 +1,29 @@
+const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, './public'),
+    publicPath: '/public/',
+    filename: 'index.js',
+  },
+  module: {
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      { test: /\.vue$/, loader: 'vue-loader' },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  devtool: '#source-map',
+  plugins: [
+    new VueLoaderPlugin(),
+  ],
+};
diff --git a/dist/index.js b/dist/index.js
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   "bugs": {
     "url": "https://github.com/d2phap/vue-file-selector/issues"
   },
-  "homepage": "https://github.com/d2phap/vue-file-selector#readme",
+  "homepage": "https://github.com/d2phap/vue-file-selector",
   "devDependencies": {
     "@babel/core": "^7.6.4",
     "@babel/preset-env": "^7.6.3",
diff --git a/src/component.vue b/src/component.vue
@@ -36,6 +36,8 @@
 
 <script>
 export default {
+  name: 'FileSelector',
+
   props: {
     multiple: {
       type: Boolean,
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,16 @@
-import Vue from 'vue';
-import App from './App.vue';
+import component from './component.vue'
 
-new Vue({
-  el: '#app',
-  render: h => h(App)
-})
+const Plugin = {
+  component,
 
-console.log(`Duong Dieu Phap :) ${123}`);
+  install(Vue) {
+    if (this.installed) {
+      return;
+    }
+
+    Vue.component(component.name, component);
+    this.installed = true;
+  }
+}
+
+export default Plugin;
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,12 +1,23 @@
 const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const webpack = require('webpack');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+var pjson = require('./package.json');
+
+const copyright = `Vue File selector v${pjson.version}
+(c) 2019 ${pjson.author}
+${pjson.homepage}
+Released under the ${pjson.license} License.`;
 
 module.exports = {
   entry: './src/index.js',
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
     filename: 'index.js',
+
+    library: 'vue-file-selector',
+    libraryTarget: 'umd',
   },
   module: {
     rules: [
@@ -24,5 +35,6 @@ module.exports = {
   },
   plugins: [
     new VueLoaderPlugin(),
+    new webpack.BannerPlugin(copyright),
   ],
 };
