01.安装vue脚手架
下载HbuiderX编辑器，新建项目，选择vue项目就会创建一个vue脚手架项目，前提是要在编辑器中下载好内置终端等插件。
02. 删除默认的页面自己新建
删除默认的hello.vue和App.vue中的内容，hello.vue页面直接删除。
注意删除后的app.vue里引入的组件代码也要删除，否则会报错。
然后在src目录下新建页面目录，每个页面都有一个文件夹包含。
且每个页面都包含vue页面的代码格式，即template，style，script。
03.下载路由 实现页面切换
点击编辑器中的这个按钮，出现如下界面：
在此输入路由安装命令回车安装路由：
安装完成后，在main.js中引入路由：
然后使用路由：
配置路由：
先引入要路由的页面，再配置：
再使用路由：
至此，mianjs路由配置完毕。
完整main.js代码：
然后在App.vue页面写路由跳转(必须按照这样写)：
到此，页面切换功能已完成，可以打开项目点击li标签查看是否正确切换。
04. 在各个页面里正常写内容
在新建的页面里面写内容，就是正常的写html页面。
把每个页面的内容都写完整后，通过切换页面就完成了一个简单的vue网站。
总结：
app.vue只是一个切换页面的容器，并不是一个页面。App.vue里面只写切换标签li。
这里没有用到组件注册等，只是路由切换页面实现导航栏功能。
最终效果：