vue3 + vite + elementPlus 步骤
时间: 2023-08-23 20:10:11 浏览: 135
vite-ts-vue3-element-plus
首先,确保你已经安装了 Node.js 和 npm。
接下来,按照以下步骤进行 Vue 3、Vite 和 Element Plus 的安装和配置:
1. 创建一个新的 Vue 3 项目:
```
npm init vite@latest
```
在选择模板时,选择 `vue`。
2. 进入项目目录:
```
cd your-project-name
```
3. 安装依赖:
```
npm install
```
4. 安装 Element Plus:
```
npm install element-plus
```
5. 在 `main.js` 文件中引入 Element Plus 的样式和组件:
```javascript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
createApp(App)
.use(ElementPlus)
.mount('#app')
```
6. 在 `App.vue` 文件中使用 Element Plus 的组件,例如:
```vue
<template>
<div>
<el-button type="primary">Element Plus Button</el-button>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
```
7. 运行项目:
```
npm run dev
```
现在,你的 Vue 3 + Vite + Element Plus 项目应该已经配置完成了。你可以根据需要继续开发和定制化你的应用程序。
阅读全文