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。

这里没有用到组件注册等，只是路由切换页面实现导航栏功能。

最终效果：