vite.config.js
点击查看代码
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),//按需定制主题配置ElementPlus({useSource: true,}),AutoImport({resolvers: [ElementPlusResolver({ importStyle: 'sass' })],}),Components({resolvers: [ElementPlusResolver({ importStyle: 'sass' })],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},css: {preprocessorOptions: {scss: {//自动导入定制化样式文件进行样式覆盖additionalData:'@use "@/assets/index.scss" as *;',}}},
})index.scss主题色配置
点击查看代码
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors:("primary": ("base": #0066bc),"success": ("base": #39b20b),"warning": ("base": #ffad00),"danger": ("base": #e52f2f),"info": ("base": #a847dc),
));
element组件学习
点击查看代码
<template><div><div style="margin: 20px"><!-- 必须有v-model才能输入 --><!-- disabled/readonly只显示文本，不可以输入 --><el-input v-model="data.input" style="width: 240px" placeholder="请输入" :prefix-icon="Search"/> {{data.input}}<el-input style="width: 240px" :suffix-icon="Calendar"/><!-- type="textarea" 变成多行文本 --><el-input type="textarea" v-model="data.descr" style="width: 240px" placeholder="请输入一段描述"/></div><!-- select选择器 --><div style="margin: 20px"><el-selectv-model="data.value1"placeholder="我喜欢"size="large"style="width: 240px"><el-optionv-for="item in data.options1":key="item":label="item":value="item"/></el-select> {{data.value1}}</div><!-- clearable 清空 --><!-- multiple 多选 --><div style="margin: 20px"><el-selectclearablemultiplevalue-key="id"v-model="data.value2"placeholder="我喜欢"size="large"style="width: 240px"><!-- key 唯一 --><el-optionv-for="item in data.options2":key="item.id":label="item.name":value="item.name"/></el-select> {{data.value2}}</div><!-- radio单选框 --><!-- radio单选按钮组 --><div style="margin: 20px;"><el-radio-group v-model="data.sex"><el-radio value="男">男</el-radio><el-radio value="女">女</el-radio></el-radio-group><el-radio-group style="margin-left: 100px" v-model="data.tag" size="large"><el-radio-button label="我发布的内容" value="1" /><el-radio-button label="我点赞的内容" value="2" /><el-radio-button label="我收藏的内容" value="3" /></el-radio-group></div><!-- checkbox多选框 --><div style="margin: 20px"><el-checkbox-group v-model="data.checkList"><el-checkbox v-for="item in data.options2" :key="item.id" :value="item.name" :label="item.name" /></el-checkbox-group><span style="margin-left: 20px">{{ data.checkList }}</span></div><!-- imag图片 --><div style="margin: 20px"><img src="@/assets/logo.svg" alt="" style="width: 100px"><el-image :src="img" style="width: 100px; margin-left: 100px" :preview-src-list="[img,'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg','https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg']"/></div><!-- Carousel走马灯 --><div style="margin: 20px"><el-carousel height="400px" style="width: 550px"><el-carousel-item v-for="item in data.imgs" :key="item"><img style="width: 100%" :src="item" alt=""></el-carousel-item></el-carousel></div></div>
</template><script setup>
import {reactive} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";
//image使用本地图片路径，先导入
import img from '@/assets/logo.svg';
import lun1 from '@/assets/1.jpg';
import lun2 from '@/assets/2.jpg';
import lun3 from '@/assets/3.jpg';
import lun4 from '@/assets/4.jpg';const data = reactive({input: '呵呵',descr: '用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。',value1: '',value2: '',options1: ['唱','跳','rap','篮球'],options2: [{id: 1,name: '唱'},{id: 2,name: '跳'},{id: 3,name: 'rap'},{id: 4,name: '篮球'}],sex: '',tag: '',checkList: [],imgs: [lun1,lun2,lun3,lun4],})
</script>
