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是否安装成功:

Vue 部署开发环境_第1张图片

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

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

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

Vue 部署开发环境_第2张图片

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

四、webstrom新建Vue项目并运行

Vue 部署开发环境_第3张图片

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

Vue 部署开发环境_第4张图片

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

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

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

Vue 部署开发环境_第5张图片

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

Vue 部署开发环境_第6张图片

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

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

从Git上拉取项目代码:

Vue 部署开发环境_第7张图片

接着指定淘宝registry:

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

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

你可能感兴趣的:(Vue)