[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
