Vue2和Vue3项目创建的区别和 element ui 和element plus的导入方式

创建项目

Vue2

• Vue CLI 3 及之前版本：
  • 使用 vue-cli 创建项目：

npm install -g @vue/cli
vue create my-project-vue2
cd my-project-vue2

Vue3

• Vue CLI 4 及之后版本：
  • 使用 vue create 命令创建项目，并选择 Vue 3 的相关选项：

npm install -g @vue/cli
vue create my-project-vue3
cd my-project-vue3

或者是使用vite脚手架 这种是默认创建vue3的项目

npm create vue@latest
vue create my-project-vue3
cd my-project-vue3

Vue2项目机构

• 项目结构：
  • Vue 2 项目通常包含 src 目录，其中包含了 assets、components、router、store 等子目录。
  • main.js 文件用于启动应用程序，并引入 Vue 和其他依赖项。

Vue 2 + Element UI

• 安装

npm install element-ui --save

• 全局引入

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

Vue.use(ElementUI);

VUE3项目结构

• 项目结构：
  • Vue 3 项目基本结构与 Vue 2 类似，但是 Vue 3 引入了一些新的特性，如 Composition API，可能会在代码风格上有差异。
  • main.js（或 main.ts）文件可能被重命名为 main.ts，并且可能使用 createApp 方法来创建 Vue 实例。

Vue 3 + Element Plus

• 安装

npm install element-plus --save

• 全局引入：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

注意：下载element组件库一定是在对应的vue项目下进行下载 全局下载的话只会在你当前全局用户下生成对应的package.json文件