Vue 部署开发环境_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未升级，通过命令升级一下，然后就运行成功了，就这样。（过程省略好几张图好几段文字）