vue开发环境搭建
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue开发环境搭建，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2187字，纯文字阅读大概需要4分钟。
内容图文
一.安装流程
注：这里是windows系统的环境搭建。
- 安装node.js.
- 基于node.js,利用淘宝npm镜像安装相关依赖,
即安装cnpm. - 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架.
- 创建项目测试环境是否搭建好。
- 安装webpack,静态模块打包器。
二.流程详情
1.安装node.js
https://nodejs.org/en/
如图所示：
安装最新版本的LTS包 （长期稳定版本）
这里默认安装路径为 “C:\Program Files\nodejs” , 你可以修改目录，并点击 next（下一步）：
验证node.环境
- 键盘同时按下 windows+R 按键，打开dos命令窗口。
- 输入： node-v ,
显示node版本信息，则node.js安装成功。
如图：
2 安装cnpm
dos命令窗口输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
回车， 等待安装完成…
验证
输入： cnpm -v
显示相关信息，则安装成功。
3.安装全局vue-cli脚手架
简介：vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板。
dos命令窗口输入：
cnpm install -g vue-cli
回车，等待安装完成…
验证
输入： vue -V
注意：这里的V大写
显示版本信息， 则安装成功。
4. 创建第一个vue项目测试
① 定位到创建文件所在位置：
② 执行命令：vue init webpack Demo
③ 进入项目，下载依赖，输入：
cd Demo
cnmp install
④测试是否成功
运行：dos命令窗口输入：npm run dev
注意：如果报如图错误，则是你漏了一步，项目依赖没有下载。
在项目位置，输入： cnmp install，回车。
在浏览里输入：localhost:8080(默认端口为8080)
如图所示，则创建成功。
注意：
1.vue init webpack vuedemo创建项目时报错，提示连接超时.
原因是 vue-cli安装时出现问题，少了一个package,那是因为你可能使用国外的npm install -g vue-cli 安装脚手架，需要翻墙，访问受到限制。而使用国内淘宝镜像cnpm install -g vue-cli命令安装，则不会出现这问题.
解决办法有两种：
1.参照别人的离线下载包方法
2. 直接卸载vue-cli脚手架，重新使用cnpm install -g vue-cli利用淘宝npm镜像安装。
① 卸载指令： npm uninstall vue-cli -g
② 检查是否安装cnpm, cnpm安装成功后，输入cnpm install -g vue-cli命令安装。
2.npm run dev 运行项目时报错，从以下几个方面检查：
1. 8080端口号可能被别的资源占用，修改端口号。
2. 项目依赖node_modules文件是否在项目目录存在。
3. 关闭windows防火墙和杀毒软件。
5.安装Webpack(项目打包工具)
由于很多浏览器还不支持ES6规范，所以可以使用webpack 把各种资源当做模块来处理和使用，打包成相应的支持的版本
①安装全局webpack
cnmp install webpack -g
②安装全局webpack-cli
cnmp install webpack-cli -g
三.Vue项目目录结构介绍
内容总结
以上是互联网集市为您收集整理的vue开发环境搭建全部内容，希望文章能够帮你解决vue开发环境搭建所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。