VSCode导入Vue项目入门部署与启动

---

一、VSCode导入vue项目

首先保证自己电脑上拥有VSCode，并安装所需的一些插件

• 下载所需插件

其中倒数第二个可能搜不到，用以下扩展进行代替

• 与idea导入项目一致，选择前端项目的文件夹进行导入

• 进行启动项目，前提是电脑上需要有node
  使用“Ctrl+~”调出终端 在VS的终端启动命令

npm install 安装vue插件初始化项目
npm run dev 启动项目，就可以在浏览器中打开页面

或者

cnpm install
cnpm run dev

前者的命令下载node后即可，版本不宜过高
后者需要将npm下载镜像，使用淘宝镜像- 命令就改为了cnpm，会加快项目的启动速度

• 结果显示
  如图就是项目启动成功了

• 停止前端项目运行
  在终端 ctrl+c 来停止运行

• PS：没有node.js的需要下载，官网提供的版本过高，下载安装后容易出现一些问题导致不能运行，建议下载与项目适配的版本，node.js历史版本可参考以下博客
  node.js历史版本下载安装

二、下载node及安装淘宝镜像

找到需要下载的版本，下载并一路点击安装即可

• 在cmd中检查是否安装成功，出现版本号就表示安装成功
  

• 配置npm的全局模块的存放路径 以及 cache缓存的路径

  这两个路径保证是跟node.js的modules目录在一个文件夹下

  即 在本机中我的路径是C:\Program Files\nodejs

  设置全局模块的安装路径到 “node_global” 文件夹，
  设置缓存到 “node_cache” 文件夹

  因此命令为：

  npm config set prefix "C:\Program Files\nodejs\node_global"
  
  npm config set cache "C:\Program Files\nodejs\node_cache"
  

• 配置淘宝镜像

  @后的数字可以更改为想要的版本 若不加上@6 就默认下载最新版本的镜像cnpm

  国内镜像
  npm install -g cnpm@6 --registry=https://registry.npm.taobao.org
  

  • 检查是否安装成功，如下即安装成功
  • 若显示cnpm不是内部或外部命令，可能是以下的原因
    • npm的全局模块的存放路径 以及 cache的路径跟node.js不在一个目录下
    • 淘宝镜像过期
      解决：npm淘宝镜像过期解决办法