vue-cli利用router建立单页面

1、建立脚手架

第一步

打开命令输入vue init webpack-simple vue-name 下载webpack-simple  (vue-name是你要建立的项目名称)

第二步

输入cd vue-name进入你的项目目录

第三步

输入 npm install 下载模块 也叫作依赖注入

第四步

输入npm run dev 运行项目

若是端口错误 打开package.json，找到scripts，在--hot后面加上--port 8085 要修改的端口号

 

 

 

2、建立路由

脚手架：vue-loader

第一步

建立组件，好比建立一个Home.vue文件，建立完里面编写

 

 

第二步

下载vue-router，打开命令输入npm install vue-router --save

第三步

引入router

打开main.js，写上

 

 

第四步

配置router

在main.js，写上

 

 

router.comfig.js是新建的js文件，用来存放路由相应配置的模块

也能够直接在const router = new VueRouter({这里写模块})，我的建议用上面方法，益处就很少说了

而后在router.comfig.js文件写上

 

 

第五步

在App.vue文件使用配置好的路由

 

配置环境没问题的话，你只要按这样的思路步骤写下来，就能在vu-clid的实现router功能

最后，当你点击主页就会出现你想写的组件

写的很差多多包涵，不懂的能够留言~~~~