深圳短视频关键词搜索排名推广seo和sem的概念
目录
一、Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接)
二、Vue3集成Element-Plus。(实操)
（1）项目目录下安装Element-Plus组件依赖。
（2）main.js文件中引入依赖。
（3）main.js中导入中国语言包并配置语言环境。
（4）element-plus组件—按钮。
<1>基本按钮样式渲染。
<2>按钮添加事件绑定。(v-on:)
<3>按钮绑定样式属性。(v-bind)
<4>Button API。
朴素按钮。(变成虚框)
按钮大小—size。
"加载中"样式按钮。
color。(设置按钮背景颜色)
style="color:xxx"。(设置按钮文本颜色)
（5）element-plus组件—Icon图标。
<1>安装element-plus的Icon依赖组件。
<2>main.js中注册所有图标。
<3>常用图标(icon)的使用。
"编辑"图标。
"阅读量"图标。
"删除"按钮。(按钮中导入图标)
"搜索"图标。(input输入框中)
（6）设置自定义主题。(element-plus进阶)
<1>执行命令，安装指定插件依赖。
<2>assets目录下新建index.scss文件。(设置主题色)
<3>配置vite.config.js文件中引用主题配置。
<4>自定义主题设置成功后——按钮颜色。
<5>原本默认主题——按钮颜色。
一、Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接)
- Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
- Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客
- Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)-CSDN博客
二、Vue3集成Element-Plus。(实操)
element-plus（国内镜像访问网址）：A Vue 3 UI Framework | Element Plus
（1）项目目录下安装Element-Plus组件依赖。
- 命令如下。
#安装Element-Plus组件依赖 npm install element-plus -s
- 打开IDEA项目的终端。就需要完成下面两个操作。
- 1、cd 项目本身的目录。
- 2、执行npm命令操作。
（2）main.js文件中引入依赖。
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'
- 官网教学位置。
- 实际导入如下。
（3）main.js中导入中国语言包并配置语言环境。
- 这样可以让作为国内的程序员（尤指自己hh..）可读性更好。
import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, {locale: zhCn, })
- 官网教学位置。
- 最终main.js文件导入情况如下所示。
下面测试element-plus组件依赖是否可以应用了。
前往官网的组件模块去测试各种功能、配置组件等等的使用。
（4）element-plus组件—按钮。
<1>基本按钮样式渲染。
<el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button>
<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 30px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div></div> </template><script setup>import {reactive, ref} from "vue";//第二种定义数据的方式 const data = reactive({ })</script>
- 能看到页面成功渲染就证明已经成功实现了Vue3集成element-plus！
<2>按钮添加事件绑定。(v-on:)
- 使用"v-on:"绑定按钮的鼠标点击事件。
<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 30px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button v-on:click="clickSuccess" type="success">点我好运+1</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div></div> </template><script setup>import {reactive, ref} from "vue";//第二种定义数据的方式 const data = reactive({ })const clickSuccess = () =>{alert("你使用的是：element-plus组件！你的好运+1") }</script>
- 页面成功弹出提示。证明element-plus的组件也是支持所有事件的绑定。
<3>按钮绑定样式属性。(v-bind)
<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 30px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div><el-button v-bind:style="data.css01">Default</el-button><el-button type="primary">Primary</el-button><el-button v-on:click="clickSuccess" type="success">点我好运+1</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div></div> </template><script setup>import {reactive, ref} from "vue";//第二种定义数据的方式 const data = reactive({css01:{color : 'red',} })const clickSuccess = () =>{alert("你使用的是：element-plus组件！你的好运+1") }</script>
- 通过绑定属性的方式——把按钮中的文本颜色变成对应样式设置的red。
<4>Button API。
- 可以继续往下查看官网提供的Button API。这里主要是关于按钮的一些属性设置。可以在原有的按钮样式上进行修改与调整。
朴素按钮。(变成虚框)
<el-button type="primary">Primary</el-button> <el-button type="primary" plain>Primary</el-button>
按钮大小—size。
<el-button type="warning">Warning</el-button> <el-button type="warning" size="large">Warning</el-button>
"加载中"样式按钮。
<el-button type="danger" loading>Danger</el-button>
color。(设置按钮背景颜色)
style="color:xxx"。(设置按钮文本颜色)
<el-button type="info">Info</el-button> <el-button type="info" color="yellow">Info</el-button> <el-button type="info" style="color:red;">Info</el-button>
（5）element-plus组件—Icon图标。
<1>安装element-plus的Icon依赖组件。
#安装命令 npm install @element-plus/icons-vue
- 打开IDEA终端，在项目目录下继续执行命令即可。
<2>main.js中注册所有图标。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component) }
<3>常用图标(icon)的使用。
"编辑"图标。
<div style="margin: 30px"><el-icon :size="20"><Edit /></el-icon> </div>
"阅读量"图标。
<div style="margin: 30px"><el-icon :size="20"><Edit /></el-icon><span style="margin-left: 30px"><el-icon><View /></el-icon>1000+</span> </div>
- 对上面的"阅读量"图标的属性进行调整设置。（top属性巧妙设置！）
<span style="margin-left: 30px"><el-icon style="margin-right: 10px"><View /></el-icon><el-icon size="20" style="top: 4px" ><View /></el-icon>1000+ </span>
- 记得使用这些图标都是需要导入的。
"删除"按钮。(按钮中导入图标)
<el-button type="danger" :icon="Delete" circle />
"搜索"图标。(input输入框中)
<el-inputv-model="data.str"style="width: 240px"placeholder="Type something":prefix-icon="Search" />import {Delete, Edit, Search, View} from "@element-plus/icons-vue"; //第二种定义数据的方式 const data = reactive({css01:{color : 'red',},str:'www.baidu.com' })
（6）设置自定义主题。(element-plus进阶)
- 官网具体位置。
<1>执行命令，安装指定插件依赖。
#依次执行以下命令安装依赖 npm i sass@1.71.1 -Dnpm i unplugin-auto-import -Dnpm i unplugin-element-plus -Dnpm i unplugin-vue-components -D
- 依次执行完命令后。可以在package.json文件中查看所安装的插件依赖。
<2>assets目录下新建index.scss文件。(设置主题色)
@forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ("primary":("base":#0b5596),"success": ("base": #3aaa14),"warning": ("base": #e4da17),"danger": ("base": #f11d1d),"info": ("base": #8a47dc), ));
<3>配置vite.config.js文件中引用主题配置。
- 导入上面安装的四个插件依赖。
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'
- plugins中按需引入主题配置。
// 按需定制主题配置ElementPlus( {useSource: true,}),AutoImport( {resolvers:[ElementPlusResolver( { importStyle: 'sass' })], }),Components( {resolvers:[ElementPlusResolver( { importStyle: 'sass' })], }),
- 在resolve下面再添加一个css。导入上面创建的index.scss文件。
css: {preprocessorOptions: {scss: {//自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/assets/index.scss" as *;`,}}},
- 运行dev。出现报错。经过博主分析：很可能是更高版本的element-plus版本——>适配的sass版本应该也跟着版本号提高。
- 当前element-plus版本2.9.6：
- IDEA终端中：执行提高sass版本命令。
- 将sass版本提升到1.79.3再次进行尝试。
npm i sass@1.79.3
- 再次启动运行。无任何报错了。
- 重新写div盒子和几个按钮。
<4>自定义主题设置成功后——按钮颜色。
- 可以很明显的发现了主题的颜色修改成index.scss定义的颜色深浅。
<5>原本默认主题——按钮颜色。
