Vue3+ElementPlus+Vite创建项目

1、在D盘中创建一个baijiahao的文件夹，用于存放创建的Vue3的项目。

2、打开DOS面板，输入

npm init @vitejs/app vue3demo

回车，给出一下的提示

@vitejs/create-app is deprecated, use npm init vite instead

? Select a framework: 》-use arrow-keys, Return to submit.

> vanilla
    vue
    react
    preact
    lit
    svelte

创建的是一个Vue项目 所以选择第二个进行依赖的安装

关于是使用vue+js 还是使用vue+ts看自己的项目需求来定。在这里使用的是vue+js作为开发的基础语言。然后按回车建，将进行项目的基础文件安装和下载

vue3+vite项目的dos命令界面

Vue3项目名称

Vue3+Vite项目目录展示图

Vue3项目创建好之后，还需要进行依赖的下载，使用一下命令进行相关核心依赖的安装

npm install --save

使用npm安装相关的Vue3项目的依赖

安装好之后，项目中就会对一个node_modules文件夹，该文件夹用于存放一些Vuey依赖的核心库和第三方的库

3、安装ElementPlus UI组件的相关依赖；使用以下命令

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

以上命令可用选择自己喜欢的一个包文件进行下载和安装。具体的安装方法在这里就不详细的介绍了。

使用npm包管理器安装element-plus

安装好之后，使用vscode打开项目。并在main.js文件中引入相关的Element-plus的样式和核心的组件

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

//引入Element-plus核心的文件和css样式
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";
//然后进行挂载在app中
app.use(ElementPlus, {
locale: zhCn,
});

app.mount("#app");

Vscode编辑器中项目

根据上面的步骤，基本上Vue3+Vite+ElementPlus的项目基本算是搭建完全了。那么怎么使用Element-Plus的其中的组件呢？

下面有一个简单的案列，也可以去Element-plus官网去查看相关的文档使用方法。

以上是使用element-plus的按钮组件，并使用

npm run dev

命令进行启动，随后在浏览器中输入localhost:3001查看是否正常的进行显示

浏览器中显示的按钮信息

注意：关于端口号是多少 看控制台中的信息