feat: add vue3 dependencies

Author: Xutaotaotao

build/webpack.config.js build/webpack.configvue2.jsbuild/webpack.config.js renamed to build/webpack.configvue2.js

@@ -11,7 +11,7 @@ const PORT = 8081
 module.exports = {
 	mode: NODE_ENV,
   entry: {
-    main: process.env.NODE_ENV === 'development' ? path.resolve(__dirname, '../example/index.js') : path.resolve(__dirname, '../src/index.js'),
+    main: process.env.NODE_ENV === 'development' ? path.resolve(__dirname, '../example/vue2.js') : path.resolve(__dirname, '../src/index.js'),
 	},
 	output: {
     path: path.resolve(__dirname, '../package'),

build/webpack.configvue3.js

@@ -0,0 +1,58 @@
+const VueLoaderPlugin = require('vue-loader/dist/plugin').default;
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const NODE_ENV = process.env.NODE_ENV
+
+
+const HOST = 'localhost'
+const PORT = 8081
+
+module.exports = {
+	mode: NODE_ENV,
+  entry: {
+    main: process.env.NODE_ENV === 'development' ? path.resolve(__dirname, '../example/vue3.js') : path.resolve(__dirname, '../src/index.js'),
+	},
+	output: {
+    path: path.resolve(__dirname, '../package'),
+    filename: 'vue-luck-draw.js', //打包之后生成的文件名，可以随意写。
+    library: 'vue-luck-draw', // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
+    libraryExport: "default", // 对外暴露default属性，就可以直接调用default里的属性
+    globalObject: 'this', // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况
+    libraryTarget: 'umd' // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
+	},
+	module: {
+    rules: [
+      { test: /\.vue$/,
+				use: 'vue-loader'
+			},
+			{
+				test:	/\.(png|svg|jpg|gif)$/,
+				use: [
+					'file-loader'
+				]
+			}
+    ],
+	},
+	devServer: {
+    clientLogLevel: 'warning',
+    hot: true,
+    contentBase: 'dist',
+    compress: true,
+    host: HOST,
+    port: PORT,
+    open: true,
+    overlay: { warnings: false, errors: true },
+		publicPath: '/',
+		contentBase: path.join(__dirname, 'dist'),
+    quiet: true
+  },
+	plugins: [
+		new VueLoaderPlugin(),
+		new HtmlWebpackPlugin({
+      template: './example/index.html',
+      filename: 'index.html',
+      inject: true
+    }),
+  ]
+}

example/index.js example/vue2.jsexample/index.js renamed to example/vue2.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import App from './index.vue';
-import LuckDraw from '../src/index.js';
+import LuckDraw from '../src/vue2.js';
 
 Vue.use(LuckDraw)
 

example/vue3.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import App from './index.vue';
+import LuckDraw from '../src/vue3.js';
+
+const app = createApp(App);
+
+app.use(LuckDraw).mount('#app');

package.json

@@ -18,26 +18,28 @@
     "package.json",
     "dist",
     "vue3",
-    "index.js"
+    "index.js",
+    "package"
   ],
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --config=build/webpack.config.js",
-    "start": "cross-env NODE_ENV=development webpack serve --config=build/webpack.config.js"
+    "start": "cross-env NODE_ENV=development webpack serve --config=build/webpack.configvue2.js",
+    "start:vue3": "cross-env NODE_ENV=development webpack serve --config=build/webpack.configvue3.js"
   },
   "homepage": "https://100px.net",
   "dependencies": {
-    "clean-webpack-plugin": "^3.0.0",
-    "lucky-canvas": "^1.5.3",
-    "vue": "^2.6.12"
+    "@vue/compiler-sfc": "^3.0.7",
+    "lucky-canvas": "^1.5.3"
   },
   "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^8.0.0",
     "cross-env": "^7.0.3",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^1.3.9",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12",
+    "vue": "^3.0.7",
+    "vue-loader": "^16.1.2",
     "webpack": "^5.27.1",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"

src/index.js src/vue2.jssrc/index.js renamed to src/vue2.js

@@ -0,0 +1,16 @@
+import LuckDraw from './LuckDraw.vue'
+import LuckyGrid from './LuckyGrid.vue'
+import LuckyWheel from './LuckyWheel.vue'
+
+const install = (Vue, options) => {
+  Vue.component('LuckDraw', LuckDraw)
+  Vue.component('LuckyGrid', LuckyGrid)
+  Vue.component('LuckyWheel', LuckyWheel)
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default { install }
+export { LuckyGrid, LuckyWheel }