chore: add example support for .vue file extension [skip ci]

Author: John60676

build/tsconfig.webpack.json

@@ -1,4 +1,4 @@
 {
   "extends": "../tsconfig.json",
   "include": ["../example"]
-}
+}

build/webpack.config.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-
+const { VueLoaderPlugin } = require('vue-loader');
 /**
  * @type { import('webpack').Configuration }
  */
@@ -22,6 +22,7 @@ const WebpackConfig = {
           {
             loader: 'ts-loader',
             options: {
+              appendTsSuffixTo: [/\.vue$/],
               configFile: path.resolve(__dirname, './tsconfig.webpack.json'),
             },
           },
@@ -32,10 +33,15 @@ const WebpackConfig = {
         exclude: /node_modules/,
         use: ['babel-loader'],
       },
+      {
+        test: /\.(vue)/,
+        exclude: /node_modules/,
+        use: ['vue-loader'],
+      },
     ],
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+    extensions: ['.tsx', '.ts', '.js', '.jsx', '.vue'],
     alias: {
       'vue-request': path.join(__dirname, '../src/index.ts'),
     },
@@ -44,6 +50,7 @@ const WebpackConfig = {
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '../example/index.html'),
     }),
+    new VueLoaderPlugin(),
   ],
   devServer: {
     open: true,

package.json

@@ -67,6 +67,7 @@
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
     "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
+    "@vue/compiler-sfc": "^3.0.6",
     "@vue/test-utils": "^2.0.0-beta.8",
     "axios": "^0.21.1",
     "babel-jest": "^26.6.0",
@@ -96,6 +97,7 @@
     "ts-loader": "^8.0.11",
     "typescript": "^4.0.5",
     "vue": "^3.0.2",
+    "vue-loader": "^16.1.2",
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.11.0"