添加Mock作为虚拟测试数据

src/App.vue

@@ -1,26 +1,17 @@
+// App.vue
+
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="#app"></div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import axios from 'axios' // 引入axios
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
+  // 挂载的时候获取新闻列表
+  mounted() {
+    axios.get('/mock/news').then(res => { // url即在mock.js中定义的
+      console.log(res.data) // 打印一下响应数据
+    })
   }
 }
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+require('./mock')
 
 createApp(App).mount('#app')

src/mock.js

@@ -0,0 +1,21 @@
+// mock.js
+
+// 引入mockjs
+const Mock = require('mockjs')
+// 获取 mock.Random 对象
+const Random = Mock.Random
+// mock新闻数据，包括新闻标题title、内容content、创建时间createdTime
+const produceNewsData = function () {
+    let newsList = []
+    for (let i = 0; i < 20; i++) {
+        let newNewsObject = {
+            title: Random.ctitle(), // Random.ctitle( min, max ) 随机产生一个中文标题，长度默认在3-7之间
+            content: Random.cparagraph(), // Random.cparagraph(min, max) 随机生成一个中文段落，段落里的句子个数默认3-7个
+            createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；
+        }
+        newsList.push(newNewsObject)
+    }
+    return newsList
+}
+// 请求该url，就可以返回newsList
+Mock.mock('/mock/news', produceNewsData) // 后面讲这个api的使用细节