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

一、下载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就可进行停止退出。希望能对大家有所帮助,也大家希望能多点点赞啥的,在这里先谢谢大家了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#,数值计算——插值和外推,三次样条插值(Spline_interp)的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 三次样条插值 /// Cubic Spline Interpolation /// Cubic spline interpolation object. Construct with x and y vectors, and /// (optionally) values of the first…

Basemap地图绘制_Python数据分析与可视化

Basemap地图绘制 安装和使用地图投影地图背景在地图上画数据 Basemap是Matplotlib的一个子包&#xff0c;负责地图绘制。在数据可视化过程中&#xff0c;我们常需要将数据在地图上画出来。 比如说我们在地图上画出城市人口&#xff0c;飞机航线&#xff0c;军事基地&#xff0c…

mysql服务日志打印,时区不对的问题

查资料发现 原来日志的时区和服务器的时区不是一个参数控制的 log_timestamps 单独控制日志的时区 show global variables like log_timestamps;看到默认的是UTC&#xff0c;只需要修改为和系统一致就行 #数据库中直接修改 set global log_timestampsSYSTEM;#配置文件my.cn…

数据结构之哈希表

数据结构之哈希表 文章目录 数据结构之哈希表一、哈希概念二、哈希冲突三、哈希函数常见哈希函数 四、哈希冲突解决闭散列闭散列的思考线性探测线性探测的实现 二次探测 开散列开散列概念开散列的思考开散列实现 五、开散列与闭散列比较 一、哈希概念 顺序结构以及平衡树中&am…

【vSphere 8 自签名 VMCA 证书】企业 CA 签名证书替换 vSphere VMCA CA 证书Ⅱ—— 创建和添加证书模板

目录 3. 使用 Microsoft 证书颁发机构创建 VMCA 证书模板3.1 打开 Certificate Template Console3.2 复制模板修改 Compatibility 选项卡修改 General 选项卡修改 Extensions 选项卡确认新模板 4. 将新模板添加到证书模板4.1 打开 Certificate Console4.2 创建证书模板 关联博文…

C++作业2

自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() 代码&#xff1a…

网页开发 CSS

目录 CSS 概述 CSS 引入方式 CSS 选择器 基本选择器 组合选择器 伪类选择器 样式继承 选择器优先级 CSS 属性操作 文本属性 背景属性 边框属性 列表属性 dispaly属性 盒子模型&#xff08;重点&#xff09; float属性&#xff08;重点&#xff09; CSS 概述 C…

计算机毕业设计 基于Web的铁路订票管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

YOLOv3 学习笔记

文章目录 前言一、YOLOv3贡献和改进二、YOLOv3的核心概念2.1 基础理论和工作原理2.2 YOLOv3对比YOLOv1和YOLOv22.2.1 YOLOv12.2.2 YOLOv2/YOLO90002.2.3 YOLOv3 三、YOLOv3的网络架构3.1 Darknet-533.2 残差连接3.3 多尺度预测3.4 锚框3.5 类别预测和对象检测3.6 上采样和特征融…

【ArcGIS Pro微课1000例】0039:制作全球任意经纬网的两种方式

本文讲解在ArcGIS Pro中制作全球任意经纬网的两种方式。 文章目录 一、生成全球经纬网矢量1. 新建地图加载数据2. 创建经纬网矢量数据二、布局生成经纬网1. 新建布局2. 创建地图框2. 创建经纬网一、生成全球经纬网矢量 以1:100万比例尺地图分幅为例,创建经差6、维差4的经纬网…

CMake构建工具

文章目录 CMake构建工具1.概念2.mk文件3.CmakeList4.预编译 CMake构建工具 1.概念 Android构建原始库的工具&#xff0c;对mk构建工具封装&#xff0c;还是makefile。 加载lib库 2.mk文件 //call调用test-dir这个方法&#xff0c;返回mk文件的路径&#xff0c;LOCAL_PATH这…

Hdoop学习笔记(HDP)-Part.19 安装Kafka

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

004、简单页面-基础组件

之——基础组件 目录 之——基础组件 杂谈 正文 1.Image 1.0 数据源 1.1 缩放 1.2 大小 1.3 网络图片 2.Text 2.0 数据源 2.1 大小 2.2 粗细 2.3 颜色 2.5 样式字体 2.6 基础示例 2.7 对齐 2.8 省略 2.9 划线 3.TextInput 3.1 输入类型 3.2 提示文…

TwinCAT3一个PLC设备里多个程序工程之间通讯

目录 1、创建TwinCAT3工程&#xff0c;再分别创建两个PLC程序工程 2、PLC1工程中添加如下代码&#xff0c;然后编译重新生成PLC1工程 3、PLC2工程中添加如下代码&#xff0c;然后编译重新生成PLC2工程 4、变量关联 5、一个PLC运行多个PLC工程设置 7、工程下载链接 1、创建…

智能优化算法应用:基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.乌燕鸥算法4.实验参数设定5.算法结果6.参考文献7.…

SATA模块物理层OOB信号分析总结(三)

目录 一、简介二、总体解析2.1 OOB作用2.2 OOB信号的组成2.3 总体phy link过程2.4 整体PHY LINK Trace2.5 PHY LINK状态查询 三、其他相关链接1、SATA模块之HBA卡开发总结&#xff08;一&#xff09;2、SATA信息传输FIS结构总结&#xff08;二&#xff09;3、PCIe物理层总结-PC…

1-算法基础-编程基础

1.基本数据类型 char ch A; char s[] "hello";2.const定义常量 const int N 1e5 9;//const定义常量&#xff0c;后续不可被修改 int a[N];3.万能头文件 C11等可用 #include<bits/stdc.h> using namespace std;4.typedef typedef long long kk; kk a[20…

DQN原理及PyTorch实现【强化学习】

NSDT工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 欢迎来到我们的强化学习系列的第三部分。 在上两篇博客中&#xff0c;我们介绍了强化学习中…

C++算法入门练习——最短路径-多路径

现有一个共n个顶点&#xff08;代表城市&#xff09;、m条边&#xff08;代表道路&#xff09;的无向图&#xff08;假设顶点编号为从0到n-1&#xff09;&#xff0c;每条边有各自的边权&#xff0c;代表两个城市之间的距离。求从s号城市出发到达t号城市的最短路径条数和最短路…

Gitee 之初体验(上)

我们在项目开发或者自己学习的时候&#xff0c;总会存在这样的问题&#xff1a; 在一台电脑上编写完代码&#xff0c;想要再另外一台电脑上再去写&#xff0c;再或者和其他人一起协作等等场合&#xff0c;代码传来传去很麻烦。 这个时候&#xff0c;我们就可以去使用代码管理工…