Windows系统

一、先下载node.js，为了之后可以使用npm命令下载第三方包

下载地址：建议安装LTS版本

Download | Node.js

二、安装淘宝镜像（因为经常下载第三方包速度比较块-节省时间）

（设置淘宝镜像：大家都知道国内直接使用 npm 的官方镜像是非常慢的，所以这里推荐使用淘宝 NPM 镜像。）

使用管理员身份打开cmd，在打开的命令行界面输入：

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

三、接着安装vue和vue-cli脚手架工具

在要安装的路径下直接打开cmd，运行命令：nmp i -g vue  和  nmp i -g @vue/cli    -g代表全局安装

四、可以通过npm进行基于 vue-cli 项目创建

详细创建过程可见博客：vue-cli创建vue项目详细步骤_Hannah_Hannah_的博客-CSDN博客

如果出现如下该问题：（是因为目前的vue-cli的版本为2，要下载vue-cli3的版本）那就先卸载目前的vue-cli（卸载命令：npm uninstall -g vue-cli），再重新下载（下载命令：npm i -g @vue/cli）

1、先在电脑上新建一个文件夹用来存放vue项目，如：project

2、在新建好的文件夹project下进入cmd命令，直接点击路径后输入cmd即可锁定路径

 进入cmd之后 输入命令：vue create 项目名称 ，如 vue create demo-cart 

出现下面这个页面就算成功

3、如果是别人发给你的文件，需要进行下载

 直接右击项目文件选择vscode打开，打开终端运行命令：npm i 

五、进入项目 并 运行项目

1、进入项目，直接 右击 demo-cart 文件 选择vscode打开，即进入如下页面：

 2、运行项目，直接在vscode终端 输入命令：npm run serve

六、给 vscode 安装 Vetur 插件

安装了Vetur插件，.vue组件内容才会有高亮，直接点击下载

如果出现这个报错

 1、有可能是设置了代理，直接点击 设置 > 网络和Internet > 代理，直接关闭即可

2、直接点击 “请尝试手动下载” 即可网页上下载，下载后手动配置即可。

七、安装 vue-devtools工具

下载vue-devtools工具有两种方法：（这边展示用GitHub下载）

      （ 1）在chrom商店下载，但是需要爬墙

      （ 2） 在github中下载

1、下载地址：GitHub - vuejs/devtools at v5.1.1

下载后并将文件解压到自己想安装的路径下

 2、使用npm i 命令进行安装依赖

    先进入到安装目录下打开cmd，如下图：

 3、使用npm run build 编译打包

     编译打包后会在shells下生成chrome文件夹。此文件夹就是用来放入chrome的扩展程序。

4、扩展Chrome插件
打开Chrome浏览器–>选择更多工具–>扩展程序–>打开开发者模式,点击“加载已解压的扩展程序”,选择 vue-devtools5.1.1 > shells > chrome 放入。