2024年vue3+ts+element plus简单使用_uniapp vue3 ts 使用element-plus，物联网嵌入式开发ui基础

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

创建项目：

vue create vue3-ts-template

// 选择Manually select features 

composition-api ([Vue 2] router, vuex, less, babel, eslint) 
Default ([Vue 2] babel, eslint) 
Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
✅ Manually select features 

• Choose Vue version
• Babel
• TypeScript
• Progressive Web App (PWA) Support
• Router
• Vuex
• CSS Pre-processors
• Linter / Formatter
• Unit Testing
• E2E Testing

然后 Vue 选 3.0, css预处理器，看个人习惯，sass,less,stylus都可以。

创建完项目，把那些不需要的页面例如:helloword删了就行了，有一个shims-vue.d.ts 得留着。

安装 ElementPlus

yarn add element-plus

// main.ts

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

登录页面

页面内容没什么好说的，想怎么画就怎么画。

<el-form ref="ruleForm" :model="form">
    <el-form-item prop="email" :rules="{required:true, message:'请输入账号', trigger:'change'}"&g