HbuliderX中vue-cli路由匹配

1、安装node

2、Hbuliderx创建vue-cli项目

使用Hbuilderx快速创建vue项目，点击新建选择vue项目版本2.6.10，选择创建，等待一段时间，项目创建成功右下角会出现提示框

 

项目创建成功之后，HubliderX底部会出现窗口图标

这个窗口图标是项目终端，打开之后可以使用npm run serve命令即可运行项目，在终端可以使用ctrl + c命令可以终止项目运行

3、下载组件路由及配置

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌 

3.1、安装

（1）、打开终端，使用 npm i vue-router@3.5.3命令下载vue-router插件包

插件包下载完成后可在node-modules文件下查看

 3.2、搭建

（1）、创建Main.vue与Login.vue文件

（2）、创建router目录并在该目录下创建 index.js 文件

在其中配置路由，以及添加路径

每次新加入一个组件就需要在index.js中导入 

（3）在main.js中配置路由

import router from './router/index.js'
Vue.use(router);

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})