超级详细的Vue安装与配置教程

目录
  • 一、下载和安装Vue
  • 二、创建全局安装目录和缓存日志目录
  • 三、配置环境变量
    • 1. 环境变量---用户变量---选中Path---点编辑
    • 2. 环境变量---系统变量---新建
  • 三、安装vue
    • 1. 安装vue.js
    • 2. 安装webpack模板
    • 3. 安装脚手架vue-cli
    • 4. 安装vue-router
  • 四、我的第一个的 vue-cli应用程序
  • 总结

一、下载和安装Vue

官网下载地址Download | Node.js

选择适合自己的版本，推荐LTS，长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

下载好后，双击下载的安装包。

点next

勾选I accept............，点next

这里建议更改为自己想要的的安装目录，然后点next（可以自己先建好安装目录，我这里是提前建好的一个目录：E:\Java\nodejs）

这里有五个选项，有时间可以看一下，就是安装的时候会安装一些组件和npm，同时会添加环境变量，右侧有说明。我们直接点next

这里不用勾选，直接点next

install

finish

安装完成后，检查一下是否安装成功。

打开cmd，输入如下指令。

node -v
npm -v

输出了版本号就说明安装成功了。

安装后的完整目录：

二、创建全局安装目录和缓存日志目录

在我们的安装目录下，创建名为node_cache和node_global的两个文件夹。

打开Dos窗口，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix "你的安装目录\node_global"

npm config set cache "你的安装目录\node_cache"

为了以后下载包快速，修改源为淘宝镜像。（这里修改了，我们就不需要安装cnpm了，因为cnpm就是Node.js淘宝镜像加速器，这里配置了就不需要安装了）

npm config set registry https://registry.npm.taobao.org

查看npm配置修改是否成功

npm config list

同时我们会发现多了个文件：C:\Users\用户名\下的.npmrc文件，可以理解为一个记录当前用户修改信息的配置文件。如果你把这个文件删了，那你刚刚修改的那些参数全没有了，回归默认配置。

三、配置环境变量

在安装过程中，自动配置了两个环境变量一个是环境变量---用户变量---Path里面的C:\Users\你的用户名\AppData\Roaming\npm另一个是环境变量---系统变量---Path里面的软件安装目录，我们需要增加和修改一下。

1. 环境变量---用户变量---选中Path---点编辑

将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 你的安装目录\node_global

2. 环境变量---系统变量---新建

变量名：NODE_PATH

变量值：你的安装目录\node_global\node_modules

注：这里的node_modules目录是还没有的，但是我们等会把模块安装到全局目录下就会自动生成这个文件夹。

记得在系统变量---Path添加上%NODE_PATH%

三、安装vue

1. 安装vue.js

npm install vue -g

其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。

如果出现了这个问题，是因为当前用户没有这个权限。

网上有些方法是删除C:\Users\用户名\下的.npmrc文件，万万不可这样，因为那个文件删除了，我们前面修改的全局模块目录和缓存目录配置就没了！！！到时候vue包就下载到C:\Users\你的用户名\AppData\Roaming\npm去了，也就是默认的地方去了，那我们前面修改就没意义了。

正确的打开方式是，用管理员身份运行呗！

Win + s 搜索 “命令提示符”，右键以管理员身份运行。

npm install vue -g

2. 安装webpack模板

npm install webpack -g

此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

npm install webpack-cli -g

输入 webpack -v，能输出版本号就说明都安装好了。

3. 安装脚手架vue-cli

npm install vue-cli -g

输入vue --version，能输出版本号就说明安装好了。

4. 安装vue-router

npm install vue-router -g

都弄好了我们打开我们自定义的全局模块目录下的node_modules文件夹，会发现安装的模块都统一在这里。

四、我的第一个的 vue-cli应用程序

1. 创建项目（最好在cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在C:\Users\用户名\，也可以直接在想要的项目路径下输入cmd）可能会出现权限问题，所以我们还是以管理员运行cmd窗口。

2.  创建一个基于webpack模板的vue应用程序

vue init webpack 项目名

根据自己的需求来操作。

  • 项目名是？回车
  • 项目描述？回车
  • 作者？回车
  • 是否安装编译器 回车
  • 是否安装vue-router y 回车
  • 是否使用ESLint做代码检查 n 回车
  • 是否安装单元测试工具 n 回车
  • 单元测试相关 n 回车
  • 创建完成后直接初始化 n 回车

因为没有自动初始化，我们按照代码提示手动初始化

cd myvue
npm run dev

访问网址：成功！

总结

到此这篇关于Vue安装与配置的文章就介绍到这了,更多相关Vue安装与配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue.js从安装到搭建过程详解

    vue.js从安装到搭建过程详解

    最初的时候用vue是直接下载相关文件 按照以前的方法来操作的 后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像 打开命令行 输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹 用于存放项目文件 cd 进入你

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

    vue.js开发环境安装教程

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

  • 值得收藏的vuejs安装教程

    值得收藏的vuejs安装教程

    本文为大家分享了vuejs安装教程,供大家参考,具体内容如下 1.安装nodejs,自带npm环境. 地址:https://nodejs.org/en/download/,Node.js 历史版本下载地址:https://nodejs.org/dist/ 可自行选择适合自己操作系统的版本. 安装过程参见:安装配置 2.安装淘宝镜像. 因国内访问国外链接速度过慢,建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度. 打开cmd直接输入:npm install -g cnpm –reg

  • vue安装遇到的5个报错及解决方法

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 5个报错 ①:若使用vue -V查询是否安装vue时提示没有找到指令,可能是你没有安装vue-cli脚手架(vue-cli可快速创建vue项目)          ②:vue安装淘宝镜像时报错,提示无效的配置,必须是完整合法的http地址,原因是我在url前面加了1个空格,这里不要有空格 注:安装淘宝镜像后,需要用到npm的地方都可以用cnpm替换,但建议安装模块和插件用cnpm,打包和启动vue用npm (cnpm是国

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • Vue项目安装插件并保存

    Vue项目安装插件并保存

    比如安装jszip插件的命令行如下: npm install jszip --save-dev 只有执行了--save-dev 才会将当前安装的插件版本保存在package.json文件中 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • 图文详解vue框架安装步骤

    vue安装 首先第一步,安装javascript运行环境node.js,根据你系统是32位或64位安装文件如下图. 第二步,安装Nodejs下的包管理器,打开windows命令窗口,输入"npm install -g cnpm --registry=https://registry.npm.taobao.org"命令安装.如下图所示. 第三步,安装vue-cli脚手架构建工具,在windows命令窗口输入"cnpm install -g vue-cli",如下图所示

  • vue.js的安装方法

    vue.js的安装方法

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

  • 超级详细的Vue安装与配置教程

    超级详细的Vue安装与配置教程

    目录 一.下载和安装Vue 二.创建全局安装目录和缓存日志目录 三.配置环境变量 1. 环境变量---用户变量---选中Path---点编辑 2. 环境变量---系统变量---新建 三.安装vue 1. 安装vue.js 2. 安装webpack模板 3. 安装脚手架vue-cli 4. 安装vue-router 四.我的第一个的 vue-cli应用程序 总结 一.下载和安装Vue 官网下载地址Download | Node.js 选择适合自己的版本,推荐LTS,长久稳定版本. 我这里选择的是W

  • mysql5.7安装及配置教程

    mysql5.7安装及配置教程

    本文为大家分享了mysql安装配置教程,供大家参考,具体内容如下 一.配置MySQL数据库 1.解压绿色版mysql,并改名为mysql5.7,如下图 对比一下下图5.6以前的版本,少data目录(存放数据)和my-default.ini文件(配置信息) 二.安装服务 1.运行cmd(管理员版本,否则没有权限),如下图 2.对于新版mysql5.7没有了data目录,我们需要运行命令创建 3.运行命令mysqld –install安装服务,如下图: 如果不需要mysql里,只需要运行mysqld

  • vue+eslint+vscode配置教程

    vue+eslint+vscode配置教程

    package.json文件所需要的eslint包 "scripts": { "lint": "eslint --ext .js,.vue src", }, "devDependencies": { "babel-eslint": "^8.2.1", "eslint": "^4.15.0", "eslint-config-airbnb-b

  • CentOS7 64位下MySQL5.7安装与配置教程

    安装环境:CentOS7 64位 MINI版,安装MySQL5.7 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo/yum/ # 下载mysql源安装包 shell> wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm # 安装mysql源 shell> yum localinstall mysql57-commun

  • Windows下mysql-5.7.28下载、安装、配置教程图文详解

    最近需要更换mysql数据库的版本,写一篇文章,记录一下 一.下载mysql数据库 mysql的下载共有两种,一种是zip压缩文件,另一种是msi安装程序 官方5.7版本zip压缩文件下载页面 官方5.7版本msi安装程序下载页面 我这里选择5.7.28-Windows64位 点击左下角直接开始下载 使用迅雷或者IDM等下载器,下载会快一点 下载完成之后的两种文件 二.安装mysql数据库 我这里使用zip压缩文件安装,这是免安装的,配置的内容多一点 1.解压缩安装文件 注意:解压缩的路径里面不

  • 2022最新版MySQL 8.0.30 安装及配置教程(小白入门)

    2022最新版MySQL 8.0.30 安装及配置教程(小白入门)

    目录 MySQL 8.0.30官网下载安装教程 第一步(官网下载安装) 第二步(执行安装) 第三步(配置环境变量) 第四步(检验安装) MySQL 8.0.30官网下载安装教程 此文面向于学习mysql数据库的小白,仅进行了详细的基本配置. 第一步(官网下载安装) 官网下载安装助手,这里使用的是推荐的Installer————————————————————1.选择相应的操作系统,点击Go to Download Page,跳转到下载界面2.点击下载 第二步(执行安装) 打开下载的install

  • Python selenium模块的安装和配置教程

    Python selenium模块的安装和配置教程

    目录 一.selenium的安装以及简单应用 二.selenium的简单使用 三.selenium提取数据 1.driver对象常用的属性和方法 2.driver对象定位标签元素获取标签对象的方法 3.标签对象提取文本内容和属性值 四.selenium无头模式 一.selenium的安装以及简单应用 我们以谷歌浏览器的chromedriver为例 1.在Python虚拟环境中安装selenium模块 pip/pip3 install selenium 2.下载版本符合的webdriver 以ch

  • Linux 下FTP的安装与配置教程详解

    Linux 下FTP的安装与配置教程详解

    0.安装ftp的前置条件是关掉SElinux # vi /etc/selinux/config 修改 SELINUX=" disabled " ,重启服务器.若相同,则跳过此步骤. 1. 可先查看是否安装过vsftp # rpm -qa | grep vsftpd 则代表已经安装.可直接跳过步骤2 2 .安装 vsftp # yum install vsftp* Is this ok [y/N]: y 代表安装完成. 3. 对vsftp 进行配置 # /etc/vsftpd/vsftp

  • Centos7.3下jre1.8安装和配置教程

    Centos7.3下jre1.8安装和配置教程

    本文实例为大家分享了jre1.8安装和配置教程,供大家参考,具体内容如下 第一步:下载jre 我们去oracle官方下载下jre http://www.oracle.com/technetwork/java/javase/downloads/server-jre8-downloads-2133154.html 下载 server jre 这里提供下百度云下载地址:链接: https://pan.baidu.com/s/1pLypSKz 密码: nd87 第二步:上传jre到/home/data/

  • win10 mysql 5.6.35 winx64免安装版配置教程

    win10 mysql 5.6.35 winx64免安装版配置教程

    win10下mysql 5.6.35 winx64免安装版配置教程,具体内容如下 1.解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录下.我放在C:\software\mysql-5.6.35-winx64\mysql_master 添加环境变量 将MySQL路径配置到path路径 2.编辑解压后文件my-default.ini [client] port=3306 default-character-set=utf8 [mysqld] #设置MySQL目录 basedir=C:

随机推荐