vue-cli利用router创建单页面

一、创建脚手架

第一步

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

第二步

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

第三步

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

第四步

输入npm run dev 运行项目

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

 

 

 

二、创建路由

脚手架：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功能

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

写的不好多多包涵，不懂的可以留言~~~~

 

转载于:https://www.cnblogs.com/chenhaihui/p/6738725.html