vs code打开新建hello项目 `ctrl+·`在项目中打开终端 输入命令`npm run serve`开启该项目  打开Network地址看到当前页面  初始化该vue项目，我们要进行内容的更改和删减 ***** 删减更改完成后 目录： 删除components中内容 原目录： router.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> ``` 此时当前项目页面如下：