Vue开发环境搭建

---

前言

在开发Vue项目的时候，我们通常使用vue-cli进行打包，编译项目。而vue-cli是基于nodejs+webpack封装的命令行工具，所以我们需要先安装nodejs然后在安装Vue-CLI。

---

一、安装nodejs

我们去官网下载nodejs，输入下载地址：https://nodejs.org/en/，选择相应的版本进行下载



安装完成后，检查一下nodejs有没有安装成功。在cmd窗口命令中输入 node -v ，回车，会输出node的版本号，如下：



由于在国内使用npm非常慢，所以在这里推荐使用淘宝npm镜像。使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具，使用如下命令：

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

检验一下npm是否安装成功，输入npm -v，回车，会输出npm的版本号

二、安装Vue-CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。执行如下命令，安装Vue-CLI

cnpm install -g @vue/cli

Vue-CLI安装完成后，进入项目文件夹下执行 cnpm install 安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件

运行项目，执行如下命令：

npm run serve

不能用cnpm来运行，必须是npm，package.json中scripts项的服务名称为：serve

二、安装VSCode

安装VSCode 下载地址：https://vscode.en.softonic.com

相关插件可参考https://www.cnblogs.com/karthuslorin/p/8577224.html
安装成功后 汉化vscode，按F1 搜索 Configure Display Language 设置 zh-cn 关闭软件重启。

如果重启后还是英文的，那么在商店查看已安装的插件，把中文插件Chinese(simplified) 重新安装一遍，然后重启软件即可。

由于依赖项非常的多，编辑器在检索module文件时会非常的耗内存，所以需要阻止检索该文件
菜单栏：文件=>Preference=>Settings=>文件=>Exclude

添加：**/node_modules