cmd 创建项目
npm init vue@latest
vs code
执行终端命令
安装依赖包
npm install
使用dev启动
npm run dev
导入 ElementPlus
npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
将vite.config.js改为以下代码
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//elementPlus 按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
重启
npm run dev
测试结果
在App.vue增加以下代码
<script setup>
</script>
<template>
<el-button type="primary">Primary</el-button>
</template>
<style scoped>
</style>
显示如下你就成功了