JLNTV_IPD/vue3-h5-quark-template
4
0
Fork 0
mirror of https://github.com/xsf0105/vue3-h5-template.git synced 2025-04-06 04:00:04 +08:00
Code Issues Projects Releases Wiki Activity

feat: vue3 + vite

Browse Source
This commit is contained in:
xushunfa459 2021-04-01 14:32:06 +08:00
parent d24e95450c
commit 07e396f08a
28 changed files with 602 additions and 588 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.babelrc
View File

@ -1,10 +0,0 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
]
}

7
.gitignore vendored
View File

@ -1,4 +1,5 @@
node_modules
.DS_Store .DS_Store
node_modules/ dist
dist/ dist-ssr
npm-debug.log *.local

43
README.md
View File

@ -1,22 +1,12 @@
# Vue2-SPA # Vue2-SPA
A Tutorial for Vue 3.
# 可能是全网最干净的 `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端)
## How to use ## How to use
You should clone the repo and install the dependencies, and then npm start.That is all. You should clone the repo and install the dependencies, and then npm start.That is all.
```bash ```bash
$ git clone https://github.com/allan2coder/VUE2-SPA-Tutorial.git $ git clone https://github.com/allan2coder/VUE3-Tutorial.git
$ cd VUE2-SPA-Tutorial $ cd VUE3-Tutorial
$ npm install $ npm install
``` ```
Then launch the project app. Then launch the project app.
@ -25,7 +15,7 @@ Then launch the project app.
$ npm run dev $ 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 ## 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 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 ## Other SPA
- [React.js](https://github.com/allan2coder/React-SPA) :fire: :fire: :fire: - [React.js](https://github.com/allan2coder/React-SPA) :fire: :fire: :fire:

15
build/build.js
View File

@ -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 // 在控制台展示颜色
}));
});

55
build/webpack.base.conf.js
View File

@ -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()
]
};

20
build/webpack.dev.conf.js
View File

@ -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,
},
});

27
build/webpack.prod.conf.js
View File

@ -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,
}),
],
});

17
index.html
View File

@ -1,18 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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"> <link rel="icon" href="/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-touch-fullscreen" content="yes"> <title>Vite App</title>
<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>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

483
package-lock.json generated Normal file
View File

@ -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
}
}
}

48
package.json
View File

@ -1,44 +1,18 @@
{ {
"name": "vue2-spa-tutorial", "name": "vue3-vite",
"version": "1.0.0", "version": "0.0.0",
"author": "Allan",
"description": "最干净的脚手架",
"main": "index.js",
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev": "vite",
"build": "node build/build.js" "build": "vite build",
"serve": "vite preview"
}, },
"dependencies": { "dependencies": {
"vue": "^2.6.11", "vue": "^3.0.5",
"vue-router": "^3.2.0" "vue-router": "^4.0.5"
}, },
"devDependencies": { "devDependencies": {
"autodll-webpack-plugin": "^0.4.2", "@vitejs/plugin-vue": "^1.2.1",
"autoprefixer": "^6.7.7", "@vue/compiler-sfc": "^3.0.5",
"babel-core": "^6.26.3", "vite": "^2.1.5"
"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"
} }

5
postcss.config.js
View File

@ -1,5 +0,0 @@
module.exports = {
plugins: [
require('autoprefixer')
]
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

32
src/App.vue
View File

@ -1,26 +1,10 @@
<template> <template>
<div>
<!-- 删除试试 顶部 --> <div id="nav">
<HeaderCompontent></HeaderCompontent> <router-link to="/">Home</router-link> |
<!-- 渲染出口 --> <router-link to="/about">About</router-link>
<router-view></router-view> </div>
<!-- 删除试试 底部菜单 -->
<FootComponent></FootComponent> <router-view />
</div>
</template> </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>

30
src/components/HelloWorld.vue Normal file
View File

@ -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>

42
src/components/footer.vue
View File

@ -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>

16
src/components/header.vue
View File

@ -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>

33
src/components/secondcomponent.vue
View File

@ -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>

30
src/components/thirdcomponent.vue
View File

@ -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>

9
src/index.js
View File

@ -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"); // 渲染挂载

5
src/main.js Normal file
View File

@ -0,0 +1,5 @@
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app')

17
src/mock/index.js
View File

@ -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,
}]
};

69
src/pages/index.vue
View File

@ -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>

44
src/pages/otherPages.vue
View File

@ -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>

55
src/pages/otherPages2.vue
View File

@ -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>

46
src/router/index.js
View File

@ -1,29 +1,23 @@
import Vue from 'vue' import { createWebHistory, createRouter } from "vue-router";
import VueRouter from 'vue-router' import Home from "../views/Home.vue";
import About from "../views/About.vue";
/* 开启debug模式 */ const routes = [
Vue.config.debug = true {
Vue.use(VueRouter); path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
import Index from '../pages/index' const router = createRouter({
import SecondComponent from '../pages/otherPages' history: createWebHistory(),
import ThirdComponent from '../pages/otherPages2' routes,
});
export default new VueRouter({ export default router;
mode: 'hash', // 还有 history 等
base: __dirname,
routes: [
{
path: '/index',
component: Index,
},
{
path: '/second',
component: SecondComponent,
},
{
path: '/third',
component: ThirdComponent,
}
]
})

3
src/views/About.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h1>About Page</h1>
</template>

20
src/views/Home.vue Normal file
View File

@ -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>

7
vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})