mirror of
https://github.com/xxxsf/vue3-h5-template.git
synced 2025-10-26 21:12:14 +08:00
feat: vue3 + vite
This commit is contained in:
xushunfa459
parent
d24e95450c
commit
07e396f08a
10
.babelrc
10
.babelrc
@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": [
|
|
||||||
["env", {
|
|
||||||
"modules": false,
|
|
||||||
"targets": {
|
|
||||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
7
.gitignore
vendored
7
.gitignore
vendored
@ -1,4 +1,5 @@
|
|||||||
|
node_modules
|
||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules/
|
dist
|
||||||
dist/
|
dist-ssr
|
||||||
npm-debug.log
|
*.local
|
||||||
43
README.md
43
README.md
@ -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
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 有关打包优化
|
|
||||||
第三方库单独打包
|
|
||||||
```
|
|
||||||
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:
|
||||||
|
|
||||||
|
|||||||
@ -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 // 在控制台展示颜色
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
@ -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()
|
|
||||||
]
|
|
||||||
};
|
|
||||||
@ -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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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
17
index.html
@ -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
483
package-lock.json
generated
Normal 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
48
package.json
@ -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"
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
plugins: [
|
|
||||||
require('autoprefixer')
|
|
||||||
]
|
|
||||||
}
|
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
34
src/App.vue
34
src/App.vue
@ -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
30
src/components/HelloWorld.vue
Normal 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>
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
|
|
||||||
@ -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>
|
|
||||||
@ -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
5
src/main.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import router from './router';
|
||||||
|
|
||||||
|
createApp(App).use(router).mount('#app')
|
||||||
@ -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,
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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
3
src/views/About.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<h1>About Page</h1>
|
||||||
|
</template>
|
||||||
20
src/views/Home.vue
Normal file
20
src/views/Home.vue
Normal 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
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()]
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user