[TOC]
## 1. vs code打開新建項目
## 2. `ctrl+·`打開命令
## 3. 輸入命令`npm run serve`開啟該項目
## 4. 打開Network地址看到當前頁面
## 5. 進行內容的更改和刪減
### 5.1刪除components中內容,下列圖片是將views改成pages
刪減更改完成后，
### 5.2router.js：更改文件夾路徑
```
import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
// 傳遞id
path: '/about',
name: 'about',
component: ()=>import("@/pages/About.vue")
}
]
})
```
App.vue
```
<template>
<!-- 路由：根據url地址的不同，顯示不同的界面 -->
<div id="app">
<router-view/>
</div>
</template>
```
Home.vue
```
<template>
<div class="home">HelloWorld</div>
</template>
<script>
export default {
name: "home"
};
</script>
```
當前項目頁面僅僅出現hello world
