vue-cli搭建项目及代理路由设置
vue-cli 是vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli
一、 安装 node.js
1. 安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。
最好安装偶数版本,比如8.9.3V,不要安装奇数版本,比如9.4.0
偶数版本是稳定版本,会长期更新维护,而奇数版本是测试激进版本,不稳定
2. 安装好后,先在window配置node.exe全局环境,详情百度或:http://blog.csdn.net/pengpegv5yaya/article/details/51885829(网上找的一篇文章)
3.全局环境配置好后在cmd命令输入
npm -v
node -v
可以查看是否安装好了node和npm的版本
4. 最好安装一个cnpm的国内镜像,这个是淘宝的镜像,可以快速安装一些npm包
在cmd输入
npm i -g cnpm
二、全局安装 vue-cli和webpack
在cmd下使用cnpm安装,会比npm安装快些,npm是请求的国外服务器安装npm包
cnpm install -g vue-cli
cnpm install -g webpack
三、生成项目
创建一个新的文件夹,在该文件夹下运行cmd,输入以下代码
vue init webpack project
配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录(cd project),使用 cnpm i 安装依赖
最总的文件目录结构如下图
四、代理路由设置
作为一个前端,可能需要模拟数据接口,发送请求,如果希望发送相对路径的请求,可以设置代理路由,在发送以'/api'开头的请求时,跳转到模拟api接口的url
在config文件夹下的index.js文件中,修改dev对象中的proxyTable这个属性
注意:这里还是针对上面已经创建好的vue项目,也可以不用修改,直接请求绝对路径,或是后台做好的真实api接口
proxyTable: {
'/api': {
target: 'http://localhost:8081', // 数据的接口路径
changeOrigin: true, // 跨域
secure: false,
pathRewrite: {
'^/api': ''
}
}
},
最新文章
- 修改yv12像素值
- iOS运行时 -- Runtime(摘抄自网络)
- [GRYZ2015]Graph
- war包编译和打包发布
- [MySQL]快速解决";is marked as crashed and should be repaired";故障
- (转)解决png图片在IE6下不透明的方法
- WCF消息
- css3+js 实现砸金蛋效果
- 微信小程序开发之选项卡
- Python多线程案例
- Postgres全文搜索功能
- windows系统开启虚拟化
- Web前端开发必备
- layui中,同一个页面动态加载table数据表格
- OO第二阶段纪实
- 原来商家登录系统的commonjs
- 【Java线程安全】锁
- linux 3.10 一次softlock排查
- Ubuntu16.04上用源代码安装ICE
- Atcoder Grand 012 C - Tautonym Puzzle
热门文章
- Python: scikit-image 彩色图像滤波
- Python 2.7获取网站源代码的几种方式_20160924
- BZOJ_2813_奇妙的Fibonacci_线性筛
- ACM学习历程—ZOJ3878 Convert QWERTY to Dvorak(Hash &;&; 模拟)
- javacv实现实时视频截图和录像服务easyCV
- JavaScript:Map使用
- Source insight 支持汇编
- AAAAAA
- 如何用CSS实现矩形按钮右边缘的中间有个往里凹的小半圆
- Windows下caffe安装详解(仅CPU)