第一步，先安装Node.js
官网下载地址：https://nodejs.org/en/download/current/

执行node.js的msi安装程序安装后
在cmd命令窗口：
查看npm -v

可查看到npm版本，说明已安装node.js成功，vue依赖NODE.JS

安装后，设置一下nmp镜像源使用国内淘宝源：
npm config set registry https://registry.npmmirror.com把npm的安装源设置为永久的使用淘宝源 或者安装cnpm:

npm install -g cnpm --registry=https://registry.npmmirror.com
这样以后可使用cnpm替代npm命令，也是会使用淘宝镜像源

第二步：

接着就可以使用cnpm开始安装vue

cnpm install -g @vue/cli

此时已完成基础的VUE的开发环境的部署。

第三步：

开始创建你的VUE3项目

VUE安装成功后，在你需要放置VUE项目文件的路径，

右键，打开CMD命令窗口:vue create vue项目名然后创建过程中会让你选vue3还是vue2进行项目的创建，方向键选VUE3即可项目创建后，在你的项目文件夹会出现vue3默认的文件结构：

启动开发服务器：npm run serve(这个命令需要在你的项目文件夹打开命令窗口，或者cd到项目路径下)

本地浏览器即可使用:http://localhost:8080/ 访问到vue3的前端界面。服务启动成功！

此时已完成基础的VUE3项目的创建，你可使用vscode打开这个项目文件夹，就可优雅的开始编写你的前端代码

VUE3创建项目的选项，

回车，使用默认得选项

等待创建程序下载完成即可。


开始安装element-plus:

创建好vue的新项目后，进入项目目录，右键打开命令窗口：

执行：
npm install element-plus --save

先安装一个完整的elementplus. 安装按需引入组件：

使用 element-plus 的大部分组件，并且不担心打包体积的话，可以选择完整引入。

element的组件完整引入的配置：

在 main.js 中引入：

在项目的入口文件（通常是 src/main.js）中引入 element-plus 和它的默认主题样式。

// main.js

import { createApp } from 'vue';

import App from './App.vue';

import ElementPlus from 'element-plus';

import 'element-plus/lib/theme-chalk/index.css'; // 引入样式

const app = createApp(App);

app.use(ElementPlus);

app.mount('#app');

element的组件按需引用的配置和安装:

为了减少打包后的文件大小，推荐只引入需要的组件。可以通过unplugin-vue-components 实现按需加载。
执行命令：

npm install unplugin-vue-components unplugin-auto-import -D

配置main.js

import 'element-plus/dist/index.css'; // 引入全局样式

然后配置：vue.config.js 文件

// vue.config.js

const { defineConfig } = require("@vue/cli-service");

//element plus 按需引入

const AutoImport = require("unplugin-auto-import/webpack").default;

const Components = require("unplugin-vue-components/webpack").default;

const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = defineConfig({

  transpileDependencies: true,

  configureWebpack: {

    plugins: [

      AutoImport({

        resolvers: [ElementPlusResolver()],

      }),

      Components({

        resolvers: [ElementPlusResolver()],

      }),

    ],

  },

});

安装 element-plus 后，是否还需要安装其他工具包（如 unplugin-vue-components 和 unplugin-auto-import）取决于你的项目需求和开发流程。让我们详细解释一下这些包的作用以及它们与 element-plus 的关系。

1. 安装 element-plus

Bash

深色版本

npm install element-plus --save

这是安装 Element Plus 的基本命令，它会将 Element Plus 添加到你的项目依赖中，并允许你在项目中使用它的组件。

2. 使用 unplugin-vue-components 和 unplugin-auto-import

unplugin-vue-components

作用：自动按需加载 Vue 组件，无需手动导入每个组件。

优点：

减少打包体积，只包含实际使用的组件。

简化代码，不需要显式导入每个组件。

unplugin-auto-import

作用：自动导入常用的 API，例如 ref、reactive、Element Plus 的方法等。

优点：

减少手动导入的重复劳动。

提高代码可读性和开发效率。

新手可使用完整引入，减少学习曲线

如果你打算直接引入整个 Element Plus 库（即不按需加载），那么你不需要额外安装 unplugin-vue-components 和 unplugin-auto-import。

总结

完整引入：不需要额外安装 unplugin-vue-components 和 unplugin-auto-import，适合快速启动或小型项目。

按需引入：推荐安装 unplugin-vue-components 和 unplugin-auto-import，以优化打包体积并简化代码管理，特别适用于大型项目或对性能有较高要求的应用。

根据你的项目需求和开发习惯选择合适的引入方式。如果你关注打包性能和代码简洁性，建议采用按需引入的方式，并安装上述两个插件。