使用node.js搭建并运行vue-cli项目(dev)

        近段时间团队做的一个项目，前后端完全分离，使用API交互数据，前端页面是使用vue-cli架构。之前后端和前端开发的小伙伴对接后都是待前端打包编译好才测试，到我进行统一测试检视时，发现竟然没本地的前后端完整测试环境，没办法，只能立马搜一下node.js服务环境运行vue-cli的教程，自己动手边学边用。

        1.下载并安装node.js

        在node.js官网：https://nodejs.org/en/ 安自己的操作系统下载对应的安装包。开发用的windows系统，直接下载安装包安装就行了。

        2.安装完成后运行Node.js command prompt

        运行后其实与windows的cmd界面类似，命令与dos的差不多。

        可以使用 node -v 查看node.js版本信息。

       

        3.安装npm

        现在版本的nodejs已经集成npm，所以无需另外安装，可以用npm -v 查看npm的版本信息。

        4.注册cnpm

        因为npm的代码仓库服务器是在国外的，所以大多数时候使用npm install 安装插件时下载速度会十分缓慢或安装失败。我们可以通过注册cnpm命令从淘宝的国内npm镜像直接下载安装同样的插件。

        执行：npm install cnpm -g --registry=https://registry.npm.taobao.org

        5.安装vue脚手架vue-cli

        执行：cnpm install -g vue-cli

        安装后可以用vue -V  (注意是大写V) 查看vue的版本信息。

        6.下载并安装vue-cli项目需要的插件包

       首先需要将当前命令路径定位到vue-cli开发代码的目录下（一般是dev目录），执行 cnpm run install，程序会自动下载并安装需要的插件包。（若使用npm的话是从国外服务器下载，可能会有失败）

       下载的插件包会存放在node_modules文件夹下。

       7.运行vue-cli项目

       执行 npm run serve ，程序会自动编辑并使用node启动项目。命令界面上会输出waring和error，默认是用8080端口访问。

       8.取消当前执行命令

       按下 crtl + c 会弹出提示“终止批处理操作吗（Y/N）？”，输入Y，回车，则会中断（包括正在运行的服务）。若是在npm run serve 编辑中，按crtl+c会直接中断）

       9.异常情况

       暂时遇到过两种运行失败的情况：

       （1）提示缺少某些插件包，但按提示执行npm install 安装失败。

       可能是从国外服务器下载失败，这时可以试试使用cnpm install命令安装对应的插件包。

       （2）使用 cnpm install 执行失败，大致提示是文件写入失败或无权限写入。

       这个情况是我们使用svn做代码版本管理，更新的代码文件默认是“只读”状态，导致npm安装时不能写入配置文件 package.json 和 package-lock.json 的问题。

     

       以此博文记录一下。

 

       部分内容引用、参考以下文章并在实际使用后进行修改：

• 从安装node js到构建一个vue并启动它
• 使用npm命令，而不用cnpm命令，也可以得到同样的体验