安装vue-cli2和3以及创建vue2和vue3项目的步骤及区别

news2024/10/4 18:44:39

文章目录

    • 安装vue-cli2版本步骤
      • 1.下载vue-cli2
          • 问题1:安装Vue Cli出现EEXIST: file already exists, cmd shim ‘C:\Users\
      • 2.vue-cli2构建vue项目
          • 问题2:报错: `vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443`
      • 3.进入项目目录并运行
      • 4.打包并运行
    • 安装vue-cli3版本步骤
      • 1.下载vue-cli3
          • 问题1:安装@vue/cli报错request to https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.
          • 问题2:安装到最后卡住不动,用cnpm安装
          • 问题3:cnpm提示,cannot find module 'fs/promises
      • 2.vue-cli3构建vue项目
      • 3.进入项目目录并运行
      • 4.打包并运行
    • 总结

安装vue-cli2版本步骤

1.下载vue-cli2

npm i -g vue-cli
问题1:安装Vue Cli出现EEXIST: file already exists, cmd shim ‘C:\Users\

在这里插入图片描述
原因:安装了旧版本的vue-cli,需要卸载
解决:cmd管理员身份运行,npm uninstall vue-cli -g
如果还不行,就去C盘C:\Users\l\AppData\Roaming\npm文件夹下删除vue相关文件
在这里插入图片描述

检查vue-cli版本:
vue -V
vue2的最后一个版本是2.9.6

2.vue-cli2构建vue项目

// vue2是项目名,可以自己定义
vue init webpack vue2
问题2:报错: vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443

解决:去https://github.com/vuejs-templates/webpack中下载如下图版本
在这里插入图片描述
解压到C:\Users\l.vue-templates文件夹中,把文件夹名改成webpack
创建:最后面加 --offine表示离线

 vue init webpack vue2 --offline

3.进入项目目录并运行

// 1.vue2 是文件夹,需要与上面项目名相同
cd vue2
// 2.npm run dev 或者 npm start
npm start

4.打包并运行

//1.打包
npm run build
//生成dist文件

如果你希望npm start之后自动打开页面,可以在config文件夹–>index.js文件里设置autoOpenBrowser:true

安装vue-cli3版本步骤

注意:下载脚手架3之前一定要卸载脚手架2

npm uninstall -g vue-cli
// 你可以查看vue版本,如果没有出现2.x.x(x表示0-9的数字),说明卸载成功,命令如下
vue -V

1.下载vue-cli3

npm i @vue/cli -g
问题1:安装@vue/cli报错request to https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.

解决方法:npm config set strict-ssl false npm clean cache -force

问题2:安装到最后卡住不动,用cnpm安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install @vue/cli -g
问题3:cnpm提示,cannot find module 'fs/promises

经过查找资料发现是 cnpm 版本有问题,网上有下面两种办法:

  1. 升级 node 版本
  2. 降低 cnpm 版本npm install cnpm@7.1.0 -g --registry=https://registry.npmmirror.com

我用的第二种方法可以用cnpm下载vue-cli最新版本了

vue -V
@vue/cli 5.0.8

2.vue-cli3构建vue项目

vue-cli3+不支持vue init webpack vue-project命令,如果想支持,需要安装@vue/cli-init
这样的话用vue init webpack vue-project命令依然创建的是vue2项目

//如果你需要用旧版本(vuecli<3)的vue init功能,可以全局安装一个桥接工具:
cnpm i -g @vue/cli-init
// vue3是项目名,可以自己定义
vue create vue3

在这里插入图片描述
说明: vue-cli3+可以创建vue2项目,vue-cli2只能创建vue2项目,只不过vue-cli3创建的vue2项目目录和vue-cli2创建的vue2项目目录不同

  • 用vue-cli3+创建出来的的vue2和vue3项目,除了vue版本差别,还有一个区别是vue3没有vue-template-compiler包,vue2项目有

3.进入项目目录并运行

// 1.vue3 是文件夹,需要与上面项目名相同
cd vue3
// 与脚手架2运行命令不一样
npm run serve

如果你希望npm run serve之后自动打开页面,可以在package.json文件里"scripts"对象下的serve属性值后面添加–open 如:“serve”: “vue-cli-service serve --open”,

4.打包并运行

//1.打包
npm run build
//生成dist文件夹

总结

电脑上升级了vue-cli版本,vue-cli版本在3以上,再安装一个@vue/cli-init包,这样的话就可以用以下命令创建不同版本的vue项目

  • vue init webpack vue2 创建vue2项目(文件目录有build,config等配置文件)
    如果报错 vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443
    还按上面创建vue2项目步骤,去https://github.com/vuejs-templates/webpack中下载webpack,解压到C:\Users\l.vue-templates文件夹中,把文件夹名改成webpack,然后vue init webpack vue2 --offline创建
  • vue create vue-project 可以选择性创建vue2或vue3项目

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

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

相关文章

「兔了个兔」福兔贺春,纯CSS实现超精美月兔404界面(附源码)

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后…

搭建一个FAQ智能问答系统/服务

FAQ智能问答系统 介绍 项目传送门&#xff1a;https://github.com/wzzzd/FAQ_system 构建了一个FAQ智能问答系统。 使用多种方法&#xff0c;实现FAQ的问题-模板匹配功能。 使用Tornado框架&#xff0c;部署成轻量级的Web服务应用。 整体框架如下。 流程 1.初始化流程 1.…

这福利给你要不要 — 用Python采集相亲网站女生数据

前言 俗话说学咱这行的男同志 找对象容易吗 这马上就要过完年了 是时候找找女朋友了 我在这里摸索到了个网站 或许你们可以来看看 送一波单身福利 不需要的也可以学学怎么采集这些数据呗 环境与模块 环境开发 Python 3.8Pycharm 模块使用 import parsel --> p…

类与对象的原理

前言 在JavaScript中&#xff0c;类的实现是基于原型继承机制的。 JavaScript中的类的一个重要特性是“动态可继承”。 类与原型 在JavaScript中&#xff0c;类的所有实例对象都从同一个原型对象上继承属性&#xff0c;因此原型对象是类的核心。 所有的类都有一个共同的根…

关系数据库——关系操作和关系完整性

文章目录一、关系操作1.基本的关系操作2.关系数据语言的分类关系代数语言关系演算语言具有关系代数和关系演算双重特点的语言二、关系的完整性1.实体完整性(Entity Integrity)实体完整性规则2.参照完整性(Referential Integrity)参照完整性规则引用关系3.用户定义的完整性(User…

WebRTC 的连接过程

经过前面几部分的铺垫&#xff0c;你应该对P2P音视频互动的过程有了一个大概的了解&#xff0c;有可能你会觉得过程比较繁琐&#xff0c;甚至涉及到了网络底层。但是&#xff0c;不要担心&#xff0c;WebRTC已经帮我们做了很多的事情&#xff0c;让我们在音视频开发时变得轻而易…

【Spring源码】22. 属性填充populateBean()详解

进入populateBean()对bean的属性进行填充&#xff0c;将各个属性值注入&#xff08;存在其他bean的属性&#xff0c;则会递归初始化依赖的bean&#xff09;一开始会先对传入的参数进行判断&#xff08;如下图红框框中的逻辑&#xff09;如果传入的BeanWrapper和RootBeanDefinit…

SpringBoot3+最新MybatisPlus+Mysql与TDengine双数据源

前言 昨天写的ideaApifox uploader插件apifox新年第一天上班就上榜了&#xff0c;真是不错。今天来补一篇&#xff0c;本来应该是在前一篇之前发的。实际上就是最新的springBoot集成最新的mybatisPlus&#xff0c;加双数据源&#xff1a;mysql、TDengine&#xff0c;一个关系型…

kvm虚拟机克隆

kvm虚拟机克隆链接克隆和完整克隆的区别完整克隆自动克隆手动克隆的步骤1.复制模板vm磁盘为新vm的磁盘2.复制模板vm配置文件为新vm的配置文件3.修改新vm配置文件中的信息为新vm的信息4.导入新vm的配置文件5.启动新vm链接克隆1.生成链接克隆虚拟机磁盘文件2.后续流程与手动克隆一…

【算法练习】链表中环的入口结点

题源&#xff1a;牛客描述给一个长度为n链表&#xff0c;若其中包含环&#xff0c;请找出该链表的环的入口结点&#xff0c;否则&#xff0c;返回null。数据范围&#xff1a;n≤10000&#xff0c;1<结点值<10000要求&#xff1a;空间复杂度 O(1)&#xff0c;时间复杂度O(…

1、数据库概述

文章目录1 为什么要使用数据库2 数据库与数据库管理系统2.1 数据库的相关概念2.2 数据库与数据库管理系统的关系2.3 常见的数据库管理系统排名(DBMS)2.4 常见的数据库介绍3 MySQL介绍3.1 概述3.2 MySQL发展史重大事件3.3 关于MySQL 8.03.4 为什么选择MySQL3.5 Oracle vs MySQL4…

学成在线项目开发技巧整理---第二部分

1.静态资源处理通常项目会采用动静分离架构,利用Nginx作为静态资源服务器,存放所有静态资源:#访问动态资源时,将请求负载均衡到多个服务器实例或者多个网关实例 upstream webservice{server 192.168.200.146:8080; }server {listen 80;server_name localhost;#动态资源l…

C++基础知识点整理笔记(一)

一直想尝试自己动手构建一个简单的深度学习训练框架&#xff0c;包括数据读取与处理、PS、NN前后向传播、模型save和load、不同训练方式&#xff08;offline/online .etc&#xff09;、指标监控、模型部署等部分, 去深入研究内部深度学习训练框架及horovod、byteps、pslite、te…

深刻理解状态机设计需要避免的冒险;时序电路可能存在essential hazard;处理单元里的control和datapath;竞争冒险【SV】【VLSI】

深刻理解状态机设计需要避免的冒险&#xff1b;时序电路可能存在essential hazard&#xff1b;处理单元里的control和datapath&#xff1b;竞争冒险【SV】【VLSI】0. 前言&#xff1a;时序电路可能存在essential hazard1. 理解control和datapath1.1 Datapath control2. 硬件电路…

MFC|创建一个对话框及窗体各个属性介绍

参考&#xff1a; VS2015 建立一个C的MFC简易窗体程序项目&#xff08;https://www.cnblogs.com/xingboy/p/11059721.html&#xff09; 对话框中各项属性介绍&#xff08;https://blog.csdn.net/u012350993/article/details/26093051&#xff09; MFC窗口风格 WS_style/WS_EX_s…

【Hadoop】YARN简述

文章目录1. YARN总述2. YARN调度器2.1 FIFO Scheduler2.2 Capacity Scheduler2.3 Fair Scheduler1. YARN总述 YARN是Hadoop资源管理器&#xff0c;它是一个通用资源管理系统&#xff0c;可为上层应用提供统一的资源管理和调度&#xff0c;它的引入为集群在利用率、资源统一管理…

关于栈和队列

目录栈&#xff08;Stack&#xff09;什么是栈栈的使用栈的模拟实现队列&#xff08;Queue&#xff09;什么是队列队列的使用队列的模拟实现循环队列双端队列 (Deque)栈&#xff08;Stack&#xff09; 什么是栈 栈是一种特殊的线性表&#xff0c;它只允许在固定的一端进行插入…

JavaScriptArray和String对象~

初识Array&#xff1a; 定义&#xff1a; 方式1 var 变量名new Array(元素列表);举例&#xff1a; <script>var arraynew Array(1,2,3);alert(array); </script>显示如下&#xff1a; 方式2 var 变量名[元素列表];举例&#xff1a; <script>var array[…

App Inspector使用 (macaca移动端元素检查器)

App Inspector安装说明&#xff1a;https://macacajs.github.io/app-inspector/zh/guide/install.html#%E7%8E%AF%E5%A2%83%E9%9C%80%E8%A6%81 依赖安装说明&#xff1a; 1、node环境&#xff1a;这里安装的时候和初始化的时候报错使用了两个版本&#xff0c;所以这里使用nvm…

Python-模块、包和发布模块

1.模块1.1模块的概念模块是python程序架构的一个核心概念每一个以扩展名.py结尾的python源代码文件都是一个模块模块名同样也是一个标识符&#xff0c;需要符合标识符的命名规则在模块中定义的全局变量、函数、类都是提供给外界直接使用的工具模块就好比工具包&#xff0c;要想…