Vue安装及环境配置详细教程

news2025/1/30 16:21:50

一、下载node.js

访问node.js官网:Download | Node.js

选择Windows Installer (.msi)的64-bit进行下载。

在E盘新建一个文件夹,取名为nodejs,也可以在其他盘符新建。

在安装node.js时,点击Change...,进行切换盘符安装。我这里就选择E:\nodejs\,然后点击Next。

这里不需要选择或更换,默认安装,直接Next即可。

不需要勾选,直接Next。后面选择Install进行安装。

二、配置npm相关文件

打开刚才安装node.js的文件夹,在里面新建两个文件夹,分别为node_global和node_cache

安装Win+R,打开命令提示符,输入以下命令,防止报错的话可以以管理员方式运行下面所有的命令。

npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
npm install express -g
npm list -global

前三行命令执行完之后,再次查看node_global和node_cache就可以发现文件夹里面有内容了,已经成功进行了加载。下面是执行命令前后npm list -global下的截图。

这是执行命令后node_global下使用npm list -global

接下来还需要配置淘宝镜像,继续输入以下命令。

npm config set registry=http://registry.npm.taobao.org
npm config list

但默认打开命令提示符的话可能会因为权限不足导致npm安装可能会报错,报错如下。

这个是报的npm安装权限的问题,关于这个问题有两个解决方法。

解决方法一:用管理员身份运行cmd,就可以成功用npm安装

解决方法二:删除.npmrc文件

该文件在:C:\Users(用户)\用户名\.npmrc。一般这种类型的文件都是默认被隐藏,需要打开隐藏查看。这里选择第一种以管理员方式运行,因为删去.npmrc文件之前的配置也会恢复到初始状态,不然就白做了。

重新打开命令提示符,再次输入npm config set registry=http://registry.npm.taobao.org和npm config list命令,可以看到已经成功配置好,不再报错。

三、配置npm相关环境

打开编辑系统环境变量,将用户变量和系统变量都添加上两行内容

E:nodejs\node_global
E:nodejs\node_cache

然后是系统变量新建一个NODE_PATH的变量,存放的值如下。

E:nodejs\node_global\node_modules

四、配置vue相关文件

这里先安装webpack模板,输入以下命令进行安装。

npm install webpack -g
npm install --global webpack-cli

之后再输入以下命令进行安装vue相关文件。

npm install vue -g   //安装vue.js
npm install vue-router -g   //安装vue-router
npm install vue-cli -g   //安装vue脚手架

安装完后的node_global文件夹。

输入vue -V查看vue安装版本,如果成功显示版本号说明安装vue成功。

C:\Windows\System32>vue -V
2.9.6

五、新建并启动vue2项目

接着就是创建vue2项目,输入以下命令。

e:   //最好不要在C盘创建vue项目
cd vue_code
vue init webpack 项目名

当出现# Project initialization finished!说明vue2项目已经创建完毕,再次执行以下命令。

cd ymh
npm run dev

执行后,显示我们创建的项目现在在本地的8080端口,直接复制url到浏览器进行访问就可以查看我们新建的vue2项目。

vue2项目页面显示如下,到这步我们的vue2项目就创建好了。

如果需要终止项目运行,按住ctrl+c,在选择Y进行停止即可。除此启动命令就是上面的npm run dev。

终止批处理操作吗(Y/N)? Y

六、新建并启动vue3项目

新建vue3文件夹,输入以下命令。

e:
cd vue3
npm install @vue/cli

执行npm install @vue/cli后显示的界面。

安装后进入node_modules下的.bin目录,将原本的vue和vue.cmd重命名,命名如下。

新建系统环境变量如下。

然后再将用户变量和系统变量都新添加环境变量%vue_cli3%。

在命令提示符输入vue3 -V,查看目前vue版本。

接着输入以下命令进行创建vue3项目。

e:
cd vue3
vue3 create 项目名

默认选择第一个Vue 3创建,然后直接回车。

这里创建需要等待几分钟,等到出现以下界面,说明已经创建成功。

输入以下命令。

cd ymh3
npm run serve

复制路径到浏览器进行运行。

到这里vue3项目也成功运行好了,和vue2项目页面还有会有些不同的。

vue3项目的运行停止也是同上面的vue2,ctrl+c,然后选择Y就可进行停止退出。希望能对大家有所帮助,也大家希望能多点点赞啥的,在这里先谢谢大家了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1279062.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【UE】UEC++获取屏幕颜色GetPixelFromCursorPosition()

目录 【UE】UE C 获取屏幕颜色GetPixelFromCursorPosition() 一、函数声明与定义 二、函数的调用 三、运行结果 【UE】UE C 获取屏幕颜色GetPixelFromCursorPosition() 一、函数声明与定义 创建一个蓝图方法库方法 GetPixelFromCursorPosition(),并给他指定UF…

循环队列的结构设计和基本操作的实现(初始化,入队,出队,判空,获取长度,清空,销毁)

目录 1.队列的定义 2.循环队列的设计图示 3.循环队列的结构设计 4.循环队列的实现 5.循环队列的总结 1.队列的定义 和栈相反,队列(queue)是一种先进先出(first in first out,缩写为FIFO)的线性表.它只允许在表的一端进行插入,而在另一端删除元素. 在队列中,允许插入的一…

[二分查找]LeetCode2009 :使数组连续的最少操作数

本文涉及的基础知识点 二分查找算法合集 作者推荐 动态规划LeetCode2552:优化了6版的1324模式 题目 给你一个整数数组 nums 。每一次操作中,你可以将 nums 中 任意 一个元素替换成 任意 整数。 如果 nums 满足以下条件,那么它是 连续的 …

【动态规划】LeetCode-91.解码方法

🎈算法那些事专栏说明:这是一个记录刷题日常的专栏,每个文章标题前都会写明这道题使用的算法。专栏每日计划至少更新1道题目,在这立下Flag🚩 🏠个人主页:Jammingpro 📕专栏链接&…

【计算机网络笔记】802.11无线局域网

系列文章目录 什么是计算机网络? 什么是网络协议? 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能(1)——速率、带宽、延迟 计算机网络性能(2)…

【海思SS528 | VO】MPP媒体处理软件V5.0 | VO模块编程总结

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

<DB2>《AIX服务器DB2数据库裸设备表空间扩容方案》

《AIX服务器DB2数据库裸设备表空间扩容方案》 1 表空间状态查看1.1 连接数据库(实例用户操作)1.2 查看表空间剩余(实例用户操作)1.3 查看所属表空间的容器属性(实例用户操作) 2 VG状态和LV状态查看2.1 查看…

Python 爬虫 之scrapy 框架

文章目录 常用的命令开始爬虫请求与响应让控制台只输出想要的信息创建一个py 文件来帮忙运行爬虫 工作原理图实战 常用的命令 Scrapy是一个用于爬取网站数据的Python框架,以下是一些常用的Scrapy命令: 开始的时候 用 cd 进入你想创建scrapy 的文件夹 &a…

EasyExcel写入多个sheet

直接上代码&#xff1a; public static void main(String[] args) {// 设置excel工作簿ExcelWriter excelWriter EasyExcel.write("F:\\excel\\a.xls").build();List<User> userList new ArrayList<>();userList.add(new User("lisi", "…

QT 中使用 QTableView 和 QStandardItemModel 实现将数据导出到Excel 和 从Excel导入到 QTableView 的功能

简介 在Qt中&#xff0c;使用QTableView和QStandardItemModel来实现将数据导出到Excel和从Excel导入到QTableView的功能&#xff0c;而不使用第三方库&#xff08;如QXlsx&#xff09;。 效果 将 QTableView 中的数据导出到Excel //从tableview 导出到 EXcle void MainInterfa…

数据结构第7次练习-图(基础篇)

一&#xff1a;判断题 1-1 答案&#xff1a;T 解析&#xff1a;c到a的最短路径是12214&#xff0c;所以是大于10的 1-2 答案&#xff1a;T 一个连通分量要进行一次广度优先搜索 1-3 答案&#xff1a;F 解析&#xff1a;是存在等于顶点的个数减一的情况&#xff0c;比如三个顶点…

六、ZooKeeper Java API操作

目录 1、引入maven坐标 2、节点的操作 这里操作Zookeeper的JavaAPI使用的是一套zookeeper客户端框架 Curator ,解决了很多Zookeeper客户端非常底层的细节开发工作 。 Curator包含了几个包:

【大数据】HBase 中的列和列族

&#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#xff0c;请给博主一个一键三连 &#x1f680;&#x1f680;&#x1f680; 吧 &#xff08;点赞 &#x1f9e1;、关注 &#x1f49b;、收藏 &#x1f49a;&#xff09;&#xff01;&#xff01;&#xff01;您的支持 &#x…

GODOC命令无效,原因是需要手动安装

在看《GO程序设计语言》这本书&#xff0c;按照其中的内容&#xff0c;想看下GO自带的包的文档。 书中讲&#xff0c;可以直接输入GoDOC命令来打开一个服务器&#xff0c;从而可以用浏览器访问文档库。输入命令后&#xff0c;系统提示找不到该命令。 查了资料后才发现&#xff…

如何使用vue组件

目录 1&#xff1a;组件之间的父子关系 2&#xff1a;使用组件的三个步骤 3&#xff1a;components组件的是私有子组件 4&#xff1a;在main.js文件中使用Vue.component全局注册组件 1&#xff1a;组件之间的父子关系 一&#xff1a;首先封装好的组件是不存在任何的关系的…

国际语音群呼系统的产品优势有哪些?为什么要使用国际语音群呼系统?

一、国际语音群呼系统的产品优势&#xff1a; 1.巨量群呼 支持大容量并发群呼&#xff0c;呼叫不受限制&#xff0c;充裕的线路保障造就百万级平台容量&#xff0c;可以短时间内同时拨打大量电话&#xff0c;让语音快速到达&#xff0c;大大提高发送效率&#xff1b; 2.自主…

【重点】【哈希】128.最长连续序列

题目 思路&#xff1a;https://leetcode.cn/problems/longest-consecutive-sequence/solutions/2362995/javapython3cha-xi-biao-ding-wei-mei-ge-l-xk4c/?envTypestudy-plan-v2&envIdtop-100-liked class Solution {public int longestConsecutive(int[] nums) {Set<…

Spring之RestTemplate详解

Spring之RestTemplate详解 1 RestTemplate1.1 引言1.2 环境配置1.2.1 非Spring环境下使用RestTemplate1.2.2 Spring环境下使用 RestTemplate1.2.3 Spring环境下增加线程号 1.3 API 实践1.3.1 GET请求1.3.1.1 不带参请求1.3.1.2 带参的get请求(使用占位符号传参)1.3.1.3 带参的g…

模式识别与机器学习(七):集成学习

集成学习 1.概念1.1 类型1.2 集成策略1.3 优势 2. 代码实例2.1boosting2.2 bagging2.3 集成 1.概念 集成学习是一种机器学习方法&#xff0c;旨在通过组合多个个体学习器的预测结果来提高整体的预测性能。它通过将多个弱学习器&#xff08;个体学习器&#xff09;组合成一个强学…