Vue 部署开发环境

时隔多年,还是写点笔记吧。(部署Vue开发环境,运行基于Vue前后端分离开发的毕业设计,捂脸)

一、首先,我使用的Vue代码编辑器是webstrom;

二、安装 Node.js

       在Node.js历史版本中下载自己需要版本的node.js进行安装,历史版本链接:https://nodejs.org/zh-cn/download/releases/ 。我在此处下载的是 node-v11.14.0-x64.msi 。

        下载成功后,点击开始安装,傻瓜式安装,请一路next到installs,谢谢。接着在命令提示符中验证Node.js是否安装成功:

         node中集成了 npm包管理器,可接着在cmd中查看npm版本。

三、安装vue-cli脚手架构建工具

       在cmd中输入 npm install -g vue-cli,全局安装vue-cli。

        到这里,环境配置的部分就结束了,接下来,我要在webstrom中新建一个vue项目,验证我的环境配置成功了没有。(为什么不在cmd中用vue-cli中新建一个vue项目呢?因为我懒,有好的工具,为什么不用。)

四、webstrom新建Vue项目并运行

       在webstrom中新建一个名为first-vue的项目,第一次创建可能会比较久。因为前面没有配置cnpm(China的npm),所以他在加载的时候告诉我,你用的npm太久了,你要不要用http://registry.npm.taobao.org ,emm,果断的输入Y。

         看到这个,我就开心了,展开项目可以看到项目文件全部生成完毕。

          接着部署项目,让项目运行起来。下拉右上角,选择edit configuration,我的IDE已经帮我设置好npm运行参数了,直接OK,点击绿色的三角符号运行。(我的项目已经跑起来了,所以绿色的三角形已经变成了C箭头)

         补充说明:IDE未自动配置npm运行参数,可点击如下 configuration界面中的 + ,选择npm,设置相应参数,新建npm运行方式,启动项目。

项目运行成功后,在浏览器中访问 http://localhost:8080/,即可看到如下界面:

至此,Vue项目环境搭建成功,我可以拉取我的毕业毕设,把它运行起来了。

----------------------------------------------------------------------------(全文完)------------------------------------------------------------------------------

从Git上拉取项目代码:

接着指定淘宝registry:

npm install --registry=https://registry.npm.taobao.org

然后发现npm-sass未升级,通过命令升级一下,然后就运行成功了,就这样。(过程省略好几张图好几段文字)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值