chore: update vue2 example using experiments.css

Author: hardfist

examples/vue2/package.json

@@ -14,7 +14,7 @@
     "less": "4.1.3",
     "less-loader": "^11.1.0",
     "vue": "2.7.14",
-    "vue-loader": "^15.10.1",
+    "vue-loader": "npm:@rspack/loader-vue2@15.10.1-alpha.0",
     "vue-style-loader": "^4.1.3"
   },
   "keywords": [],

examples/vue2/rspack.config.js

@@ -22,17 +22,19 @@ const config = {
 		rules: [
 			{
 				test: /\.vue$/,
-				use: "vue-loader"
+				use: [
+					{
+						loader: "vue-loader",
+						options: {
+							experimentalInlineMatchResource: true
+						}
+					}
+				]
 			},
 			{
 				test: /\.less$/,
-				use: ["vue-style-loader", "css-loader", "less-loader"],
-				type: "javascript/auto"
-			},
-			{
-				test: /\.css$/,
-				use: ["vue-style-loader", "css-loader"],
-				type: "javascript/auto"
+				loader: "less-loader",
+				type: "css"
 			},
 			{
 				test: /\.svg$/,

examples/vue2/src/App.vue

@@ -1,40 +1,40 @@
 <script>
-import HelloWorld from './components/HelloWorld.vue';
+import HelloWorld from "./components/HelloWorld.vue";
 export default {
-  components: { HelloWorld }
-}
+	components: { HelloWorld }
+};
 </script>
 
 <template>
-  <div class="container">
-    <div>
-    <a href="https://www.rspack.dev/" target="_blank">
-      <img src="./assets/rspack.svg" class="logo" alt="Rspack logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-    </div>
-    <HelloWorld msg="Rspack + Vue" />
-  </div> 
+	<div class="container">
+		<div>
+			<a href="https://www.rspack.dev/" target="_blank">
+				<img src="./assets/rspack.svg" class="logo" alt="Rspack logo" />
+			</a>
+			<a href="https://vuejs.org/" target="_blank">
+				<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+			</a>
+		</div>
+		<HelloWorld msg="Rspack + Vue" />
+	</div>
 </template>
 
 <style scoped lang="less">
 .container {
-  text-align: center;
+	text-align: center;
 }
 
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
 }
 
 .logo:hover {
-  filter: drop-shadow(0 0 2em #eeea8caa);
+	filter: drop-shadow(0 0 2em #eeea8caa);
 }
 
 .logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+	filter: drop-shadow(0 0 2em #42b883aa);
 }
 </style>