创建vite+vue3项目
npm create vite@latest
安装element包
# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus
创建和挂载Vue应用
1. 完整导入
直接挂载就完了。
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
2. 按需导入
需要使用额外的插件来导入要使用的组件。
自动导入 （推荐）
首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
导入和配置 Vite 插件
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})
总结
1. 安装
npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
2. 配置
// vite.config.tsimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vite.config.ts
// import { defineConfig } from 'vite'
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()],}),],
})
3. 使用
<!-- App.vue --><script setup lang="ts"></script><template><el-button type="primary">Hello World</el-button>
</template><style scoped></style>
)
