feat: vue3 + vite

2025-10-26 21:12:14 +08:00 · 2021-04-01 14:32:06 +08:00 · 2021-04-01 14:32:06 +08:00 · 07e396f08a
commit 07e396f08a
parent d24e95450c
28 changed files with 602 additions and 588 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,10 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }]
-  ]
-}
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
+node_modules
 .DS_Store
-node_modules/
-dist/
-npm-debug.log
+dist
+dist-ssr
+*.local
--- a/README.md
+++ b/README.md
@ -1,22 +1,12 @@
 # Vue2-SPA
-
-# 可能是全网最干净的 `vue` 脚手架
-
-> A Vue.js project with `Webpack 4.x`
-
- 所有第三方包都已更新到最新
- 没有多余代码，让你自己搭建，自己玩
-
-## Live Demo
-The live demo can be found in [https://allan2coder.github.io/VUE2-SPA-Tutorial/](https://allan2coder.github.io/VUE2-SPA-Tutorial/) (移动端，打开浏览器开发者工具并调到手机窗口浏览。注：该项目同时适合PC端)
-
+A Tutorial for Vue 3.

 ## How to use
 You should clone the repo and install the dependencies, and then npm start.That is all.

 ```bash
-$ git clone https://github.com/allan2coder/VUE2-SPA-Tutorial.git
-$ cd VUE2-SPA-Tutorial
+$ git clone https://github.com/allan2coder/VUE3-Tutorial.git
+$ cd VUE3-Tutorial
 $ npm install
 ```
 Then launch the project app.
@ -25,7 +15,7 @@ Then launch the project app.
 $ npm run dev
 ```

-You should see a new browser tap opening and a page of 'index.html' in http://localhost:8080.
+You should see a new browser tap opening and a page of 'index.html' in http://localhost:3000.

 ## How to build the static files

@ -33,31 +23,6 @@ You should see a new browser tap opening and a page of 'index.html' in http://lo
 npm run build
 ```

-## Screenshot
-![Screenshot0](http://h0.beicdn.com/open202021/f6a79f0be3b70c67_355x636.png)
-![Screenshot1](http://h0.beicdn.com/open202021/3bf11dc0efbfb4ab_355x637.png)
-
-### 有关打包优化
-第三方库单独打包
-```
-npm i autodll-webpack-plugin -D
-```
-webpack 配置：
-```
-new AutoDllPlugin({
-  inject: true, // will inject the DLL bundle to index.html
-  debug: true,
-  filename: '[name]_[hash].js',
-  path: './dll',
-  entry: {
-    vendor: ['vue', 'vue-router'] // webpack 会去 `node_modules` 去找
-  }
-})
-```
-每次打包，这个插件都会检查注册在 `entry` 中的第三方库。如果没有变化，插件就会使用缓存中的打包文件，减少了打包的时间，这时 Hash 也不会变化。
-
-
-
 ## Other SPA
 - [React.js](https://github.com/allan2coder/React-SPA) :fire: :fire: :fire:

--- a/build/build.js
+++ b/build/build.js
@ -1,15 +0,0 @@
-const webpack = require('webpack');
-const config = require('./webpack.prod.conf');
-
-webpack(config, (err, stats) => {
-  if (err || stats.hasErrors()) {
-    // 在这里处理错误
-    console.error(err);
-    return;
-  }
-  // 处理完成
-  console.log(stats.toString({
-    chunks: false,  // 使构建过程更静默无输出
-    colors: true    // 在控制台展示颜色
-  }));
-});
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -1,55 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const AutoDllPlugin = require('autodll-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-
-module.exports = {
-	entry: {
-		bundle: path.resolve(__dirname, '../src/index.js')
-	},
-	output: {
-		path: path.resolve(__dirname, '../dist'),
-		filename: '[name].[hash].js'
-	},
-	resolve: {
-		extensions: ['*', '.js', '.json', '.vue'],
-		alias: {
-			'vue$': 'vue/dist/vue.esm.js',
-			'@': path.resolve(__dirname, '../src'),
-		}
-	},
-	module: {
-		rules: [
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader'
-			},
-			{
-				test: /\.js$/,
-				use: 'babel-loader',
-				exclude: /node_modules/
-			},
-			{
-				test: /\.css$/,
-				use: ['vue-style-loader', 'css-loader']
-			}
-		]
-	},
-	plugins: [
-		new HtmlWebpackPlugin({
-			template: path.resolve(__dirname, '../index.html')
-		}),
-		// Dll 优化，需要的时候可以打开
-		// new AutoDllPlugin({
-		// 	inject: true, // will inject the DLL bundle to index.html
-		// 	debug: true,
-		// 	filename: '[name]_[hash].js',
-		// 	path: './dll',
-		// 	entry: {
-		// 	  vendor: ['vue', 'vue-router']
-		// 	}
-		// }),
-		new VueLoaderPlugin(),
-		// new webpack.optimize.SplitChunksPlugin()
-	]
-};
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@ -1,20 +0,0 @@
-const merge = require("webpack-merge");
-const path = require("path");
-const baseConfig = require("./webpack.base.conf");
-
-module.exports = merge(baseConfig, {
-	mode: "development",
-	devtool: "inline-source-map",
-	module: {
-		rules: [  // 自己拓展着玩呀
-			// {
-			// 	test: /\.css$/,
-			// 	use: ["vue-style-loader", "css-loader", "postcss-loader"],
-			// },
-		],
-	},
-	devServer: {
-		contentBase: path.resolve(__dirname, "../dist"),
-		open: true,
-	},
-});
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@ -1,27 +0,0 @@
-const merge = require("webpack-merge");
-const path = require("path");
-const baseConfig = require("./webpack.base.conf");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-
-module.exports = merge(baseConfig, {
-	mode: "production",
-	devtool: "source-map",
-	module: {
-		rules: [ // 自己拓展着玩呀
-			// {
-			// 	test: /\.css$/,
-			// 	use: [
-			// 	  'css-loader',
-			// 	  'postcss-loader',
-			// 	]
-			// },
-		],
-	},
-	plugins: [
-		new CleanWebpackPlugin({
-			root: path.resolve(__dirname, "../"),
-			verbose: true,
-			dry: false,
-		}),
-	],
-});
--- a/index.html
+++ b/index.html
@ -1,18 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-touch-fullscreen" content="yes">
-    <meta name="full-screen" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="format-detection" content="address=no">
-    <title>vue2spa</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,483 @@
+{
+  "name": "vite-project",
+  "version": "0.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/helper-validator-identifier": {
+      "version": "7.12.11",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0="
+    },
+    "@babel/parser": {
+      "version": "7.13.13",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@babel%2fparser/-/parser-7.13.13.tgz",
+      "integrity": "sha1-QvA4YvSu1QRh5UMnCRa0fdUB8N8="
+    },
+    "@babel/types": {
+      "version": "7.13.14",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+      "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "lodash": "^4.17.19",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@vitejs/plugin-vue": {
+      "version": "1.2.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vitejs%2fplugin-vue/-/plugin-vue-1.2.1.tgz",
+      "integrity": "sha1-beSUNvw0b4KaVmdgZkKOPwEVIqw=",
+      "dev": true
+    },
+    "@vue/compiler-core": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-core/-/compiler-core-3.0.10.tgz",
+      "integrity": "sha1-ztkhIMa5ure2xE3+Xj5c8upCJTE=",
+      "requires": {
+        "@babel/parser": "^7.12.0",
+        "@babel/types": "^7.12.0",
+        "@vue/shared": "3.0.10",
+        "estree-walker": "^2.0.1",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-dom/-/compiler-dom-3.0.10.tgz",
+      "integrity": "sha1-WdNZdJjn1LC5LziGqCP5nVsI8f4=",
+      "requires": {
+        "@vue/compiler-core": "3.0.10",
+        "@vue/shared": "3.0.10"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-sfc/-/compiler-sfc-3.0.10.tgz",
+      "integrity": "sha1-3mvJvn9asdlEBIqb4Exyw1cdQyE=",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.13.9",
+        "@babel/types": "^7.13.0",
+        "@vue/compiler-core": "3.0.10",
+        "@vue/compiler-dom": "3.0.10",
+        "@vue/compiler-ssr": "3.0.10",
+        "@vue/shared": "3.0.10",
+        "consolidate": "^0.16.0",
+        "estree-walker": "^2.0.1",
+        "hash-sum": "^2.0.0",
+        "lru-cache": "^5.1.1",
+        "magic-string": "^0.25.7",
+        "merge-source-map": "^1.1.0",
+        "postcss": "^8.1.10",
+        "postcss-modules": "^4.0.0",
+        "postcss-selector-parser": "^6.0.4",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fcompiler-ssr/-/compiler-ssr-3.0.10.tgz",
+      "integrity": "sha1-bMxke9pJwPwcoQAhnpxxJo4EgSA=",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-dom": "3.0.10",
+        "@vue/shared": "3.0.10"
+      }
+    },
+    "@vue/reactivity": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2freactivity/-/reactivity-3.0.10.tgz",
+      "integrity": "sha1-ASgwczKR5ggn87Io1CWtU7g0hM4=",
+      "requires": {
+        "@vue/shared": "3.0.10"
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fruntime-core/-/runtime-core-3.0.10.tgz",
+      "integrity": "sha1-y4cwwOyG6lwc+nAfrMCpe/WbFaI=",
+      "requires": {
+        "@vue/reactivity": "3.0.10",
+        "@vue/shared": "3.0.10"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fruntime-dom/-/runtime-dom-3.0.10.tgz",
+      "integrity": "sha1-gMbuKMrqv3TzE1fSxk0XeUW9il8=",
+      "requires": {
+        "@vue/runtime-core": "3.0.10",
+        "@vue/shared": "3.0.10",
+        "csstype": "^2.6.8"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/@vue%2fshared/-/shared-3.0.10.tgz",
+      "integrity": "sha1-VHbVYV0BvzOcZcLoBPWQm7wnhEo="
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "http://nodepackages.hellobike.cn:4873/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
+      "dev": true
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "http://nodepackages.hellobike.cn:4873/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
+      "dev": true
+    },
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "http://nodepackages.hellobike.cn:4873/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha1-y8x51emcrqLb8Q6zom/Ys+as+pQ=",
+      "dev": true
+    },
+    "consolidate": {
+      "version": "0.16.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/consolidate/-/consolidate-0.16.0.tgz",
+      "integrity": "sha1-oRhkdokw8vGUMWYKZZBmaPX73BY=",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.7.2"
+      }
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=",
+      "dev": true
+    },
+    "csstype": {
+      "version": "2.6.16",
+      "resolved": "http://nodepackages.hellobike.cn:4873/csstype/-/csstype-2.6.16.tgz",
+      "integrity": "sha1-VE1p9UcBO4WkDRW/912zjzT+nDk="
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
+      "dev": true
+    },
+    "esbuild": {
+      "version": "0.9.7",
+      "resolved": "http://nodepackages.hellobike.cn:4873/esbuild/-/esbuild-0.9.7.tgz",
+      "integrity": "sha1-6g1jnL5LiOwl++1Nb/AMjXiO9ws=",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "http://nodepackages.hellobike.cn:4873/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw="
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "http://nodepackages.hellobike.cn:4873/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
+      "dev": true
+    },
+    "generic-names": {
+      "version": "2.0.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/generic-names/-/generic-names-2.0.1.tgz",
+      "integrity": "sha1-+KN46tLMqno08DF7BVVIMq5BuHI=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "http://nodepackages.hellobike.cn:4873/has/-/has-1.0.3.tgz",
+      "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "hash-sum": {
+      "version": "2.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
+      "dev": true
+    },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha1-xr5oWKvQE9do6YNmrkfiXViHsa4=",
+      "dev": true
+    },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.2.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/is-core-module/-/is-core-module-2.2.0.tgz",
+      "integrity": "sha1-lwN+89UiJNhRY/VZeytj2a/tmBo=",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "json5": {
+      "version": "1.0.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
+    "loader-utils": {
+      "version": "1.4.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/loader-utils/-/loader-utils-1.4.0.tgz",
+      "integrity": "sha1-xXm140yzSxp07cbB+za/o3HVphM=",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "http://nodepackages.hellobike.cn:4873/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
+    "lru-cache": {
+      "version": "5.1.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha1-HaJ+ZxAnGUdpXa9oSOhH8B2EuSA=",
+      "dev": true,
+      "requires": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "magic-string": {
+      "version": "0.25.7",
+      "resolved": "http://nodepackages.hellobike.cn:4873/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha1-P0l9b9NMZpxnmNy4IfLvMfVEUFE=",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "merge-source-map": {
+      "version": "1.1.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/merge-source-map/-/merge-source-map-1.1.0.tgz",
+      "integrity": "sha1-L93n5gIJOfcJBqaPLXrmheTIxkY=",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "http://nodepackages.hellobike.cn:4873/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
+      "dev": true
+    },
+    "nanoid": {
+      "version": "3.1.22",
+      "resolved": "http://nodepackages.hellobike.cn:4873/nanoid/-/nanoid-3.1.22.tgz",
+      "integrity": "sha1-s1+Pt9FRmQqK69WqUBXAPPcm+EQ=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "http://nodepackages.hellobike.cn:4873/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha1-1i27VnlAXXLEc37FhgDp3c8G0kw=",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.2.9",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss/-/postcss-8.2.9.tgz",
+      "integrity": "sha1-/ZX/N7XO5VxAmz/dI3KWq0CW+6M=",
+      "dev": true,
+      "requires": {
+        "colorette": "^1.2.2",
+        "nanoid": "^3.1.22",
+        "source-map": "^0.6.1"
+      }
+    },
+    "postcss-modules": {
+      "version": "4.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss-modules/-/postcss-modules-4.0.0.tgz",
+      "integrity": "sha1-K8fydquI8/Gw+t9svXdy1DtfO5s=",
+      "dev": true,
+      "requires": {
+        "generic-names": "^2.0.1",
+        "icss-replace-symbols": "^1.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "string-hash": "^1.1.1"
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha1-zaHwR8CugMl9vijD52pDuIAldB0=",
+      "dev": true
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha1-67tU+uFZjuz99pGgKz/zs5ClpRw=",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha1-nvMVFFbTu/oSDKRImN/Kby+gHwY=",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha1-18Xn5ow7s8myfL9Iyguz/7RgLJw=",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.4",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+      "integrity": "sha1-VgdaE4CgRgTDiwY+p3Z6Epr1wrM=",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.20.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha1-YpoBP7P3B1XW8LeTXMHCxTeLGXU=",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      }
+    },
+    "rollup": {
+      "version": "2.44.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/rollup/-/rollup-2.44.0.tgz",
+      "integrity": "sha1-jaMk0cT9Er7vmubhL0BoJlttles=",
+      "dev": true,
+      "requires": {
+        "fsevents": "~2.3.1"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "http://nodepackages.hellobike.cn:4873/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha1-6oBL2UhXQC5pktBaOO8a41qatMQ=",
+      "dev": true
+    },
+    "string-hash": {
+      "version": "1.1.3",
+      "resolved": "http://nodepackages.hellobike.cn:4873/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
+      "dev": true
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "http://nodepackages.hellobike.cn:4873/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+    },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "http://nodepackages.hellobike.cn:4873/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "vite": {
+      "version": "2.1.5",
+      "resolved": "http://nodepackages.hellobike.cn:4873/vite/-/vite-2.1.5.tgz",
+      "integrity": "sha1-SFfaRBxi95gsg8vV9CoAMw8gycE=",
+      "dev": true,
+      "requires": {
+        "esbuild": "^0.9.3",
+        "fsevents": "~2.3.1",
+        "postcss": "^8.2.1",
+        "resolve": "^1.19.0",
+        "rollup": "^2.38.5"
+      }
+    },
+    "vue": {
+      "version": "3.0.10",
+      "resolved": "http://nodepackages.hellobike.cn:4873/vue/-/vue-3.0.10.tgz",
+      "integrity": "sha1-tdKAHGrA51bIUK16j5p4y8y60Co=",
+      "requires": {
+        "@vue/compiler-dom": "3.0.10",
+        "@vue/runtime-dom": "3.0.10",
+        "@vue/shared": "3.0.10"
+      }
+    },
+    "vue-router": {
+      "version": "4.0.5",
+      "resolved": "http://nodepackages.hellobike.cn:4873/vue-router/-/vue-router-4.0.5.tgz",
+      "integrity": "sha1-3QpBNLyVDDeu9kuXPp7hAIQo2Po="
+    },
+    "yallist": {
+      "version": "3.1.1",
+      "resolved": "http://nodepackages.hellobike.cn:4873/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha1-27fa+b/YusmrRev2ArjLrQ1dCP0=",
+      "dev": true
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -1,44 +1,18 @@
 {
-  "name": "vue2-spa-tutorial",
-  "version": "1.0.0",
-  "author": "Allan",
-  "description": "最干净的脚手架",
-  "main": "index.js",
+  "name": "vue3-vite",
+  "version": "0.0.0",
  "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "build": "node build/build.js"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
  },
  "dependencies": {
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue": "^3.0.5",
+    "vue-router": "^4.0.5"
  },
  "devDependencies": {
-    "autodll-webpack-plugin": "^0.4.2",
-    "autoprefixer": "^6.7.7",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-preset-env": "^1.7.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.5.3",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.0.0-beta.14",
-    "mini-css-extract-plugin": "^0.9.0",
-    "postcss-loader": "^3.0.0",
-    "vue-loader": "^15.9.2",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/allan2coder/VUE2-SPA-Tutorial.git"
-  },
-  "keywords": [
-    "webpack4",
-    "vue2",
-    "vue3"
-  ],
-  "license": "ISC"
+    "@vitejs/plugin-vue": "^1.2.1",
+    "@vue/compiler-sfc": "^3.0.5",
+    "vite": "^2.1.5"
+  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +0,0 @@
-module.exports = {
-    plugins: [
-      require('autoprefixer')
-    ]
-}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -1,26 +1,10 @@
 <template>
-    <div>
-        <!-- 删除试试 顶部 -->
-        <HeaderCompontent></HeaderCompontent>
-        <!-- 渲染出口 -->
-        <router-view></router-view>
-        <!-- 删除试试 底部菜单 -->
-        <FootComponent></FootComponent>
-    </div>
-</template>
-<script>
-    import HeaderCompontent from './components/header.vue'
-    import FootComponent from './components/footer.vue'
-    export default{
-        components:{
-            HeaderCompontent,
-            FootComponent
-        }
-    }
-</script>
-<style>
-    body, ul, h4{
-        margin: 0;
-		text-align: center;
-    }
-</style>
+
+  <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+  </div>
+  
+  <router-view />
+
+</template>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,30 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button @click="state.count++">count is: {{ state.count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { defineProps, reactive } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const state = reactive({ count: 0 })
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@ -1,42 +0,0 @@
-<template>
-    <footer class="fixed-bottom clearfix">
-        <div class="col4">
-          <router-link to="/index">index</router-link>
-        </div>
-        <div class="col4">
-          <router-link to="/second">menu3</router-link>
-        </div>
-        <div class="col4">
-          <router-link to="/third">menu4</router-link>
-        </div>
-    </footer>
-</template>
-<script>
-    export default{
-        data(){
-            return{
-                msg: 'Hello vue'
-            }
-        }
-    }
-</script>
-<style>
-    .fixed-bottom {
-        position: fixed;
-        background: #fff;
-        width: 100%;
-        bottom: 0;
-        z-index: 99;
-        border-top: 1px solid #ccc;
-        display: grid;
-        text-align: center;
-        grid-template-columns: 33% 33% 33%;
-    }
-    .fixed-bottom a {
-        width: 100%;
-        display: inline-block;
-        font-size: 12px;
-        color: #7a7a7a;
-        line-height: 50px;
-    }
-</style>
--- a/src/components/header.vue
+++ b/src/components/header.vue
@ -1,16 +0,0 @@
-<template>
-  <div class="header">
-    <img src="https://png2.cleanpng.com/sh/9f5efd7936dbbc0513a929a7809ebd10/L0KzQYm3V8E5N5pnR91yc4Pzfri0lwVmNZt4RdxqdnH2c8PwkQQudJpnitN7eT3kfrj8jPFzcqQyitdqY4SwhsbsTfp0NWZnTNdrZUHmQIq4Wck0NmkATaI7OEK8QYa6Ucg5P2I4SqI8N0OxgLBu/kisspng-vue-js-javascript-library-angularjs-react-vue-js-5b4ebe1c091993.8950282915318871320373.png" />
-  </div>
-</template>
-<style>
-    .header{
-        width: 100%;
-        margin: 0 auto;
-    }
-    .header img{
-        width: 50%;
-		margin: 30px auto 30px;
-        display: block;
-    }
-</style>
--- a/src/components/secondcomponent.vue
+++ b/src/components/secondcomponent.vue
@ -1,33 +0,0 @@
-<template>
-	<div class="second-wrap">
-		<h4>这是子组件</h4>
-		<p>这是<span>来自父组件</span>的数据：{{myMessage}}</p>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'child',
-	props: [
-		'myMessage',
-	]
-}
-</script>
-
-<style scoped>
-	.second-wrap{
-		margin-top: 30px;
-		text-align: center;
-	}
-	h4,p{
-		color: #41b883;;
-		font-size: 20px;
-	}
-	p{
-		font-size: 12px;
-	}
-	span{
-		color: #35495e;
-	}
-</style>
-
--- a/src/components/thirdcomponent.vue
+++ b/src/components/thirdcomponent.vue
@ -1,30 +0,0 @@
-<template>
-    <div class="thirdComponent">
-		<button v-on:click="increment">{{ counter }}</button>
-    </div>
-</template>
-
-<script>
-  export default {
-    name: 'button-counter',
-    data: () => ({
-		counter: 0,
-	}),
-    methods: {
-		increment: function () {
-			this.counter += 1
-			this.$emit('increment')
-		}
-    }
-  }
-</script>
-
-<style scoped>
-	.thirdComponent{
-		display: inline-block;
-	}
-	button{
-		color: #41b883;
-		border-color: #41b883;
-	}
-</style>
--- a/src/index.js
+++ b/src/index.js
@ -1,9 +0,0 @@
-// 项目启动
-import Vue from "vue";
-import App from "./App";
-import router from "./router";
-
-new Vue({
-    router: router, // 注册路由
-    render: (h) => h(App),
-}).$mount("#app"); // 渲染挂载
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+createApp(App).use(router).mount('#app')
--- a/src/mock/index.js
+++ b/src/mock/index.js
@ -1,17 +0,0 @@
-// mock data
-export const data =  {
-    success: true,
-    data: [{
-        name: "React",
-        id: 1,
-    },{
-        name: "Vue",
-        id: 2,
-    },{
-        name: "Angular",
-        id: 3,
-    },{
-        name: "Flutter",
-        id: 4,
-    }]
-};
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -1,69 +0,0 @@
-<template>
-  <div>
-    <button v-on:click="loadMore">click me</button>
-	<ul>
-		<li v-for="(item, index) in listArr" :key="index">
-			<a href="">{{ index }} 《{{ item.name }}》</a>
-		</li>
-	</ul>
-  </div>
-</template>
-<script>
-let mock = require('../mock'); // 模拟请求
-
-export default {
-	data: () => ({
-		listArr: [],
-		page: 1,
-	}),
-	created() {
-		this.loadList();
-	},
-	methods: {
-		loadList(page) {
-			const {data, success} = mock.data;
-			if (this.page > 1) {
-				console.log("page is:", this.page);
-				return this.listArr = this.listArr.concat(data);
-			}
-			this.listArr = data;
-		},
-		loadMore() {
-			this.loadList(this.page++);
-		},
-	},
-};
-</script>
-
-<style>
-button {
-	display: block;
-	margin: 0 auto;
-	line-height: 30px;
-	border: 1px solid #ddd;
-	color: #41b883;
-}
-a {
-	color: #35495e;
-	font-size: 16px;
-	text-decoration: none;
-}
-ul {
-	margin-bottom: 60px;
-	padding: 20px;
-}
-li {
-	line-height: 32px;
-	border-bottom: 1px solid #ddd;
-	padding: 0 10px;
-	text-align: left;
-	list-style: none;
-}
-b {
-	font-size: 12px;
-	color: #35495e;
-}
-.loading {
-  	text-align: center;
-}
-</style>
--- a/src/pages/otherPages.vue
+++ b/src/pages/otherPages.vue
@ -1,44 +0,0 @@
-<template>
-  <div class="container">
-
-  	<!-- 父组件内容 -->
-    <h4>这是父组件</h4>
-	<p>这是父组件正在渲染的数据：{{parentMsg}}</p>
-	<input type="" v-model="parentMsg" autofocus="autofocus" placeholder="type something" />
-
-	<!-- 子组件内容 -->
-	<child :my-message="parentMsg"></child>
-
-  </div>
-</template>
-
-<script>
-	import Child from '../components/secondcomponent.vue'
-
-	export default {
-		data: () => ({
-			parentMsg: '',
-		}),
-		components: {	// 挂载组件
-			Child
-		}
-	}
-</script>
-
-<style scoped>
-	h4,p{
-		color: #35495e;
-		font-size: 20px;
-	}
-	p{
-		font-size: 14px;
-	}
-	input{
-		margin: 4px;
-		outline: none;
-		border: 1px solid #ddd;
-		line-height: 24px;
-		min-width: 300px;
-		padding-left: 10px;
-	}
-</style>
--- a/src/pages/otherPages2.vue
+++ b/src/pages/otherPages2.vue
@ -1,55 +0,0 @@
-<template>
-  <div class="container">
-
-	<!-- 这是父组件内容 -->
-    <h4>子组件数据传递给父组件</h4>
-	  <p>方式：用自定义事件</p>
-	  <p class="parent-title">这是父组件</p>
-
-		<!-- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 -->
-		<h2 class="text-center">{{ total }}</h2>
-
-
-		<!-- 这是子组件内容 -->
-		<div class="text-center">
-			<p>这是子组件</p>
-			<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
-		  	<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
-		</div>
-
-  </div>
-</template>
-
-<script>
-	 import buttonCounter from '../components/thirdcomponent.vue'
-
-	 export default {
-		data: () => ({
-			parentMsg: '子组件传递信息给父元素',
-			total: 0,
-		}),
-		methods: {
-			incrementTotal: function () {
-			this.total += 1
-			}
-		},
-	    components: {
-	   	  	buttonCounter
-	    }
-	 }
-</script>
-
-<style scoped>
-	.parent-title{
-		margin-top: 30px;
-	}
-	h4{
-		font-size: 20px;
-	}
-	h2{
-		margin: 0 0 40px;
-	}
-	.text-center p {
-		color: #41b883;
-	}
-</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,29 +1,23 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "../views/Home.vue";
+import About from "../views/About.vue";

-/* 开启debug模式 */
-Vue.config.debug = true
-Vue.use(VueRouter);
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "About",
+    component: About,
+  },
+];

-import Index from '../pages/index'
-import SecondComponent from '../pages/otherPages'
-import ThirdComponent from '../pages/otherPages2'
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});

-export default new VueRouter({
-	mode: 'hash', // 还有 history 等
-	base: __dirname,
-	routes: [
-		{
-			path: '/index',
-			component: Index,
-		},
-		{
-			path: '/second',
-			component: SecondComponent,
-		},
-		{
-			path: '/third',
-			component: ThirdComponent,
-		}
-	]
-})
+export default router;
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,3 @@
+<template>
+  <h1>About Page</h1>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,20 @@
+<template>
+  <h1>{{ msg }}</h1>
+  <button @click="state.count++">count is: {{ state.count }}</button>
+</template>
+
+<script setup>
+  import { defineProps, reactive } from 'vue';
+
+  defineProps({
+    msg: String
+  })
+
+  const state = reactive({ count: 0 })
+</script>
+
+<style scoped>
+  a {
+    color: #42b983;
+  }
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})