Vue安装与环境配置步骤详解

目录
  • 1、安装node.js
  • 2、查看npm
  • 3、安装npm的国内镜像—cnpm
  • 4、安装webpack（一款开源的前端打包工具）
  • 5、查看webpack是否安装成功
  • 6、安装vue-cli脚手架构建工具
  • 7、创建Vue项目
  • 补充：vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法
  • 总结

1、安装node.js

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

2、查看npm

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

3、安装npm的国内镜像—cnpm

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

4、安装webpack（一款开源的前端打包工具）

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

5、查看webpack是否安装成功

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

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

6、安装vue-cli脚手架构建工具

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

7、创建Vue项目

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

补充：vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法

在我配置完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安装与环境配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue2.0 从零开始_环境搭建操作步骤

    Vue2.0 从零开始_环境搭建操作步骤

    简要:继项目空闲后,开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.什么是VUE? 是一种node.js框架,特点如下: 1.数据绑定 (特性:双向绑定:一旦发生变化,Dom节点实时更新:PS:尽量抛弃JQ,次特点已经可以解决很多特效等问题) 2.组件化(比如:乐高积木一样通过互相引用而组装起来) 二.开发环境 三.环境搭建 1. 包管理器安装 (1) Homebrew安装 (mac 环境,win无法安装)

  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • 手把手搭建安装基于windows的Vue.js运行环境

    手把手搭建安装基于windows的Vue.js运行环境

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击 配置步骤 跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗?   如上述Vue.js不是个全能的框架,因为他

  • Vue项目环境搭建详细总结

    Vue项目环境搭建详细总结

    关于Vue安装的详细步骤总结 安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用

  • 超简单的Vue.js环境搭建教程

    超简单的Vue.js环境搭建教程

    vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

  • vue.js开发环境安装教程

    vue.js开发环境安装教程

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula

  • Vue安装与环境配置步骤详解

    目录 1.安装node.js 2.查看npm 3.安装npm的国内镜像—cnpm 4.安装webpack(一款开源的前端打包工具) 5.查看webpack是否安装成功 6.安装vue-cli脚手架构建工具 7.创建Vue项目 补充:vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法 总结 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打

  • vscode C++开发环境配置步骤详解(教你如何用vscode编写写C++)

    用了一段时间的cb,Devc++,但一直感觉cb的高亮太差,而Devc++使用体验差(尤其是代码补全功能),换过vs2017,但是由于其太大了,卡顿十分明显,所以最终选择了vscode这款轻量级编译器.由于自己在配置c++开发环境时遇到了不少问题,因此特地写了这篇博文,希望能够帮助后来者快速实现c++环境配置. 步骤一:下载vscode 直接进入vscode官网下载即可,要注意选择与自己系统符合的版本. 官网地址:https://code.visualstudio.com/?wt.mc_id=D

  • Python深度学习实战PyQt5安装与环境配置过程详解

    Python深度学习实战PyQt5安装与环境配置过程详解

    目录 1. PyQt5 图形界面开发工具 1.1 从 CLI 到 GUI 1.2 PyQt5 开发工具 2. 安装 PyQt5 和 QtTools pip 安装 PyQt5 pip 安装 QtTools 3. QtDesigner 和 PyUIC 的环境配置 3.1 在 PyCharm 添加 Create Tools 3.2 添加 QtDesigner 工具 3.3 添加 PyUIC 工具 4. QtDesigner 和 PyUIC 的快速入门 4.1 QtDesigner 的启动和入门 新建一

  • 在eclipse中安装Scala环境的步骤详解

    1安装eclipse插件步骤,点击help,选择Eclipse Marketplace 2.输入Scala,点击go 3.选择搜索到的Scala IDE 4.7.x,点击install下载. 4.等待进度条加载完,选择全部,之后点击confirm,之后选择同意 5.等待下载完毕,重启即可 另外 1.导入scala项目后可能报错,会不识别,右键configure--选中Add Scala Nuture,错误就没了 2.运行scala项目时,会出现找不到类或无法加载主类,这是由于eclipse没有编

  • Win10下最新版CLion(2020.1.3)安装及环境配置教程详解

    前言 CLion 是 JetBrains 推出的全新的 C/C++ 跨平台集成开发环境.   没想到,我竟然又安装了CLion !!!∑(ﾟДﾟノ)ノ,不过说实话,JetBrains家的IDE除了吃内存外,确实好用,无论是PyCharm还是IntelliJ IDEA.这还是我二年级学数据结构时用的IDE,比Dev C++好用多的多,虽然考完试我就给它卸载了. 1. 下载安装   下载还是要去官网,建议不要去什么第三方啊之类,官网下载,安全又干净,下载完直接双击安装就是了.   在这里提醒三点:1

  • window系统 nodejs安装opencv环境配置图文详解

    这几天在学习opencv,使用nodejs调用,nodejs可以安装opencv4nodejs 这个包调用opencv, 但是环境配置不容易,安装各种出错,各种坑,网上百度一大堆都是说的不全面,要不就是时间比较久的都没有用,下面是我自己在window上配置成功的方法,分享给大家,大家少踩点坑 第一步 1 ,下载opencv 下载链接 (官网) -- 尽量下载4.1.0版本,其它4点几的版本也能用,但是就是不知道有没有问题. 2 , 下载安装好,目录中不能包含中文,目录自己记住, (我自己是安装在

  • Vue源码之rollup环境搭建步骤详解

    目录 搭建环境 建立rollup配置文件 创建入口文件 打包前准备 打包 测试一下 搭建环境 第一步 进行初始化,在终端输入npm init -y生成package.json文件,可以记住所有开发相关的依赖. 第二步 --在终端输,入安装依赖 npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev 注: 安装rollup打包工具,可能需要编译高级语法所以需要安装babel,安装babel需要在

  • MySQL 5.7 zip版本(zip版)安装配置步骤详解

    MySQL 5.7 zip版本(zip版)安装配置步骤详解

    前言:重装win10顺带整理文件,然而装个MySQL用了我一下午,真是不值,所以写这篇来帮助大家. 一.下载 https://dev.mysql.com/downloads/mysql/ 二.解压缩zip包 三.配置环境变量 (1)配置Path (2)修改mysql-default.ini配置文件 原先的: # These are commonly set, remove the # and set as required.# basedir = .....# datadir = .....#

  • PyCharm配置anaconda环境的步骤详解

    PyCharm是一款很好用很流行的python编辑器.Anaconda是专注于数据分析的Python发行版本,包含了conda.Python等190多个科学包及其依赖项.Anaconda通过管理工具包.开发环境.Python版本,大大简化了你的工作流程. 不仅可以方便地安装.更新.卸载工具包,而且安装时能自动安装相应的依赖包,同时还能使用不同的虚拟环境隔离不同要求的项目.anaconda自带集成开发环境spyder.有些人不喜欢spyder的风格. 个人感觉其提示功能也不及PyCharm.如果能

  • mysql 8.0.22 zip压缩包版(免安装)下载、安装配置步骤详解

    mysql 8.0.22 zip压缩包版(免安装)下载、安装配置步骤详解

    大家好,今天我在学习 MySQL 8.0.22安装及配置遇到了一些问题,特地将我整个安装过程分享出来希望可以帮助不会安装的小伙伴

随机推荐