mirror of
https://github.com/xxxsf/vue3-h5-template.git
synced 2025-04-05 20:35:49 +08:00
Feat 更新完成
This commit is contained in:
shunfa.xu
parent
a7de81908c
commit
32c6f6f4b2
@ -1,19 +1,20 @@
|
||||
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,
|
||||
},
|
||||
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,30 +1,27 @@
|
||||
const merge = require("webpack-merge");
|
||||
const path = require("path");
|
||||
const baseConfig = require("./webpack.base.conf");
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||
|
||||
module.exports = merge(baseConfig, {
|
||||
mode: "production",
|
||||
devtool: "source-map",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin({
|
||||
root: path.resolve(__dirname, "../"),
|
||||
verbose: true,
|
||||
dry: false,
|
||||
}),
|
||||
// 抽取 CSS 到单文件
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "[name].css",
|
||||
chunkFilename: "[id].css"
|
||||
})
|
||||
],
|
||||
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,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@ -18,3 +18,9 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body, ul, h4{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -3,9 +3,6 @@
|
||||
<div class="col4">
|
||||
<router-link to="/index">index</router-link>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<router-link to="/news">news</router-link>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<router-link to="/second">menu3</router-link>
|
||||
</div>
|
||||
@ -33,7 +30,7 @@
|
||||
border-top: 1px solid #ccc;
|
||||
display: grid;
|
||||
text-align: center;
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
}
|
||||
.fixed-bottom a {
|
||||
width: 100%;
|
||||
|
||||
@ -4,16 +4,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
.header{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header img{
|
||||
width: 50%;
|
||||
margin: 30px auto 0;
|
||||
margin: 30px auto 30px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,36 +1,33 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h4>这是子组件</h4>
|
||||
<p>这是<span>来自父组件</span>的数据：{{myMessage}}</p>
|
||||
</div>
|
||||
<div class="second-wrap">
|
||||
<h4>这是子组件</h4>
|
||||
<p>这是<span>来自父组件</span>的数据：{{myMessage}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'child',
|
||||
props: [
|
||||
'myMessage',
|
||||
],
|
||||
// mounted(){
|
||||
// console.log("子组件打印:",this.myMessage);
|
||||
// }
|
||||
name: 'child',
|
||||
props: [
|
||||
'myMessage',
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hello{
|
||||
margin-top: 30px;
|
||||
}
|
||||
h4,p{
|
||||
color: #41b883;;
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
}
|
||||
p{
|
||||
font-size: 12px;
|
||||
}
|
||||
span{
|
||||
color: #35495e;
|
||||
}
|
||||
.second-wrap{
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
h4,p{
|
||||
color: #41b883;;
|
||||
font-size: 20px;
|
||||
}
|
||||
p{
|
||||
font-size: 12px;
|
||||
}
|
||||
span{
|
||||
color: #35495e;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,32 +1,30 @@
|
||||
<template>
|
||||
<div class="thirdComponent">
|
||||
<button v-on:click="increment">{{ counter }}</button>
|
||||
<button v-on:click="increment">{{ counter }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'button-counter',
|
||||
data () {
|
||||
return {
|
||||
counter: 0
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
counter: 0,
|
||||
}),
|
||||
methods: {
|
||||
increment: function () {
|
||||
this.counter += 1
|
||||
this.$emit('increment')
|
||||
}
|
||||
increment: function () {
|
||||
this.counter += 1
|
||||
this.$emit('increment')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.thirdComponent{
|
||||
display: inline-block;
|
||||
}
|
||||
button{
|
||||
color: #41b883;
|
||||
border-color: #41b883;
|
||||
}
|
||||
.thirdComponent{
|
||||
display: inline-block;
|
||||
}
|
||||
button{
|
||||
color: #41b883;
|
||||
border-color: #41b883;
|
||||
}
|
||||
</style>
|
||||
@ -37,29 +37,32 @@ export default {
|
||||
|
||||
<style>
|
||||
button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 30px;
|
||||
border: 1px solid #ddd;
|
||||
color: #41b883;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 30px;
|
||||
border: 1px solid #ddd;
|
||||
color: #41b883;
|
||||
}
|
||||
a {
|
||||
color: #35495e;
|
||||
font-size: 16px;
|
||||
color: #35495e;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
li {
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
b {
|
||||
font-size: 12px;
|
||||
color: #35495e;
|
||||
font-size: 12px;
|
||||
color: #35495e;
|
||||
}
|
||||
.loading {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<h4 class="news-tit">啥玩意儿？</h4>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.news-tit{
|
||||
font-size: 18px;
|
||||
margin-top: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -4,44 +4,41 @@
|
||||
<!-- 父组件内容 -->
|
||||
<h4>这是父组件</h4>
|
||||
<p>这是父组件正在渲染的数据：{{parentMsg}}</p>
|
||||
<input type="" v-model="parentMsg" autofocus="autofocus" placeholder="type something">
|
||||
<input type="" v-model="parentMsg" autofocus="autofocus" placeholder="type something" />
|
||||
|
||||
<!-- 子组件内容 -->
|
||||
<tochild :my-message="parentMsg"></tochild>
|
||||
<child :my-message="parentMsg"></child>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tochild from '../components/secondcomponent.vue'
|
||||
import Child from '../components/secondcomponent.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
parentMsg: ''
|
||||
}
|
||||
},
|
||||
components: { // 挂载组件
|
||||
tochild
|
||||
}
|
||||
data: () => ({
|
||||
parentMsg: '',
|
||||
}),
|
||||
components: { // 挂载组件
|
||||
Child
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h4,p{
|
||||
color: #35495e;
|
||||
text-align: left;
|
||||
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;
|
||||
}
|
||||
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,10 +1,11 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
|
||||
<!-- 这是父组件内容 -->
|
||||
<!-- 这是父组件内容 -->
|
||||
<h4>子组件数据传递给父组件</h4>
|
||||
<p>方式：用自定义事件</p>
|
||||
<p class="text-center parent-tit">这是父组件</p>
|
||||
<p class="parent-title">这是父组件</p>
|
||||
|
||||
<!-- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 -->
|
||||
<h2 class="text-center">{{ total }}</h2>
|
||||
|
||||
@ -13,7 +14,7 @@
|
||||
<div class="text-center">
|
||||
<p>这是子组件</p>
|
||||
<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
|
||||
<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
|
||||
<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -23,34 +24,32 @@
|
||||
import buttonCounter from '../components/thirdcomponent.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
parentMsg: '子组件传递信息给父元素',
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
incrementTotal: function () {
|
||||
this.total += 1
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
parentMsg: '子组件传递信息给父元素',
|
||||
total: 0,
|
||||
}),
|
||||
methods: {
|
||||
incrementTotal: function () {
|
||||
this.total += 1
|
||||
}
|
||||
},
|
||||
components: {
|
||||
buttonCounter
|
||||
buttonCounter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.parent-tit{
|
||||
.parent-title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
h4{
|
||||
font-size: 20px;
|
||||
}
|
||||
h2{
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
.text-center p {
|
||||
color: #41b883;
|
||||
}
|
||||
h4{
|
||||
font-size: 20px;
|
||||
}
|
||||
h2{
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
.text-center p {
|
||||
color: #41b883;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,6 @@ Vue.config.debug = true
|
||||
Vue.use(VueRouter);
|
||||
|
||||
import Index from '../pages/index'
|
||||
import News from '../pages/news'
|
||||
import SecondComponent from '../pages/otherPages'
|
||||
import ThirdComponent from '../pages/otherPages2'
|
||||
|
||||
@ -18,10 +17,6 @@ export default new VueRouter({
|
||||
path: '/index',
|
||||
component: Index,
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
component: News,
|
||||
},
|
||||
{
|
||||
path: '/second',
|
||||
component: SecondComponent,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user