安裝

# NPM
$ npm install element-plus --save
// 或者（下載慢切換國內鏡像）
$ npm install element-plus -S

// 可以選擇性安裝 less
npm install less less-loader -D
// 可以選擇性配置 @ 自動聯想src目錄

Element Plus 的引入和注入

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {router} from './router'
// import 引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
// use 注入 ElementPlus 插件
app.use(ElementPlus)
app.mount('#app')

組件的引入

1. 先CV一個卡片

Login.vue

<template><div class="login"><el-card class="box-card"><template #header><div class="card-header"><span>Card name</span><el-button class="button" text>Operation button</el-button></div></template><div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div></el-card></div>
</template><script setup lang="ts"></script><style scoped lang="less">
.login {height: 100%;display: flex;justify-content: center;align-items: center;
}
</style>

index.ts

import { createRouter, createWebHistory } from 'vue-router'export const router = createRouter({// import.meta.env.BASE_URL 應用的基本 URL。基本 URL 是指在你的應用部署到某個域名或子路徑時，URL 的起始部分。例如，如果你的應用部署在 https://example.com/myapp/ 這個路徑下，那么 import.meta.env.BASE_URL 就會是 /myapp/。history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: () => import('@/views/Login.vue'),},{path: '/index',component: () => import('@/views/Index.vue'),},],
})

App.vue

<template><Login></Login>
</template><script setup lang="ts">
import Login from './views/Login.vue'
</script><style>
/* 注意 style 標簽 別加 scoped 不然設置寬高不生效 */
* {margin: 0;padding: 0;
}
html, body, #app {height: 100%;overflow: hidden;
}
</style>

2. 改為 Form 表單

Login.vue

<template><div class="login"><el-card class="box-card"><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="Approved by"><el-input v-model="formInline.user" placeholder="Approved by" clearable /></el-form-item><el-form-item label="Activity zone"><el-select v-model="formInline.region" placeholder="Activity zone" clearable><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">Query</el-button></el-form-item></el-form></el-card></div>
</template><script setup lang="ts">
import { reactive } from 'vue'const formInline = reactive({user: '',region: '',
})const onSubmit = () => {console.log('submit!')
}
</script><style scoped lang="less">
.login {height: 100%;display: flex;justify-content: center;align-items: center;
}
</style>

3. 優化表單

Login.vue

<template><div class="login"><el-card class="box-card"><el-form ref="form" :rules="rules" :model="formInline" class="demo-form-inline"><el-form-item prop="user" label="賬號："><el-input v-model="formInline.user" placeholder="請輸入賬號" /></el-form-item><el-form-item prop="password" label="密碼："><el-input v-model="formInline.password" placeholder="請輸入密碼" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登錄</el-button></el-form-item></el-form></el-card></div>
</template><script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormItemRule, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus'const router = useRouter()
type Form = {user: string,password: string
}
type  Rules = {[k in keyof Form]?: Array<FormItemRule>
}
const formInline = reactive<Form>({user: '',password: '',
})
const form = ref<FormInstance>()
const rules = reactive({user: [{required: true,message: '請輸入賬號',type: 'string',}],password: [{required: true,message: '請輸入密碼',type: 'string',}]
})const onSubmit = () => {console.log('submit!', form.value)form.value?.validate((validate)=>{if (validate) {router.push('/index')localStorage.setItem('token', '1')} else {ElMessage.error('賬號或密碼錯誤')}})}
</script><style scoped lang="less">
.login {height: 100%;display: flex;justify-content: center;align-items: center;
}
</style>