Vue环境的搭建

Vue环境的搭建

一、下载并安装node.js

​ 打开node.js的官网(http://www.nodejs.cn/)下载node.js,一直下一步后安装完成即可,安装成功后,在cmd中敲node - -v,即可看到当前node.js的版本信息,如下图:
Vue环境的搭建

二、基于node.js安装cnpm(淘宝镜像)

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

三、安装webpack和webpack-cli

​ 在命令行中输入npm install webpack –gnpm install webpack-cli -g即可完成安装。在命令行中输入webpack -v和webpack-cli -V即可看到当前安装的webpack版本,如下图:
Vue环境的搭建

四、Vue.js环境的搭建

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

​ 在命令行中分别执行cnpm install vue –gcnpm install -g @vue/cli即可完成安装,安装成功后,输入vue-V即可查看vue的版本号,如下图:
Vue环境的搭建
​ 2、安装Vue调试工具vue-devtools(谷歌浏览器插件)

​ (1)下载地址https://github.com/vuejs/vue-devtools,如下图:
Vue环境的搭建
​ (2)解压上一步的压缩文件,并在DOS窗口中,进入解压的文件目录,并执行:npm install 命令,开始初始化项目安装依赖包。

​ (3)将vue-devtools-dev\shells\chrome文件夹下的manifest.json文件中的persistent属性值由false改为true,如下图:
Vue环境的搭建
Vue环境的搭建
​ (4)执行:npm run build命令进行代码的编译,如下图,报错了,原因是没进入上图中的路径执行该指令,故进入chrome路径下执行即可,如下图2:
Vue环境的搭建Vue环境的搭建
​ (5)添加谷歌浏览器扩展程序,选择shells/chrome文件夹
Vue环境的搭建
Vue环境的搭建