Feat 所有包升级到最新版

src/App.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <!-- 可以删掉 顶部 -->
+        <!-- 删除试试 顶部 -->
         <HeaderCompontent></HeaderCompontent>
         <!-- 渲染出口 -->
         <router-view></router-view>
-        <!-- 可以删除 底部菜单 -->
+        <!-- 删除试试 底部菜单 -->
         <FootComponent></FootComponent>
     </div>
 </template>

src/mock/index.js

@@ -0,0 +1,17 @@
+// mock data
+export const data =  {
+    success: true,
+    data: [{
+        name: "React",
+        id: 1,
+    },{
+        name: "Vue",
+        id: 2,
+    },{
+        name: "Angular",
+        id: 3,
+    },{
+        name: "Flutter",
+        id: 4,
+    }]
+};

src/pages/index.vue

@@ -1,44 +1,37 @@
 <template>
   <div>
     <button v-on:click="loadMore">click me</button>
-    <div>
+	<ul>
-      <ul>
+		<li v-for="(item, index) in listArr" :key="index">
-        <li v-for="(item, index) in listArr" :key="index">
+			<a href="">{{ index }} 《{{ item.name }}》</a>
-          <a href="">{{ index }} 《{{ item.name }}》</a>
+		</li>
-        </li>
+	</ul>
-      </ul>
-    </div>
-    <div class="loading" v-if="loading">
-      Loading...
-    </div>
   </div>
 </template>
 <script>
+let mock = require('../mock'); // 模拟请求
+
 export default {
-  data: () => ({
+	data: () => ({
-	loading: false,
+		listArr: [],
-	listArr: [],
+		page: 1,
-  }),
+	}),
-  created() {
+	created() {
-    this.loadList();
-  },
-  methods: {
-    loadList() {
-		let url = "https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery";
-		fetch(url, {
-			method: "GET",
-		}).then((res) => {
-			const {data}  = res;
-			console.log(res);
-			this.listArr = data.items;
-        })
-        .catch();
-    },
-    loadMore() {
-		console.log("load more");
 		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>
 

src/router/index.js

@@ -11,24 +11,24 @@ import SecondComponent from '../pages/otherPages'
 import ThirdComponent from '../pages/otherPages2'
 
 export default new VueRouter({
-  mode: 'hash', // 还有 history 等
+	mode: 'hash', // 还有 history 等
-  base: __dirname,
+	base: __dirname,
-  routes: [
+	routes: [
-    {
+		{
-		path: '/index',
+			path: '/index',
-		component: Index,
+			component: Index,
-    },
+		},
-    {
+		{
-		path: '/news',
+			path: '/news',
-		component: News,
+			component: News,
-    },
+		},
-    {
+		{
-		path: '/second',
+			path: '/second',
-		component: SecondComponent,
+			component: SecondComponent,
-    },
+		},
-    {
+		{
-		path: '/third',
+			path: '/third',
-		component: ThirdComponent,
+			component: ThirdComponent,
-    }
+		}
-  ]
+	]
 })