chore: add vue-cli example

KeJunMao · KeJunMao · commit c799fb29f3c9 · 2023-10-19T21:37:41.000+08:00
linked #2
diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "vue-cli",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vue/cli-service": "~5.0.8",
+    "unplugin-preprocessor-directives": "workspace:*"
+  }
+}
diff --git a/examples/vue-cli/public/index.html b/examples/vue-cli/public/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+  <!-- #if (NODE_ENV !== 'production') -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!-- #endif -->
+</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>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/examples/vue-cli/src/App.vue b/examples/vue-cli/src/App.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  name: 'App',
+}
+</script>
+
+<template>
+  <!-- #if NODE_ENV !== 'development' -->
+  <div>if</div>
+  <!-- #else -->
+  <div>else</div>
+  <!-- #endif -->
+</template>
diff --git a/examples/vue-cli/src/main.js b/examples/vue-cli/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue-cli/vue.config.js b/examples/vue-cli/vue.config.js
@@ -0,0 +1,22 @@
+/**
+ * @type {import('@vue/cli-service').ProjectOptions}
+ */
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('unplugin-preprocessor-directives/webpack')(),
+    ],
+  },
+  chainWebpack: (config) => {
+    config.module
+      .rule('html')
+      .test(/\.html$/)
+      .use('html-webpack-plugin/loader')
+      .loader(require.resolve('html-webpack-plugin/lib/loader.js'))
+      .options({
+        force: true,
+      })
+      .end()
+  },
+}
