前端开发引入element plus与windi css

news2024/11/18 9:41:06

背景

前端开发有很多流行框架，像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>

关键代码如图所示