chore(examples): add example for vue

Calvin-LL · Calvin-LL · commit ac472ce7f155 · 2020-11-29T13:11:02.000-08:00
diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/README.md b/examples/vue/README.md
@@ -0,0 +1,13 @@
+# Vue Example
+
+## Project setup
+
+```
+npm install
+```
+
+### Compile
+
+```
+npm run build
+```
diff --git a/examples/vue/babel.config.js b/examples/vue/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/examples/vue/package-lock.json b/examples/vue/package-lock.json
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vue-example",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "webpack-image-resize-loader": "^3.0.5",
+    "webpack-image-srcset-loader": "^3.0.1"
+  }
+}
diff --git a/examples/vue/public/index.html b/examples/vue/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <title>Vue App</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>
+</body>
+
+</html>
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <img
+      style="width: 50vw"
+      src="@/assets/Macaca_nigra_self-portrait_large.jpg"
+      :srcset="
+        require('@/assets/Macaca_nigra_self-portrait_large.jpg?srcset&quality=100')
+      "
+    />
+    <!-- for modern browsers: -->
+    <picture>
+      <source
+        type="image/webp"
+        :srcset="
+          require('@/assets/Macaca_nigra_self-portrait_large.jpg?srcset&format=webp&quality=100')
+        "
+      />
+      <source
+        type="image/jpeg"
+        :srcset="
+          require('@/assets/Macaca_nigra_self-portrait_large.jpg?srcset&quality=100')
+        "
+      />
+      <img
+        style="width: 50vw"
+        src="@/assets/Macaca_nigra_self-portrait_large.jpg"
+      />
+    </picture>
+  </div>
+</template>
diff --git a/examples/vue/src/assets/Macaca_nigra_self-portrait_large.jpg b/examples/vue/src/assets/Macaca_nigra_self-portrait_large.jpg
diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/examples/vue/vue.config.js b/examples/vue/vue.config.js
@@ -0,0 +1,27 @@
+module.exports = {
+  publicPath: ".",
+  chainWebpack: (config) => {
+    config.module
+      .rule("images")
+      .test(/\.(png|jpe?g|gif|webp|tiff?)$/i)
+      .oneOf("srcset")
+      .resourceQuery(/srcset/)
+      .use("srcset")
+      .loader("webpack-image-srcset-loader")
+      .options({
+        sizes: ["500w", "1000w", "1500w", null],
+        esModule: false,
+      })
+      .end()
+      .use("resize")
+      .loader("webpack-image-resize-loader")
+      .end()
+      .end()
+      .oneOf("normal")
+      .use("normal")
+      .loader(config.module.rule("images").use("url-loader").get("loader"))
+      .options(config.module.rule("images").use("url-loader").get("options"));
+
+    config.module.rule("images").uses.delete("url-loader");
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ presets: ["@vue/cli-plugin-babel/preset"],`
	`3`	`+};`