windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题

这篇具有很好参考价值的文章主要介绍了windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。



前言

记录vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题

先说依赖版本:
vue/cli 3.12.0
node14.21.3
npm6.14.18
注意: node和npm需要版本匹配,也就是下载node安装包,就会自带安装npm,不可制定升级某个版本npm;
否则会导致脚手架创建项目失败vue项目启动失败npm下载依赖不支持
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配


具体步骤和问题如下:

一、安装vue/cli脚手架

1.安装指定版本脚手架,我是用的3.12.0版本

按住shift——鼠标右键,就可以打开Windows PowerShell
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

npm install -g @vue/cli@3.12.0

2.查看版本是否安装成功,成功有版本号

安装完成后查看 使用过 vue -V 查看vue/cli版本号
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

2.1问题:安装失败

2.1.1问题:如果查看找不到版本,使用命令行创建项目vue create my-demo也无效
或者在用脚手架搭建vue项目时,提示:
无法加载文件C:\Users\1111111\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本这是你笔记本禁止运行脚本
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

2.2解决方案

2.2.1 需要用管理员方式打开Windows PowerShellwindows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

2.2.2输入set-ExecutionPolicy RemoteSigned,然后选择 Y 回车
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配
然后在查看vue -V版本号就正常了,也可以直接脚手架创建项目了。

2.3 安装成功

至此,vue/cli脚手架就安装成功了

二、安装指定node和npm

node中文官网

1.为什么需要安装指定node和npm版本,同时匹配vue/cli版本?

如果node和npm版本不匹配,会导致两个问题:

1.1vue/cli创建项目时候,报错npm WARN npm npm does not support Node. js v14. 21.3,npm支不支持node不匹配
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

1.2vue项目,npm install 安装依赖也会报错,下载不了依赖

如果npm和vue/cli版本不匹配,会导致一个问题:

1.3vue create my-demo创建vue项目时候失败,报错如下:
command failed: npm install --loglevel error
npm ERR!Invalid dependency type requested: alias

如果node和vue/cli版本不匹配在启动vue项目时候,如果失败会提醒你需要哪个node版本),会导致一个问题:

1.4vue项目启动运行失败,报错:
ERROR You are using Node v10.15.3, but vue-cli-service reguires Node ^12.0.0= 14.0.0. Please upgrade your Node version .
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

2.如何安装node和npm匹配的版本?(node14.21.3 npm6.14.18)

直接去官网下载完成node的zip包,解压后包含自带npm包,这就是匹配版本。替换你来node安装的文件即可。

3.1进入node中文官网,点击其他下载

node中文官网windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.2先前所有已发布版本

windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.3找到自己需要的版本

这里就是自带npm,是相匹配的版本。windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.4下载对应的zip安装包

windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.5解压里面就有node和npm

windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.6使用cmd,命令输入where node,找到你原来node安装地址

windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.7复制上方node.js地址,选中所有删除

windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.8将解压的新node所有文件复制到原node文件夹

注意:复制前,需要关闭所有涉及node的运行文件,例如你的项目、vscode、PowerShell等
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.9 需要管理员权限

其实就是需要你先关闭所有的node文件,然后点击继续,就会复制进去文件;但是有可能只复制了部分文件,需要一直点击继续,直到全部复制完成。
windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题,vue,git和eslint和环境、工具等配置,yarn安装,vue.js,npm,安装vue/cli,安装指定node,安装指定npm,npm和node不匹配

3.10 至此node和npm完成安装


总结

一定要保证,node和npm版本匹配,然后和vue/cli也匹配(在启动vue项目时候,如果失败会提醒你需要哪个node版本)文章来源地址https://www.toymoban.com/news/detail-607401.html

到了这里,关于windows系统安装指定的vue/cli、node和npm;vue/cli脚手架搭建项目所涉及的vue/cli、node、npm依赖版本等问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 安装Nodejs、NPM、Vue脚手架详细教程

    查看自己电脑是否安装nodejs 我这里已经下载过了,没有下载过的会提示该命令不存在 可以到官网下载一下 https://nodejs.org/en/download/ 不要安装在中文路径下 如果你安装了nodejs–默认会安装NPM. 使用vue --version 查看当前是否安装vue脚手架 没有安装会提示不是内部命令 在命令行输

    2024年02月16日
    浏览(41)
  • vue 脚手架新手入门(vue cli 3)

    “:” 是指令 “v-bind”的缩写。用来绑定数据 @”是指令“v-on”的缩写。用来监听,并调用方法 下面是绑定class属性的数值。 监听点击动作 1.1、v-model 双向绑定 双向绑定 上面的操作等于 v-model 会将被绑定的值与 的值自动同步,这样我们就不必再使用事件处理函数了。 v-mo

    2024年02月09日
    浏览(34)
  • Vue-cli脚手架的下载

    vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板 预先定义好的目录结构及其基础代码,好比创建Maven项目时可以选择创建一个骨架项目, 主要的功能: 统一的目录结构、本地调试、热部署、单元测试、集成打包上线 Node.js : 下载 | Node.js 中文网 CTRL + window 输入

    2024年02月07日
    浏览(45)
  • 使用vue-cli脚手架创建vue项目

    0.vue cli安装 vue cli2安装 vue cli2卸载 vue cli3安装 key通过命令查看当前安装的vue cli的版本 1. vue init vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目 webpack是官方推荐的标准模板名。 vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的

    2024年02月11日
    浏览(49)
  • 17-工程化开发 & 脚手架 Vue CLI

    1.核心包传统开发模式: 基于 html/css /js 文件,直接引入核心包,开发 Vue。 2. 工程化开发模式: 基于构建工具 (例如: webpack)的环境中开发 Vue。    问题:         1. webpack 配置不简单         2. 雷同的基础配置         3. 缺乏统一标准 需要一个工具,生成标准化的配置 基本介

    2024年02月11日
    浏览(43)
  • 20230623----重返学习-vue-cli脚手架

    Vue工程化处理工具之 : @vue/cli 脚手架的本质:基于webpack实现项目的打包部署; vue/cli 安装和使用 可选择当前配置项 文件地址在:C:Users当前电脑用户名.vuerc。 如:C:Usersfangc.vuerc 文件目录 package.json 目录: scripts:npm可执行命令 serve命令: vue-cli-service 是Vue脚手架内部封装的

    2024年02月10日
    浏览(41)
  • 基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)

    除了使用HBuilderX工具可视化搭建项目外,DCloud官方还提供了一个脚手架用于命令行搭建项目。 uni-app项目支持 uni cli和 HBuilderX cli两种脚手架工具: uni cli:面向非HBuilderX的用户(如习惯使用vscode/webstorm的开发者),提供创建项目、编译发行等能力;在App平台,仅支持生成离线

    2024年04月16日
    浏览(50)
  • Vue2学习之第三章——Vue CLI脚手架

    文档:https://cli.vuejs.org/zh/ 具体步骤 第一步(仅第一次执行):全局安装@vue/cli。 npm install -g @vue/cli 第二步:切换到你要创建项目的目录,然后使用命令创建项目 vue create xxxx 第三步:启动项目 npm run serve 备注: 如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry https:/

    2024年01月19日
    浏览(42)
  • 关于基于vue-cli脚手架创建vue项目(图文版)

    目录 一.vue-cli脚手架·概述(来源于官方文档) 二.创建流程 2.1 首先安装node.js,如未安装请移步到:安装node.js 2.2 安装脚手架vue-cli 2.2.1 使用npm install -g @vue/cli命令  2.2.1 使用vue -V 查看版本并检验是否安装成功  2.3 安装vue项目 2.3.1 使用命令 vue create 项目名 ​编辑 2.3.2 这里

    2024年02月07日
    浏览(47)
  • Vue--》超详细教程——vue-cli脚手架的搭建与使用

    目录 vue-cli vue-cli 的安装 (可能出现的问题及其解决方法) vue-cli 创建 Vue 项目

    2024年01月17日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包