正文
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功能
最后,当你点击主页就会出现你想写的组件
写的不好多多包涵,不懂的可以留言~~~~