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了 

 

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

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

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

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

相关文章

vue学习日记14:工程化开发脚手架Vue CLI

一、概念 二、安装 1.全局安装&查看版本 注意启动cmd输入命令 要以管理员运行哦 安装了一次就行以后不用再创建了 yarn global addvue/cli vue --version 显示了版本号即可 2.创建项目架子 创建项目的路径在哪 项目就在哪 项目名字不能用中文 vue create project-n…

命令提示符——CMD基础操作介绍

💞💞 前言 hello hello~ ,这里是大耳朵土土垚~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页&#x…

初识C++(一)

目录 一、什么是C 二、关键字: 三、命名空间 : 1. C语言存在的问题: 2. namespace关键字: 3. 注意点: 4.使用命名空间分为三种: 四、输入输出: 五、缺省函数: 1. 什么是缺省…

PTA L2-026 小字辈

本题给定一个庞大家族的家谱,要请你给出最小一辈的名单。 输入格式: 输入在第一行给出家族人口总数 N(不超过 100 000 的正整数) —— 简单起见,我们把家族成员从 1 到 N 编号。随后第二行给出 N 个编号,…

java网络原理(三)----三次握手四次挥手

三次握手 三次握手是建立连接的过程,四次挥手是断开连接的过程,三次握手发生在socket.accept()之前。 客户端和服务器尝试建立连接的时候服务器就会和客户端进行一系列的数据交换称为握手,这个过程建立完了后,连接就好了。 A和B…

2024不起眼的“致富”野路子,不想打工了,做做这些暴利创业项目。2024个人创业做什么项目好;最适合白手起家的创业项目

经济大环境差,并不代表就没有机会。相反,主流经济不好正是另一些人所看重的千载难逢的机会。就像股票市场一样,有人靠做多赚钱,有人靠做空赚钱。下面我们就来分析一下哪些行业会在这个时候崛起。 首先二手行业会迅速崛起&#xff…

东芝复印机3115 日志清除

以管理员登录,默认的用户名是admin,密码123456. 点日志中的导出日志,逐个清除日志。

陪诊APP开发价格的价格是多少

随着社会的发展,人们的生活节奏越来越快,对于医疗服务的需求也在不断增加。特别是在老年人口逐渐增多的今天,陪诊服务成为越来越多人关注的焦点。那么,陪诊APP的开发价格需要多少钱呢?本文将从以下几个方面进行详细分析…

Android 地图SDK 去除缩放

问题 Android 地图SDK 去除缩放 详细问题 笔者进行Android 项目开发,接入高德地图SDK。但是默认在地图右下角有高德地图缩放按钮,现需要去除该按钮 预期效果 解决方案 mMapView.getMap().getUiSettings().setZoomControlsEnabled(false);代码含义解…

视频素材库哪里最好

哈哈,大家好!今天我要给大家带来的是视频素材库哪里最好的搞笑推荐,让你的视频创作更加轻松有趣! 视频素材库哪里最好?首先来说说蛙学网这个网站简直就是中国风视频素材的宝库!如果你想让你的视频有点中国味…

QT常见数据类型和类的使用

qDebug //基本打印 qDebug() << "Hello" << 123;//类似printf的打印int num 20;char str[20]"hello world";qDebug("如果只写在括号里&#xff0c;是不需要QDebug头文件的 %d %s", num, str);//打印十六进制数组 #define HexPrint…

紧急声明!致歉

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 致歉 首先&#xff0c;给大家说声抱歉&#xff01; 最近mxxWechatBot的服务器一直不稳定&#xff0c;有很多原因&#xff0c; 比如说服务器到期了&#xff0c;讲服务器临时切换到家里&am…

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

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

基于python+vue 的一加剧场管理系统的设计与实现flask-django-nodejs-php

二十一世纪我们的社会进入了信息时代&#xff0c;信息管理系统的建立&#xff0c;大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多&#xff0c;而在线管理系统刚好能满足这些需求&#xff0c;在线管理系统突破了传统管理方式的局限性。于是本文针对这一需求设…

测试开发工程师(QA)职业到底需要干些什么?part1:移动端QA

概述 移动端QA测试开发工作主要涉及对移动应用程序进行质量保证和测试的开发工作。以下是移动端QA测试开发人员的主要职责和工作内容&#xff1a; 测试计划和策略制定&#xff1a;参与制定移动应用程序的测试计划和策略&#xff0c;确定测试范围、测试目标和测试方法。考虑到…

牛客小白月赛89(A~C)

小白赛怎么这么难打&#xff0c;是什么小白&#xff0c;我的世界小白吗。 A. 伊甸之花 给你一个数组 a&#xff0c;问你是否找出一个 不等于 a 的数组 b&#xff0c;满足 其中数值都要在 [1,m] 的范围内 直接在 a 数组上修改&#xff0c;可以发现如果改了 a[1],a[2]&#xff…

Oh My Bug || PHPmyAdmin导入csv文件时,502报错

解决&#xff1a; 在宝塔面板文件配置中加入一下代码 location / { proxy_pass http://localhost:888; } location /backend-api { rewrite ^/backend-api(.*)$ $1 break; proxy_pass http://你的ip地址; }

DP:斐波那契数列模型

创作不易&#xff0c;感谢三连支持 &#xff01; 斐波那契数列用于一维探索的单峰函数之中&#xff0c;用于求解最优值的方法。其主要优势为&#xff0c;在第一次迭代的时候求解两个函数值&#xff0c;之后每次迭代只需求解一次 。 一、第N个泰波那契数 . - 力扣&#xff08;…

简介:iframe 沙箱+WebComponent 容器

前言 HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。 每个嵌入的浏览上下文&#xff08;embedded browsing context&#xff09;都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称…

【史上最全面arduino esp32教程】SPI层次结构SPI协议与SPI控制器结构

文章目录 前言一、SPI 程序层次1.1 硬件原理图1.2 硬件框图1.3 软件层次 二、SPI协议2.1 硬件连线2.2 如何访问SPI设备2.3 SPI 框图 总结 前言 欢迎阅读本篇文章&#xff0c;将为您介绍Arduino ESP32上的SPI通信协议。SPI&#xff08;Serial Peripheral Interface&#xff09;…