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