Vue环境的搭建

Vue环境的搭建

一、下载并安装node.js

​ 打开node.js的官网（http://www.nodejs.cn/）下载node.js，一直下一步后安装完成即可，安装成功后，在cmd中敲node - -v，即可看到当前node.js的版本信息，如下图：

二、基于node.js安装cnpm（淘宝镜像）

​ 因Vue大部门的插件资源都在国外，故下载速度较慢，所以安装cnpm命令，可下载国内淘宝镜像资源，加速插件资源的下载，在命令行中执行npm install -g cnpm --registry=https://registry.npm.taobao.org，安装完成后，输入cnpm –v命令，出现以下信息，表示安装成功，如下图：

三、安装webpack和webpack-cli

​ 在命令行中输入npm install webpack –g和npm install webpack-cli -g即可完成安装。在命令行中输入webpack -v和webpack-cli -V即可看到当前安装的webpack版本，如下图：

四、Vue.js环境的搭建

​ 1、安装Vue和Vue命令行工具（即vue-cli脚手架）

​ 在命令行中分别执行cnpm install vue –g和cnpm install -g @vue/cli即可完成安装，安装成功后，输入vue-V即可查看vue的版本号，如下图：

​ 2、安装Vue调试工具vue-devtools（谷歌浏览器插件）

​ （1）下载地址https://github.com/vuejs/vue-devtools，如下图：

​ （2）解压上一步的压缩文件，并在DOS窗口中，进入解压的文件目录，并执行：npm install 命令，开始初始化项目安装依赖包。

​ （3）将vue-devtools-dev\shells\chrome文件夹下的manifest.json文件中的persistent属性值由false改为true，如下图：


​ （4）执行：npm run build命令进行代码的编译，如下图，报错了，原因是没进入上图中的路径执行该指令，故进入chrome路径下执行即可，如下图2：

​ （5）添加谷歌浏览器扩展程序，选择shells/chrome文件夹