当前位置：首页 > news >正文

vue3整合element-plus

news 2025/6/24 6:42:39

为项目命名选择vue 框架选择TS

启动测试： npm run dev

开始整合 element-plus

npm install element-plus --save
npm install unplugin-vue-components unplugin @vitejs/plugin-vue --save-dev

修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),Components({resolvers: [ElementPlusResolver()],dts: true, // 自动生成一个 components.d.ts 文件，帮助 TS 识别}),],
})

检查 tsconfig.app.json

{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }]
}

修改 tsconfig.app.json

{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true,"types": ["element-plus/global"]},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

修改 App.vue

<template><Login/>
</template><script setup lang="ts">
import Login from './components/Login.vue'
</script><style scoped>
</style>

<template><div class="login-container"><el-card class="box-card"><template #header><div>用户登录</div></template><el-form :model="form" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" /></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password" show-password /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button><el-button @click="onReset">重置</el-button></el-form-item></el-form></el-card></div>
</template><script setup lang="ts">
import { ref } from "vue";const form = ref({ username: "", password: "" });
const rules = {username: [{ required: true, message: "请输入用户名", trigger: "blur" }],password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
const formRef = ref();function onSubmit() {if (formRef.value) {formRef.value.validate((valid) => {if (valid) alert("提交成功");});}
}function onReset() {if (formRef.value) {formRef.value.resetFields();}
}
</script><style scoped>
.login-container {display: flex;justify-content: center;align-items: center;height: 100vh;
}
.box-card {width: 400px;
}
</style>

npm run dev 效果