From 32c6f6f4b2d6503c4ce059e6eea116669dc4e4d6 Mon Sep 17 00:00:00 2001
From: "shunfa.xu" <shunfa.xu@beibei.com>
Date: Fri, 22 May 2020 17:51:02 +0800
Subject: [PATCH] =?UTF-8?q?Feat=20=E6=9B=B4=E6=96=B0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/webpack.dev.conf.js          | 29 +++++++++--------
 build/webpack.prod.conf.js         | 43 ++++++++++++-------------
 src/App.vue                        |  6 ++++
 src/components/footer.vue          |  5 +--
 src/components/header.vue          |  5 +--
 src/components/secondcomponent.vue | 47 +++++++++++++--------------
 src/components/thirdcomponent.vue  | 32 +++++++++----------
 src/pages/index.vue                | 31 ++++++++++--------
 src/pages/news.vue                 | 11 -------
 src/pages/otherPages.vue           | 51 ++++++++++++++----------------
 src/pages/otherPages2.vue          | 49 ++++++++++++++--------------
 src/router/index.js                |  5 ---
 12 files changed, 145 insertions(+), 169 deletions(-)
 delete mode 100644 src/pages/news.vue

diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 12a023b..c6e7b71 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -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,
+	},
 });
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index f115f2c..5045ba3 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -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,
+		}),
+	],
 });
diff --git a/src/App.vue b/src/App.vue
index 428b3aa..b0a7500 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,3 +18,9 @@
         }
     }
 </script>
+<style>
+    body, ul, h4{
+        margin: 0;
+		text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/footer.vue b/src/components/footer.vue
index d22bdc6..c417f35 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -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%;
diff --git a/src/components/header.vue b/src/components/header.vue
index e1d325e..1cd9288 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -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>
diff --git a/src/components/secondcomponent.vue b/src/components/secondcomponent.vue
index fbfc8ec..132d3c2 100644
--- a/src/components/secondcomponent.vue
+++ b/src/components/secondcomponent.vue
@@ -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>
 
diff --git a/src/components/thirdcomponent.vue b/src/components/thirdcomponent.vue
index 8c95223..99d7d1f 100644
--- a/src/components/thirdcomponent.vue
+++ b/src/components/thirdcomponent.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 3e2f2eb..c8058e9 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -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>
diff --git a/src/pages/news.vue b/src/pages/news.vue
deleted file mode 100644
index 2b940f0..0000000
--- a/src/pages/news.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <h4 class="news-tit">啥玩意儿？</h4>
-</template>
-
-<style>
-  .news-tit{
-    font-size: 18px;
-    margin-top: 60px;
-    text-align: center;
-  }
-</style>
diff --git a/src/pages/otherPages.vue b/src/pages/otherPages.vue
index 39ef600..c05dfd7 100644
--- a/src/pages/otherPages.vue
+++ b/src/pages/otherPages.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/otherPages2.vue b/src/pages/otherPages2.vue
index 9ad0791..3434c1c 100644
--- a/src/pages/otherPages2.vue
+++ b/src/pages/otherPages2.vue
@@ -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>
diff --git a/src/router/index.js b/src/router/index.js
index 629d6b5..afdee8f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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,