Update vue demo. (#73)

Tencent · Jan 26, 2022 · 99eeab9 · 99eeab9
1 parent aab6391
commit 99eeab9
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 14 deletions.
diff --git a/web/demo/vue/vue2/README.md b/web/demo/vue/vue2/README.md
@@ -0,0 +1,15 @@
+# vue2-libpag-webpack-demo
+
+> This template should help get you started developing with libpag and Vue 2 in Webpack. Use copy-webpack-plugin to make the project packaged by webpack can access libpag.wasm
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run serve
+
+# build for production with minification
+npm run build
+```
diff --git a/web/demo/vue/vue2/config/dev.env.js b/web/demo/vue/vue2/config/dev.env.js
@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
diff --git a/web/demo/vue/vue2/config/index.js b/web/demo/vue/vue2/config/index.js
@@ -0,0 +1,23 @@
+'use strict'
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    host: 'localhost',
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+  }
+}
diff --git a/web/demo/vue/vue2/config/prod.env.js b/web/demo/vue/vue2/config/prod.env.js
@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}
diff --git a/web/demo/vue/vue2/package.json b/web/demo/vue/vue2/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue2",
+  "name": "vue2-libpag-webpack-demo",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -18,6 +18,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "libpag": "^0.0.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

diff --git a/web/demo/vue/vue2/public/index.html b/web/demo/vue/vue2/public/index.html
@@ -4,15 +4,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script src="https://unpkg.com/libpag@latest/lib/libpag.min.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/web/demo/vue/vue2/src/App.vue b/web/demo/vue/vue2/src/App.vue
@@ -5,10 +5,12 @@
 </template>
 
 <script>
+import { PAGInit } from 'libpag'
+
 export default {
   name: 'App',
   mounted() {
-    window.libpag.PAGInit().then((PAG) => {
+    PAGInit().then((PAG) => {
       const url = 'https://pag.io/file/like.pag';
       fetch(url)
         .then((response) => response.blob())

diff --git a/web/demo/vue/vue2/vue.config.js b/web/demo/vue/vue2/vue.config.js
@@ -0,0 +1,26 @@
+const path = require('path')
+const config = require('./config')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+
+module.exports = {
+  configureWebpack: {
+    entry: {
+      app: './src/main.js'
+    },
+    output: {
+      path: config.build.assetsRoot,
+      filename: '[name].js',
+    },
+    plugins: [
+      new CopyWebpackPlugin([
+        {
+          from: path.resolve(__dirname, './node_modules/libpag/lib/libpag.wasm'),
+          to: config.build.assetsPublicPath,
+        },
+    ]),
+  ]
+},
+publicPath: process.env.NODE_ENV === 'production'
+  ? config.build.assetsPublicPath
+  : config.dev.assetsPublicPath,
+};
diff --git a/web/demo/vue/vue3/README.md b/web/demo/vue/vue3/README.md
@@ -0,0 +1,16 @@
+# Vue 3 + Vite + libpag
+
+This template should help get you started developing with libpag and Vue 3 in Vite. Use rollup-plugin-copy to make the project packaged by vite can access libpag.wasm
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:3000
+npm run dev
+
+# build for production
+npm run build
+```
diff --git a/web/demo/vue/vue3/index.html b/web/demo/vue/vue3/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PAG</title>
   </head>

diff --git a/web/demo/vue/vue3/package.json b/web/demo/vue/vue3/package.json
@@ -1,17 +1,18 @@
 {
-  "name": "pag-vue",
+  "name": "libpag-vue3-vite-demo",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "libpag": "^0.0.1",
+    "@vitejs/plugin-vue": "^2.1.0",
+    "rollup-plugin-copy": "^3.4.0",
     "vue": "^3.2.25"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.0.0",
+    "libpag": "^0.0.2",
     "vite": "^2.7.2"
   }
 }
diff --git a/web/demo/vue/vue3/src/App.vue b/web/demo/vue/vue3/src/App.vue
@@ -1,9 +1,7 @@
 <script setup>
 import { PAGInit } from 'libpag';
 
-PAGInit({
-  locateFile: (file) => '../node_modules/libpag/lib/' + file,
-}).then((PAG) => {
+PAGInit().then((PAG) => {
   const url = 'https://pag.io/file/like.pag';
   fetch(url)
     .then((response) => response.blob())

diff --git a/web/demo/vue/vue3/vite.config.js b/web/demo/vue/vue3/vite.config.js
@@ -1,7 +1,16 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import copy from 'rollup-plugin-copy'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
-})
+  plugins: [
+    vue(),
+    copy({
+      targets: [
+        { src: './node_modules/libpag/lib/libpag.wasm', dest: process.env.NODE_ENV === 'production' ? 'dist/' : './' },
+      ],
+      hook: process.env.NODE_ENV === 'production' ? 'writeBundle' : "buildStart",
+    }),
+  ],
+  base: './',
+});