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