From 07e396f08a2db7eca1e68b576cf5d245ffb7245d Mon Sep 17 00:00:00 2001 From: xushunfa459 Date: Thu, 1 Apr 2021 14:32:06 +0800 Subject: [PATCH] feat: vue3 + vite --- .babelrc | 10 - .gitignore | 7 +- README.md | 43 +-- build/build.js | 15 - build/webpack.base.conf.js | 55 ---- build/webpack.dev.conf.js | 20 -- build/webpack.prod.conf.js | 27 -- index.html | 17 +- package-lock.json | 483 +++++++++++++++++++++++++++++ package.json | 48 +-- postcss.config.js | 5 - public/favicon.ico | Bin 0 -> 4286 bytes src/App.vue | 34 +- src/components/HelloWorld.vue | 30 ++ src/components/footer.vue | 42 --- src/components/header.vue | 16 - src/components/secondcomponent.vue | 33 -- src/components/thirdcomponent.vue | 30 -- src/index.js | 9 - src/main.js | 5 + src/mock/index.js | 17 - src/pages/index.vue | 69 ----- src/pages/otherPages.vue | 44 --- src/pages/otherPages2.vue | 55 ---- src/router/index.js | 46 ++- src/views/About.vue | 3 + src/views/Home.vue | 20 ++ vite.config.js | 7 + 28 files changed, 602 insertions(+), 588 deletions(-) delete mode 100644 .babelrc delete mode 100644 build/build.js delete mode 100644 build/webpack.base.conf.js delete mode 100644 build/webpack.dev.conf.js delete mode 100644 build/webpack.prod.conf.js create mode 100644 package-lock.json delete mode 100644 postcss.config.js create mode 100644 public/favicon.ico create mode 100644 src/components/HelloWorld.vue delete mode 100644 src/components/footer.vue delete mode 100644 src/components/header.vue delete mode 100644 src/components/secondcomponent.vue delete mode 100644 src/components/thirdcomponent.vue delete mode 100644 src/index.js create mode 100644 src/main.js delete mode 100644 src/mock/index.js delete mode 100644 src/pages/index.vue delete mode 100644 src/pages/otherPages.vue delete mode 100644 src/pages/otherPages2.vue create mode 100644 src/views/About.vue create mode 100644 src/views/Home.vue create mode 100644 vite.config.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 3dc9b59..0000000 --- a/.babelrc +++ /dev/null @@ -1,10 +0,0 @@ -{ - "presets": [ - ["env", { - "modules": false, - "targets": { - "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] - } - }] - ] -} diff --git a/.gitignore b/.gitignore index 1a46a91..53f7466 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ +node_modules .DS_Store -node_modules/ -dist/ -npm-debug.log \ No newline at end of file +dist +dist-ssr +*.local \ No newline at end of file diff --git a/README.md b/README.md index 403e594..5822fe9 100644 --- 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: diff --git a/build/build.js b/build/build.js deleted file mode 100644 index ae6605b..0000000 --- a/build/build.js +++ /dev/null @@ -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 // 在控制台展示颜色 - })); -}); diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js deleted file mode 100644 index d869e94..0000000 --- a/build/webpack.base.conf.js +++ /dev/null @@ -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() - ] -}; diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js deleted file mode 100644 index c6e7b71..0000000 --- a/build/webpack.dev.conf.js +++ /dev/null @@ -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, - }, -}); diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js deleted file mode 100644 index 5045ba3..0000000 --- a/build/webpack.prod.conf.js +++ /dev/null @@ -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, - }), - ], -}); diff --git a/index.html b/index.html index ead0d5e..030a6ff 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,13 @@ - + - - - - - - - - - vue2spa + + + + Vite App
- + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9280cba --- /dev/null +++ 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 + } + } +} diff --git a/package.json b/package.json index 3a22108..9b4f3d5 100644 --- 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" + } } diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index b90a2cf..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: [ - require('autoprefixer') - ] -} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/src/App.vue b/src/App.vue index b0a7500..d6bbcaf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,26 +1,10 @@ - - \ No newline at end of file + + + + + + \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..e4f6590 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,30 @@ + + + + + \ No newline at end of file diff --git a/src/components/footer.vue b/src/components/footer.vue deleted file mode 100644 index c417f35..0000000 --- a/src/components/footer.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - diff --git a/src/components/header.vue b/src/components/header.vue deleted file mode 100644 index 1cd9288..0000000 --- a/src/components/header.vue +++ /dev/null @@ -1,16 +0,0 @@ - - diff --git a/src/components/secondcomponent.vue b/src/components/secondcomponent.vue deleted file mode 100644 index 132d3c2..0000000 --- a/src/components/secondcomponent.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - diff --git a/src/components/thirdcomponent.vue b/src/components/thirdcomponent.vue deleted file mode 100644 index 99d7d1f..0000000 --- a/src/components/thirdcomponent.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index bde333b..0000000 --- a/src/index.js +++ /dev/null @@ -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"); // 渲染挂载 diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..10fd264 --- /dev/null +++ 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') diff --git a/src/mock/index.js b/src/mock/index.js deleted file mode 100644 index cfc5ecf..0000000 --- a/src/mock/index.js +++ /dev/null @@ -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, - }] -}; \ No newline at end of file diff --git a/src/pages/index.vue b/src/pages/index.vue deleted file mode 100644 index eabf727..0000000 --- a/src/pages/index.vue +++ /dev/null @@ -1,69 +0,0 @@ - - - - diff --git a/src/pages/otherPages.vue b/src/pages/otherPages.vue deleted file mode 100644 index c05dfd7..0000000 --- a/src/pages/otherPages.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/pages/otherPages2.vue b/src/pages/otherPages2.vue deleted file mode 100644 index 3434c1c..0000000 --- a/src/pages/otherPages2.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - diff --git a/src/router/index.js b/src/router/index.js index afdee8f..4849232 100644 --- 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; \ No newline at end of file diff --git a/src/views/About.vue b/src/views/About.vue new file mode 100644 index 0000000..9cca251 --- /dev/null +++ b/src/views/About.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..8fd4aaf --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..315212d --- /dev/null +++ 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()] +})