Vue:Vue2和Vue3创建项目的几种常用方式以及区别

前言

Vue.js 和 Element UI 都是用 JavaScript 编写的。

  • 1、Vue.js 是一个渐进式 JavaScript 框架。
  • 2、Element UI 是基于 Vue.js 的组件库。
  • 3、JavaScript 是这两个项目的主要编程语言。

而Element Plus是基于TypeScript开发的。

一、Vue2

1、基于vue@cli工具创建

vue2 + element ui + js/ts
1、创建项目命令

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli 
npm install -g @vue/cli## 执行创建命令
vue create vue_test选择vue2

2、过程截图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、Vue3

1、基于vue@cli工具创建

Vue3 + element plus + ts/js
创建项目命令

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli 
npm install -g @vue/cli## 执行创建命令
vue create vue_test选择vue3

过程截图同上,只是选择3.x
在这里插入图片描述

2、基于vite创建

Vue3 + element plus + ts/js

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli 
npm install -g @vue/cli## 执行创建命令
npm create vue@latest

过程截图
在这里插入图片描述

三、引入element ui或element plus

1、vue2 + element ui + js
引入element ui

npm i element-ui -S --legacy-peer-deps

main.js配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

2、vue3 + element plus + ts
引入element plus

npm install element-plus --save

main.ts配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus as any)

总结

推荐vite创建项目时,选择TS,因为element plus很多组件是基于TS开发的。
但是,如果你实在不会TS,那么,就创建JS项目
否则,你使用element plus可能就比较麻烦
你需要把TS实现的组件,自行转化成JS代码

所以,你会TS,那么用vite方式创建项目,选择Vue3+TS,然后,引入element plus框架。
如果,你不会TS,那么用vue@cli方式创建项目,选择Vue2+JS,然后,引入element ui框架。

补充

创建好项目后,我们需要进入项目执行npm i,进行依赖想下载。
如果,你使用npm命令,下载依赖过慢。

我们可以选择一下几种方式处理。
1、修改npm镜像源。

npm config set registry https://registry.npmmirror.com

2、使用cnpm
安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm -v

用法与npm一样。
3、使用yarn

npm install --global yarn --registry=https://registry.npmmirror.com
yarn -v

用法略有区别

安装npm、cnpm、yarn的教程
https://blog.csdn.net/weixin_44373876/article/details/133500027

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

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

相关文章

游戏成瘾与学习动力激发策略研究——了解“情感解离”“创伤理论”

一、情感解离(Emotional Dissociation) 定义:情感解离是一种心理防御机制,指个体在经历无法承受的情绪压力或创伤时,通过切断情感体验与认知、记忆或现实感知的联系来保护自我。它不是简单的“麻木”,而是大脑为应对极端刺激而启动的“紧急逃生通道”。 核心特征 1、意…

WPF跨平台开发探讨:借助相关技术实现多平台应用

WPF跨平台开发探讨:借助相关技术实现多平台应用 一、前言二、WPF 跨平台开发的现状与挑战2.1 WPF 的平台局限性2.2 跨平台开发面临的挑战 三、实现 WPF 跨平台开发的相关技术3.1.NET MAUI 简介3.2.NET MAUI 的关键特性3.3 其他相关技术和工具 四、借助.NET MAUI 实现…

ImGui 学习笔记(五) —— 字体文件加载问题

ImGui 加载字体文件的函数似乎存在编码问题,这一点可能跟源文件的编码也有关系,我目前源文件编码是 UTF-16。 当参数中包含中文字符时,ImGui 内部将字符转换为宽字符字符集时候,采用的 MultiByteToWideChar API 参数不太对&#…

汽车一键启动PKE无钥匙系统

移动管家汽车一键启动PKE舒适无钥匙遥控远程系统是一种集成了多项先进功能的汽车电子系统,主要目的是提高驾驶便利性和安全性。 以下是该系统的具体功能: 功能类别 功能描述 无钥匙进入 感应无钥匙进入(自动感应开关门) 一…

【从零开始学习计算机科学与技术】计算机网络(五)网络层

【从零开始学习计算机科学与技术】计算机网络(五)网络层 网络层无连接服务的实现:数据报子网面向连接服务的实现:虚电路子网IP协议子网及子网划分子网掩码子网规划可变长子网掩码 (VLSM)无类别域间路由—CIDRIP路由转发过程ARP与RARPARP的工作过程:RARP的工作过程如下:DH…

HTML5扫雷游戏开发实战

HTML5扫雷游戏开发实战 这里写目录标题 HTML5扫雷游戏开发实战项目介绍技术栈项目架构1. 游戏界面设计2. 核心类设计 核心功能实现1. 游戏初始化2. 地雷布置算法3. 数字计算逻辑4. 扫雷功能实现 性能优化1. DOM操作优化2. 算法优化 项目亮点技术难点突破1. 首次点击保护2. 连锁…

docker安装node部分问题

sudo n latest sudo: n: command not found 如果运行 sudo n latest 时出现: sudo: n: command not found 说明 n 版本管理工具 未安装 或 未添加到 PATH 环境变量。 🛠 解决方案 1️⃣ 先检查 n 是否已安装 运行: which n或者&#xff1…

2025-03-17 NO.1 Quest3 开发环境配置教程

文章目录 准备条件1 Quest3 激活1.1 下载 Oculus 助手1.2 打开 quest 热点1.3 Quest3 连接 wifi1.4 参考教程 2 登录 Oculus(*)2.1 创建 Meta 账号(*)2.2 Oculus 软件下载与配置(*) 3 创建项目3.1 下载 Uni…

简单记一些Kalibr在20.04安装下踩的坑

赠品:官方Kalibr测试数据下载 包括双目,和IMU双目 通过网盘分享的文件:kalibr官方测试数据 链接: https://pan.baidu.com/s/1TgeXuTYLoTrlBbKy5Jf41A?pwdyha6 提取码: yha6 https://github.com/ethz-asl/kalibr/wiki/downloads 先说结论&a…

【C++】:C++11详解 —— 右值引用

目录 左值和右值 左值的概念 右值的概念 左值 vs 右值 左值引用 和 右值引用 左值引用 右值引用 左值引用 vs 右值引用 使用场景 左值引用的使用场景 左值引用的短板 右值引用的使用场景 1. 实现移动语义(资源高效转移) 2. 优化容器操作&a…

SpringMVC(四)Restful软件架构风格

目录 ​编辑 API接口设计的架构风格 一 Dao层实现(处理数据库) 二 Sercice层实现(处理业务逻辑) 三 Controller层(处理http请求) 四 补充知识点 1 PathVariable - 路径变量 2 CrossOrigin(Origins …

c++图论(二)之图的存储图解

在 C 中实现图的存储时,常用的方法包括 邻接矩阵(Adjacency Matrix)、邻接表(Adjacency List) 和 边列表(Edge List)。以下是具体实现方法、优缺点分析及代码示例: 1. 邻接矩阵&…

ABAP PDF预览

画个屏幕 PDF JPG TXT都可以参考预览,把二进制流传递给标准函数就行 *&---------------------------------------------------------------------* *& Report YDEMO2 *&---------------------------------------------------------------------* *&am…

Compose 的产生和原理

引言 compose 出现的目的: 重新定义android 上ui 的编写方式。为了提高android 原生ui开发效率。让android 的UI开发方式跟上时代。 正文 compose 是什么? 就是一套ui框架 和flutter 一样是一套ui框架 Flutter:跨平台开发趋势与企业应用的…

单口路由器多拨号ADSL实现方法

条件是多拨号场景,公司路由器接口不够用

H3C SecPath SysScan-AK 系列漏洞扫描系统

H3C SecPath SysScan-AK 系列是一款专业的漏洞扫描系统,旨在帮助组织和企业快速、准确地发现网络和系统中存在的安全漏洞。该系统具有以下特点: 1. 多样化的扫描能力:支持对各类网络设备、服务器、应用程序等进行漏洞扫描,能够全面…

[蓝桥杯 2023 省 B] 飞机降落

[蓝桥杯 2023 省 B] 飞机降落 题目描述 N N N 架飞机准备降落到某个只有一条跑道的机场。其中第 i i i 架飞机在 T i T_{i} Ti​ 时刻到达机场上空,到达时它的剩余油料还可以继续盘旋 D i D_{i} Di​ 个单位时间,即它最早可以于 T i T_{i} Ti​ 时刻…

Kafka详解——介绍与部署

1. 什么是 Kafka? Kafka 是一个分布式的消息队列系统,最初由 LinkedIn 开发,后来成为 Apache 开源项目。它的主要用途包括实时数据处理、日志收集、数据流管道构建等。Kafka 具备高吞吐量、可扩展性、持久性和容错性,广泛应用于大…

win10搭建opengl环境搭建并测试--输出立方体球体和碗型并在球体上贴图

参照本文档可以完成环境搭建和测试,如果想要快速完成环境的搭建可以获取本人的工程,包括所用到的工具链和测试工程源码获取(非免费介意务下载):链接: https://pan.baidu.com/s/1H2ejbT7kLM9ore5MqyomgA 提取码: 8s1b …

TCP、UDP协议的应用、ServerSocket和Socket、DatagramSocket和DatagramPacket

DAY13.1 Java核心基础 TCP协议 TCP 协议是面向连接的运算层协议,比较复杂,应用程序在使用TCP协议之前必须建立连接,才能传输数据,数据传输完毕之后需要释放连接 就好比现实生活中的打电话,首先确保电话打通了才能进…