Vue2(七):超详细vue开发环境搭建(win7),nodejs下载与安装,安装淘宝镜像(报错已解决),配置脚手架

news2024/11/13 8:55:18

一、安装node.js

本来想粗略写一下的,但是搭建脚手架的时候,遇到了很多问题,浪费快两天时间,记录一下自己的解决办法希望对你们有帮助!

1.下载nodejs

安装包下载链接【CNPM Binaries Mirror】

下载我划线的这个:

 2.安装nodejs

下载好之后,双击安装,点击next,到安装到哪个目录的时候,最好安装到自己指定的文件夹中。

安装完成后,在cmd命令窗口(win+R按下回车显示出cmd命令窗口)输入以下命令查看安装版本情况

【node -v】查看安装的node版本

【npm -v】查看安装的npm版本,node 安装好默认npm也被安装了

3.nodejs环境配置

(1)在你安装nodejs文件夹目录下,新建两个文件夹:

分别是:node_cache和node_global

(2)创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix "D:\program\node\node_global"
npm config set cache "D:\program\node\node_cache"

(3)关闭cmd窗口,【我的电脑】-右键-【属性】-【高级系统设置】-【高级】-【环境变量】

  •  新建【系统变量】,变量名为NODE_PATH,变量值为node_modules所在路径。
  • 我的路径是:E:\APP\nodejs\node_modules
  • 将【用户变量】下的【Path】修改为node_global所在路径。
  • 我的是E:\APP\nodejs\node_global

二、基于node.js安装cnpm(淘宝镜像) 

1.以管理员身份运行cmd,输入淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.解决cnpm报错:The operation was rejected by your operating system

但是我发现我的一直报错,报错内容如下,如未报错,请跳过此步骤: 

解决办法: 

将这句命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

改为指定版本,重新以管理员身份打开cmd,运行即可

npm install -g cnpm@7.1.1 --registry=https://registry.npm.taobao.org

过程可能很慢,如果卡住,按下回车即可 

 三、安装Vue

cnpm install vue -g

四、安装脚手架vue-cli

cnpm install vue-cli -g

五、项目创建 

可以创建指定文件夹,在这下面创建你的项目,比如我的就是创建了一个vue_test文件夹,然后:

在这个文件夹路径前面输入cmd+空格 回车,就可以在这个路径下面创建你的项目了

1、在cmd命令窗口输入

vue init webpack (项目名称)testone

稍微等一会,结果如下:

 

出现这样的结果后可以发现你的文件夹下面自动生成了一个testone文件夹:

 

2、切换到刚刚创建的目录下

继续在刚刚的cmd窗口输入:

cd testone(你的项目名称)

此时就完成切换了: 

六、项目运行

在刚刚的目录下面,输入:

npm run dev

张天禹 老师输入的是npm run serve,但是我发现我输入之后报错,后来用上面提示的这个就OK了

 

之后就加载一大堆,但是出现这个端口号就OK了 

 

这个网址打开后就是这样的页面: 

如果还有什么问题,可以在评论区下面交流 

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

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

相关文章

Linux(openEuler)部署SpringBoot前后端分离项目(Nginx负载均衡)

假如数据库在本地,没有放在Linux中 1.先把数据库中root的主机改成% 2.项目中的数据库链接配置换成本机ip 3.打包 4.把打包好的jar包放到Linux中 一般把jar包放到opt下 5.把前端部分拷贝到Linux的nginx中 5.1在package.json中修改build的值为图中这样 5.2同时由于在…

外包干了10天,技术倒退明显

先说情况,大专毕业,18年通过校招进入湖南某软件公司,干了接近6年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

SpringMVC 简介及入门级的快速搭建详细步骤

MVC 回顾 MVC,即Model-View-Controller(模型-视图-控制器)设计模式,是一种广泛应用于软件工程中,特别是Web应用开发中的架构模式。它将应用程序分为三个核心组件: Model(模型)&#…

经纪人资格认证考试资料

一、名词: 1. 自然人、个体工商户、演出经纪人、演出经纪单位、演出市场主体、演出市场客体、 2. 营业执照、行政许可证 3. 居间、代理、行纪:演出经纪机构、个体经纪人分别有哪些权限? 4. 自行举办:文艺表演团体、个体演员&am…

Shell脚本学习-if循环

最小化的if语句 无实际用途 if [ ] ;then echo fi 脚本解释 if 判断 [ ] 里面的条件是否成立 后面跟then,代表条件成立 如果在一行则使用分号隔离(;) 如果不在一行使用则直接在下一行驶入then即可。 如果条件成立则输出echo 后面…

罐头鱼AI视频矩阵运营获客系统|视频批量混剪

智能化运营,助力视频营销——AI视频矩阵运营系统全面解析 随着数字营销时代的到来,视频已成为各行业推广和营销的重要手段之一。为了更好地管理和发布视频内容,我们推出了全新的AI视频矩阵运营系统,集成了多项智能功能&#xff0c…

张桥社区组织“平安大讲堂”企业应急救护及消防主题培训

为进一步加强园区商户的平安生产意识,提升应急救护能力,在襄阳市民政局的指导和支持下,襄阳市和时代社会工作服务中心依托襄阳市“光明谷”社会组织助力共同缔造项目,联合樊城区红十字会、樊城区点爱志愿者协会在张桥社区“美世界…

第十二届蓝桥杯省赛CC++ 研究生组

十二届省赛题 第十二届蓝桥杯省赛C&C 研究生组-卡片 第十二届蓝桥杯省赛C&C 研究生组-直线 第十二届蓝桥杯省赛C&C 研究生组-货物摆放 第十二届蓝桥杯省赛C&C 研究生组-路径 第十二届蓝桥杯省赛C&C 研究生组-时间显示 第十二届蓝桥杯省赛C&C 研究生组…

Unity---Lua语言

Lua Binaries Download 13.2 逻辑热更新——Lua1-3_哔哩哔哩_bilibili nil表示空 只有false和nil为false,其他值都为true ..连接两个字符串

基于Springboot的疫情物资管理系统(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的疫情物资管理系统(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构…

阿里云2核4G云服务器ECS和轻量应用服务器价格表

阿里云2核4G服务器租用优惠价格,轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月,活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图: 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…

TikTok新号必须做的3件事

根据互联网安全公司Cloudflare的2023年互联网流量回顾,TikTok超过谷歌成为2023年最受欢迎的网站。这意味着现在有大量用户在使用TikTok,在TikTok平台上,你可能会突然出名,可能会突然让您的营销获得回报。 但如果你是刚加入TikTok用…

【保姆级教程】YOLOv8_Track多目标跟踪,快速运行

一、YOLOV8环境准备 1.1 下载安装最新的YOLOv8代码 仓库地址: https://github.com/ultralytics/ultralytics1.2 配置环境 pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple二、下载测试视频,预训练权重 测试视频 链接&am…

【Review+预测】测试架构演进的曲折之路

文章目录 前言 一、“原始”阶段 二、“小打小闹”阶段 三、“小米加步枪”阶段 四、“摩托化部队”阶段 五、“骑兵连”阶段 六、“海军陆战队”阶段 七、“社区型组织”阶段 前言 近期公司的测试团队需要重新组织安排,本着谦虚谨慎的态度,我从…

人像抠图HumanSeg——基于大规模电话会议视频数据集的连接感知人像分割

前言 人像抠图将图像中的人物与背景进行像素级别的区分的技术。通过人像分割,可以实现诸如背景虚化、弹幕穿人等各种有趣的功能,为视频通话和影音观看提供更加优质和丰富的体验。由于广泛部署到Web、手机和边缘设备,肖像分割在兼顾分割精度的…

java动态规划学习笔记

学习笔记目录,这里记录个大纲,详情点链接 背包问题 01背包问题综述 01背包问题(二维数组)https://blog.csdn.net/m0_73065928/article/details/136794406?spm1001.2014.3001.5501 01背包问题(滚动数组&#xff09…

KubeSphere的基本使用操作

KubeSphere的基本使用操作 基本使用用户角色创建企业空间创建项目 创建应用创建密钥创建MySQL密钥创建WordPress密钥 创建存储卷创建MySQL存储卷创建Wordpress存储卷 添加组件服务类型添加MySQL组件添加WordPress组件 访问Wordpress 基本使用 用户角色 KubeSphere 中的权限控制…

Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用

参考https://juejin.cn/post/7152774411571953677,自己简洁化了一部分 1.安装pinia依赖 yarn add pinia 创建pini实例 根目录创建store文件夹,然后创建index.js import { createPinia } from piniaconst pinia createPinia()export default pinia …

C语言例3-26:逗号表达式的例子

逗号表达式&#xff1a; 表达式1&#xff0c;表达式2 表达式可以是算术表达式、关系表达式、逻辑表达式、条件表达式、赋值表达式和逗号表达式。 代码如下&#xff1a; #include<stdio.h> int main(void) {int i1,j;float f2.0f;char chb; //b(98)// printf(&…

【论文精读】DALLE3:Improving Image Generation with Better Captions 通过更好的文本标注改进图像生成

文章目录 一、文章概览二、数据重标注&#xff08;一&#xff09;现在训练数据的文本标注主要存在的问题&#xff08;二&#xff09;创建图像标注器&#xff08;三&#xff09;微调图像标注器 三、评估重新标注的数据集&#xff08;一&#xff09;混合合成标注和真实标注&#…