windows下vue项目启动步骤
版权声明:本文为博主原创文章,未经博主允许不得转载。
原创,转载请标注引用地址,谢谢~
前后端分离项目,要做前后端联动测试,没整过前端用vue, nodejs和webpack的开发管理方式。来回折腾终于把已经建好的vue项目启动起来,做个笔记记录下步骤备用,只针对没有任何前端项目启动经验的,可能对别人没有参考意义:
os:windows7
(1)git clone已建的vue项目(强迫症患者非要写,废话)
(2)装好nodejs,最新版本6.10以上的好像都能自动配置路径和npm啥的,反正装好后在任意路径下用cmd查”node –version”或者”npm -v”都能给出版本号,不用像一些其他教程一样还要配置环境变量。个人偏好者另说。vue是依赖nodejs的环境的。
(3)切换npm镜像:在任意路径下用cmd输入“npm install -g cnpm –registry=https://registry.npm.taobao.org” 这样就能用淘宝的npm镜像代替国外的资源,懒得用代理同学的福音。以后就可以用cnpm命令来全部代替npm。不设置代理的话,在后续项目的npm install的时候,容易因为超时而失败。有教程把这条命令的“–registry”写成只有一个“-”,注意是两个“–”。
(4)npm全局安装vue:仍旧在任意路径的cmd下输入“cnpm install vue-cli -g”,安装vue。成功后输入vue能出来信息。
(5)npm项目依赖组件安装:cmd进入前端vue项目的根目录,输入命令“cnpm install”,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下。一般git库会gitignore依赖组件,也就是没有node_modules文件夹,不然太大了… 这步容易发生err,遇见了就要打回去重弄,不要掩耳盗铃,具体错误排查stackoverflow…。
(6)npm编译:第一次运行前,要对项目进行编译,cmd进入前端vue项目的根目录,输入命令“npm run build”,此时会对根目录下的package.json对build命令的定义进行编译,一般”build” = “webpack -p”。
(7)配置nginx:前后端分离项目一般都要解决跨域问题,上nginx吧,配好nginx安装目录/conf/nginx.conf的server模块。nginx的配置不详述。好像现在nodejs也能直接代理,但是如果用windows的同学,好像windows的nodejs不支持process.argv[…],nginx欢迎你回归(话说nginx在windows下表现也不太稳定,经常好好地项目又不行了,此时不管三七二十一首先重启nginx!)
(8)配置项目主机地址:前端项目里需要有个config文件夹,里面要有host.js或者config.js文件,定义nginx转域后的主机地址+端口号(也就是nginx.conf里面server模块的server_name值+listen的端口号)。git项目拉下来没有的话自己加一个,文件内容范例(下面用${}表示nginx.conf里面server模块对应的字段值):
export {host};