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

一、安装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.rhkb.cn/news/279032.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML案例-1.标签练习

效果 源码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head&g…

蓝桥杯-Sticks-DFS搜索

题目 样例输出是 6 5 题目中给错了&#xff0c;不知道什么时候会改。 思路 --剪枝&#xff0c;否则时间复杂度和空间复杂度过大&#xff0c;会超时。 --注意有多组测试样例时&#xff0c;需要将bool数组重新赋值为false。 --函数类型不是void&#xff0c;return语句不能省…

Wmware安装Linux(centerOS、Ubuntu版本)

目录 1、安装wmware 2、center版本 3、ubuntu版本 1、安装wmware 此处不做展开。 2、center版本 需要提前下载的文件&#xff1a; 无图形化界面https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/CentOS-7-x86_64-Minimal-2009.iso 有图形化界面https://mirrors.a…

论文阅读——Vision Transformer with Deformable Attention

Vision Transformer with Deformable Attention 多头自注意力公式化为&#xff1a; 第l层transformer模块公式化为&#xff1a; 在Transformer模型中简单地实现DCN是一个non-trivial的问题。在DCN中&#xff0c;特征图上的每个元素都单独学习其偏移&#xff0c;其中HWC特征图上…

爱恩斯坦棋小游戏使用C语言+ege/easyx实现

目录 1、游戏介绍和规则 2、需要用到的头文件 3、这里我也配上一个ege和easyx的下载链接吧&#xff0c;应该下一个就可以 4、运行结果部分展示 5、需要用到的图片要放在代码同一文件夹下 6、代码地址&#xff08;里面有需要用到的图片&#xff09; 1、游戏介绍和规则 规则如…

C++ Qt开发:QUdpSocket网络通信组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QUdpSocket组件实现基于UDP的网络通信…

Windows server 2008 R2 在VMware虚拟机上的安装

Windows server 2008 R2 在VMware虚拟机上的安装 准备工作VMware 新建并配置虚拟机安装和启动Windows server 2008 R2 准备工作 Windows server 2008 R2 ISO镜像的下载&#xff1a;Windows server 2008 R2 ISO VMware 新建并配置虚拟机 第一步&#xff0c;点击新建虚拟机 第…

sqllab第二十关通关笔记

知识点&#xff1a; cookie注入 可以进行url解析错误注入传参位置 get请求post请求cookie传参 输入admin admin进行登录&#xff0c;抓取当前数据包 通过放包发现是一个302跳转的响应包&#xff0c;页面只有一个 I Love Cookies&#xff1b;没什么信息 通过点击页面上方的按钮…

3.Gen<I>Cam文件配置

Gen<I>Cam踩坑指南 我使用的是大恒usb相机&#xff0c;第一步到其官网下载大恒软件安装包,安装完成后图标如图所示&#xff0c;之后连接相机&#xff0c;打开软件&#xff0c;相机显示一切正常。之后查看软件的安装目录如图&#xff0c;发现有GenICam和GenTL两个文件&am…

智能ai文生视频,文生动漫小程序,系统搭建开发

目录 前言&#xff1a; 一、文生动漫系统搭建常规步骤 二、文生漫画是怎么操作的 总结&#xff1a; 前言&#xff1a; 小说推文是继短视频之后的又一个黄金赛道&#xff0c;它最大的特点就是&#xff0c;有一个人观看了你推荐的小说就有一份收益。那么使用系统小说转漫功能…

如何选择合适的数据可视化工具?

如果是入门级的数据可视化工具&#xff0c;使用Excel插件就足够了&#xff01; Excel插件&#xff0c;tusimpleBI 是一款 Excel 图表插件&#xff0c;提供超过120项图表功能&#xff0c;帮助用户制作各种 Excel 所没有的高级图表&#xff0c;轻轻松松一键出图。 它能够制作10…

《计算机视觉中的深度学习》之目标检测算法原理

参考&#xff1a;《计算机视觉中的深度学习》 概述 目标检测的挑战&#xff1a; 减少目标定位的准确度减少背景干扰提高目标定位的准确度 目标检测系统常用评价指标&#xff1a;检测速度和精度 提高精度&#xff1a;有效排除背景&#xff0c;光照和噪声的影响 提高检测速度…

D咖自助咖啡机:颠覆传统,重塑咖啡体验?

在咖啡文化日益蓬勃发展的今天&#xff0c;传统的咖啡消费方式已经不能完全满足人们对于咖啡品质和体验的追求。在这个背景下&#xff0c;商用自助咖啡机以其独特的优势和创新&#xff0c;正在颠覆传统的咖啡消费模式&#xff0c;为咖啡爱好者们打开了全新的咖啡体验之门。D咖今…

多模态:Vary-toy

文章目录 前言一、模型结构二、数据工程总结 前言 Vary的提出让大模型在OCR相关任务的能力有了很大突破&#xff0c;通过提出额外的视觉词汇表模块来弥补单一CLIP编码能力的不足&#xff0c;详情可参考我之前的文章——多模态&#xff1a;Vary。 最近Vary的团队开发了一个更小…

深度学习_卷积

卷积 卷积&#xff08;Convolution&#xff09;是数学和计算机科学中的一个重要概念&#xff0c;特别在信号处理和图像处理中应用广泛。在信号处理领域&#xff0c;卷积是两个函数之间的一种数学操作&#xff0c;它表示两个函数的重叠部分的积分量。 在图像处理中&#xff0c…

数据结构之链式二叉树

当我们初步了解二叉树后 我们就可以进一步去深入学习二叉树了 1.链式二叉树的遍历 这里我们先去定义链式二叉树的结构 分为两个指针 一左一右 他们分别指向左子树和右子树 typedef int BTDataType;typedef struct BinaryTreeNode {BTDataType data;struct BinartTreeNod…

Django templates 存放html目录

模板 一概述 模板由两部分组成&#xff0c;一部分是HTML代码&#xff0c;一部分是逻辑控制代码&#xff08;变量&#xff0c;标签&#xff0c;过滤器&#xff09; 作用&#xff1a;可以通过一些逻辑控制代码减少一些重复的操作更快速的生成HTML代码&#xff0c;并且实现简单的…

php 对接Mintegral汇量海外广告平台收益接口Reporting API

今天对接的是Mintegral广告reporting api接口&#xff0c;拉取广告收益回来自己做统计。记录分享给大家 首先是文档地址,进入到Mintegral后台就能看到文档地址以及参数&#xff1a; 文档地址&#xff1a;https://cdn-adn-https.rayjump.com/cdn-adn/reporting_api/MintegralRA.…

蓝桥杯刷题(十一)

1.卡片 反向思考&#xff0c;看k种卡片可以分给几位同学 代码 n int(input()) k 1 while k*(k1)<2*n:k1 print(k)2.美丽的2 代码 def f(x)->bool:while x:if x%102:return Truex//10return False cnt 0 for i in range(1,2021):if f(i):cnt1 print(cnt)3.单词分析 …

因聚而生 数智有为丨软通动力携子公司鸿湖万联亮相华为中国合作伙伴大会2024

3月14日&#xff0c;以“因聚而生 数智有为”为主题的“华为中国合作伙伴大会2024”在深圳隆重开幕。作为华为的重要合作伙伴和本次大会钻石级&#xff08;最高级&#xff09;合作伙伴&#xff0c;软通动力深度参与本次盛会&#xff0c;携前沿数智化技术成果和与华为的联合解决…