背景

      前端开发有很多流行框架，像React 、angular、vue等等，本文主要讲vue 给新手用的教程，其实官网已经写的很清楚，这里再啰嗦只是为了给新手提供一个更加简单明了的参考手册。

一、打开element plus官网选则如图所示模块安装命令

安装 | Element Plus

二、在vscode开发工具 的命令行那里执行安装命令，如图所示

npm install element-plus --save

三、 main.ts引入

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

四、引入代码

五、运行项目测试

npm run dev

windi css 引入

六、一样的在vscode开发工具命令行那里执行安装命令

  npm i -D vite-plugin-windicss windicss 

七、在 项目的（vite.config.js）中添加依赖

import WindiCSS from 'vite-plugin-windicss'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),WindiCSS(),],

八、项目vue入口文件main.js中导入 virtual:windi.css 

import 'virtual:windi.css'

九、引用windicss

<script setup>
import {Check,Delete,Edit,Message,Search,Star,
} from '@element-plus/icons-vue'
</script><template><el-row class="dt"><el-button class="dt" type="primary">Primary</el-button></el-row>
</template><style scoped>.dt{@apply bg-dark-50 border-red-300  rounded-2xl bg-green-500}
</style>

关键代码如图所示 

运行效果