windows搭建Vue 开发环境

windows搭建Vue 开发环境

第一步：node.js 安装
下载node.js 下载地址https://nodejs.org/zh-cn/download/
当前长期支持版: 12.16.1 (包含 npm 6.13.4) 下载后直接点击安装;
安装完之后可以到cmd查看

C:\User\dell>node -v
v12.16.1
C:\User\dell>npm -v
v6.13.4

第二步：淘宝cnpm 安装
确定node安装后，就可以开始vue的安装了。这里提一下淘宝镜像，用淘宝镜像的cnpm来代替npm的安装，速度会快很多。淘宝镜像推荐网址：https://npm.taobao.org/。成功后同样可查看版本：
使用命令npm install -g cnpm --registry=https://registry.npm.taobao.org

C:\User\dell>npm install -g cnpm --registry=https://registry.npm.taobao.org

验证镜像是否安装成功

C:\User\dell>cnpm -v

第三步：安装Vue 框架
全局安装vue-cli使用命令cnpm install -g vue-cli

C:\User\dell>cnpm install -g vue-cli

查询是否安装成功

C:\User\dell>vue -V
2.9.6

到此vue已经安装成功了

建一个vue项目
这里我们使用vue官网的命令行工具。Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装淘宝cnpm 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 判断cnpm 是否安装成功
cnpm -h
# 全局安装vue-cli
cnpm install -g vue-cli
# 判断vue-cli 是否安装成功
cnpm list
#创建一个基于webpack模板的新项目
vue init webpack d:\nodeworkspace\nodeone
# 切换至项目路径
cd d:\nodeworkspace\nodeone
# 安装项目依赖文件
cnpm install
# 项目启动
cnpm run dev 

浏览器访问localhost:8080 就可以看到VUE欢迎页面了