Vue的安装及环境配置是怎样，如何创建Vue项目-群英

上一篇：Vue.js中NaiveUI组件主要用来做什么，怎么用下一篇：JS实现简单图片轮播切换的过程及操作是怎样

在实际应用中，我们有时候会遇到“Vue的安装及环境配置是怎样，如何创建Vue项目”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“Vue的安装及环境配置是怎样，如何创建Vue项目”文章能帮助大家解决问题。

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

2、查看npm

安装好node.js，就已自带npm（包管理工具）打开命令行工具(win+r，然后输入cmd)，输入 npm -v 命令查看npm是否安装成功。

在命令行中输入npm install -g cnpm –registry=http://registry.npm.taobao.org,安装完成之后可以使用cnpm -v命令查看是否安装成功，如果输出版本号即安装成功。

打开命令行工具输入：cnpm install webpack -g

安装完成之后输入 webpack -v，如果出现xxx not installed,则需要执行对应指令，如下图，就执行命令cnpm install webpack -D和cnpm install webpack-dev-server -D

如果出现相应的版本号，则说明安装成功。

打开命令行工具输入：cnpm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

打开命令行工具，进入相应的文件夹路径下，执行命令vue init webpack vueDemo（自己的项目名）

在我配置完nmp、node.js、vue-cli环境，准备创建项目进行最后一步的测试的时候Vue init webpack 项目名 总是失败，都是报这个错，原因是因为无法连接外网或者连接超时导致

经过查阅资料，记录下自己的错误。

解决的办法是使用离线下载，我们需要下载github仓库中的vue-templates/webpack，然后解压到本地。：

需要手动下载 webpack-simple 模板，进入链接https://github.com/vuejs-templates/webpack

下载到我们的c盘用户目录下，自己创建的 .vue-templates文件夹，解压到当前文件夹，并且命名为webpack

再进行vue init webpack vuedemo命令的时候，需要带上参数--offline表示离线初始化。这样就能成功创建了，接下来就是创建项目的参数了。

最后创建完，npm run dev启动项目，在浏览器输入http://localhost:8080/测试一下，成功

到此这篇关于“Vue的安装及环境配置是怎样，如何创建Vue项目”的文章就介绍到这了,更多相关Vue的安装及环境配置是怎样，如何创建Vue项目内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

标签： vue安装及环境配置

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：Vue.js中NaiveUI组件主要用来做什么，怎么用下一篇：JS实现简单图片轮播切换的过程及操作是怎样