vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

2024-06-24 11:44
文章标签 javascript 问题 涉及 常见 项目 vue 创建 vue3 用法 vscode 错误 修改 插件 frontend 标签 主题 element 暗黑

本文主要是介绍vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 1.vscode创建运行编译vue3项目
  • 2.添加项目资源
  • 3.添加element-plus元素
  • 4.修改为暗黑主题
    • 4.1.在main.js主文件中引入暗黑样式
    • 4.2.添加自定义样式文件
    • 4.3.html页面html标签添加样式
  • 5.常见错误
    • 5.1.未使用变量
    • 5.2.关闭typescript检查
    • 5.3.调试器支持
    • 5.4.允许未到达代码和未定义代码
  • 6.element常用标签
    • 6.1.下拉列表|el-select
    • 6.2.对话框|el-dialog
  • 7.用法
    • 7.1.其它函数访问data数据
    • 7.2.reactive的使用-异步回调函数中data中数据的引用
    • 7.3.ref的使用-异步回调函数中data中数据的引用
    • 7.4.setup函数返回值-及与data和method的关系
    • 7.5.getCurrentInstance
    • 7.6.纯setup-组合式api绑定范例
    • 7.7.this对象

1.vscode创建运行编译vue3项目

#创建项目
vue create resourceshow
cd resourceshow
#运行项目
npm run serve#安装界面
npm install element-plus --save
npm i qrcode --save#编译项目
npm run build

2.添加项目资源

新建图片文件夹，css文件夹。

3.添加element-plus元素

在main.js文件修改如下：

//全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4.修改为暗黑主题

npm i sass
npm i scss

4.1.在main.js主文件中引入暗黑样式

import 'element-plus/theme-chalk/dark/css-vars.css'

4.2.添加自定义样式文件

import './assets/main.css'

main.css中内容为：

html.dark {--bPageBgColor: #232323;--bTextColor: #fff;--roleHeaderBgColor: #0e0e0e;--selectRowBgColor: #414243;
}

4.3.html页面html标签添加样式

<html lang="" class="dark">

5.常见错误

5.1.未使用变量

error ‘defaultdata’ is assigned a value but never used no-unused-vars

在 package.json 的 rules 里面 添加： “no-unused-vars”: “off” 然后重启项目。

    "rules": {"no-unused-vars": "off"}

5.2.关闭typescript检查

在设置中搜validate->往下滑找到Tyscript>Validate：Enable选项，取消勾选->重启一下vscode
在这里插入图片描述

5.3.调试器支持

在 package.json 的 rules 里面 添加：“no-debugger”: “off” 然后重启项目。

"no-debugger": "off"

5.4.允许未到达代码和未定义代码

"rules": {"no-unused-vars": "off","no-debugger": "off","no-undef": 0 ,"no-unreachable": 0
}

6.element常用标签

6.1.下拉列表|el-select

下拉列表数据绑定。

<template><img alt="Vue logo" src="../img/banner.png"><div><el-button v-model="isDark" type="primary">Primary</el-button></div><el-switch v-model="isDark"/><el-select v-model="user.name" placeholder="请选择"><el-option v-for="item in nameList" :key="item" :label="item" :value="item"></el-option></el-select><p>Message is: {{ user.name }}</p></template><script>
import { useDark, useToggle } from '@vueuse/core'// const isDark = useDark()
// const toggleDark = useToggle(isDark)export default {name: 'App',components: {//HelloWorld},data() {return {nameList: ["clz", "czh", "ccc"],user: {name: ""},};}
}
</script>

6.2.对话框|el-dialog

el-dialog 是 Element UI 框架中的一个组件，用于创建对话框,提供了丰富的功能和选项，可以用来创建各种类型的对话框，如信息确认框、表单填写框等。

<template><div id="Login"><el-dialog title="登录" v-model="dialogVisible" width="300px" :before-close="LoginClose"><img width="248px" height="248px" src="../assets/weixin248.png"><template #footer><span class="dialog-footer"><el-button @click="LoginClose">取 消</el-button><el-button type="primary" @click="LoginOK">确 定</el-button></span></template></el-dialog></div>
</template><script>
import { ref, watch } from 'vue'export default {emits:["Custom-LoginOK"],props: {visible: {type: Boolean,default: false}},setup(props, ctx) {const dialogVisible = ref(false)const LoginClose = () => {//修改属性值ctx.emit("update:visible", false);//dialogVisible.value=false;};const LoginOK = () => {//ctx.emit("update:visible", false);ctx.emit("Custom-LoginOK","");}//属性变换值也发生变化watch(() => props.visible, (val) => {console.log(props.visible, val);dialogVisible.value = val});return {dialogVisible,LoginOK,LoginClose}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

7.用法

7.1.其它函数访问data数据

其它响应函数中访问data函数中的数据对象，可以使用this关键词，如methods对象中的ClearData函数。

export default {name: 'App',components: {//HelloWorld},data() {return {codebarNameList: ["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"],fontNameList: ["Arial", "宋体", "黑体", "微软雅黑"],codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},methods: {    ClearData(){this.codebarPara.data="";//const message = ref('Hello Vue3');}}
}

7.2.reactive的使用-异步回调函数中data中数据的引用

在介绍ref和reactive之前，我们先了解一下什么是响应式对象。简单来说，响应式对象是指当数据发生改变时，相关的视图会自动更新。这意味着我们只需要关注数据的变化，而无需手动去更新视图。Vue 3通过使用ref和reactive来实现响应式。

import { useDark, useToggle } from '@vueuse/core'
import { ref, computed } from 'vue';
import { reactive } from 'vue';// const isDark = useDark()
// const toggleDark = useToggle(isDark)
const CodeBarData = ref(null);//excel数据处理
function ExcelDataOpt(excelData) {//删除/rexcelData = excelData.replace(/\r/g, '');//\t转|excelData = excelData.replace(/\t/g, '|');return excelData;
}export default {name: 'Test',components: {//HelloWorld},data() {return {codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},methods: {CodebarGenerate() {},ClearData() {this.codebarPara.data = "";//const message = ref('Hello Vue3');},ParseDataFromExcel() {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}//绑定当前对象数据let thisData = reactive(this);GetClipData().then(function (data) {//console.log(data);thisData.codebarPara.data = ExcelDataOpt(data);});}}
}

reactive() 虽然强大，但也有以下几条限制：

a.仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的原始类型无效。
b.因为 Vue 的响应式系统是通过属性访问进行追踪的，如果我们直接“替换”一个响应式对象，这会导致对初始引用的响应性连接丢失。

<script setup>
import { reactive } from 'vue'let state = reactive({ count: 0 })
function change() {// 非响应式替换state = reactive({ count: 1 })
}
</script><template><button @click="change">{{ state }} <!-- 当点击button时，始终显示为 { "count": 0 } --></button>
</template>

c.将响应式对象的属性赋值或解构至本地变量，或是将该属性传入一个函数时，会失去响应性。

const state = reactive({ count: 0 })// n 是一个局部变量，和 state.count 失去响应性连接
let n = state.count
// 不会影响 state
n++// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响 state
count++// 参数 count 同样和 state.count 失去了响应性连接
function callSomeFunction(count) {// 不会影响 statecount++
}
callSomeFunction(state.count)

7.3.ref的使用-异步回调函数中data中数据的引用

在介绍ref和reactive之前，我们先了解一下什么是响应式对象。简单来说，响应式对象是指当数据发生改变时，相关的视图会自动更新。这意味着我们只需要关注数据的变化，而无需手动去更新视图。Vue 3通过使用ref和reactive来实现响应式。
Vue 提供了一个 ref() 方法来允许我们创建使用任何值类型的响应式 ref 。

import { useDark, useToggle } from '@vueuse/core'
import { ref, computed } from 'vue';
import { reactive } from 'vue';
export default {name: 'Test',components: {//HelloWorld},data() {return {codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},methods: {CodebarGenerate() {},ClearData() {this.codebarPara.data = "";//const message = ref('Hello Vue3');},ParseDataFromExcel() {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}//绑定当前对象数据let thisData = ref(this);GetClipData().then(function (data) {//console.log(data);thisData.value.codebarPara.data = ExcelDataOpt(data);});}}
}

7.4.setup函数返回值-及与data和method的关系

setup函数的使用，通过返回值将数据和方法传到页面，返回值也可以是一个箭头函数
setup先于data和method执行，所以无法读取到this和data，method的内容，反之可以。可以直接将方法放在setup下，然后再进行暴露即可使用。
【注意】setup 内部的属性和方法，必须 return 暴露出来，将属性挂载到实例上，否则没有办法使用。

setup函数：第一个参数是 props ，表示父组件给子组件传值，props 是响应式的，当传入新的 props 时，自动更新。
第二个参数是context 上下文环境，其中包含了 属性、插槽、自定义事件三部分。

范例1，互访问

  import { useDark, useToggle } from '@vueuse/core'import { getCurrentInstance, reactive, toRefs, watch, ref } from 'vue'import { onMounted } from 'vue'export default {name: 'test',components: {//HelloWorld},data() {return {codebarNameList: ["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"],fontNameList: ["Arial", "宋体", "黑体", "微软雅黑"],codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},setup(props, ctx) {const hello = ref(null);const { proxy } = getCurrentInstance();//全局this对象//加载onMounted(() => {console.log(hello.value); // <div>知了插件</div>var helloObj = hello.value;helloObj.id="123";});const ClearDataClicked = () => {//访问data数据成员对象，并修改值proxy.codebarPara.data="";};return {hello,ClearDataClicked}},methods: {CodebarGenerate() {//访问setup和data中暴露的值和函数this.ClearDataClicked();return; },  ParseDataFromExcel(){//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();        return source;}//绑定当前对象数据let thisData = ref(this);GetClipData().then(function(data){//console.log(data);thisData.value.codebarPara.data=ExcelDataOpt(data);//hello.value=data;});      }}}

范例2.常用组织

import { useDark, useToggle } from '@vueuse/core'
import { defineComponent, getCurrentInstance, reactive, toRefs, watch, ref } from 'vue'
import { onMounted } from 'vue'// const isDark = useDark()
// const toggleDark = useToggle(isDark)//excel数据处理
function ExcelDataOpt(excelData) {//删除/rexcelData = excelData.replace(/\r/g, '');//\t转|excelData = excelData.replace(/\t/g, '|');return excelData;
}export default {name: 'App',components: {//HelloWorld},data() {return {codebarNameList: ["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"],fontNameList: ["Arial", "宋体", "黑体", "微软雅黑"],codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},setup(props, ctx) {const CodebarParaData = ref(null);onMounted(() => {console.log(CodebarParaData.value); // <div>知了插件</div>});const { proxy } = getCurrentInstance();const ClearDataClicked = () => {var cd = proxy.codebarPara;cd.data = "";};const CodebarGenerate = () => {      }const ParseDataFromExcel = () => {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}GetClipData().then(function (data) {//console.log(data);proxy.codebarPara.data = ExcelDataOpt(data);//hello.value=data;});}return {hello,ClearDataClicked,CodebarGenerate,ParseDataFromExcel}},methods: {}
}

7.5.getCurrentInstance

getCurrentInstance 只能在 setup 或生命周期钩子中使用，内部api建议不要使用。

7.6.纯setup-组合式api绑定范例

<template>
<el-input ref="CodebarParaData" type="textarea" v-model="codebarPara.data" :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
</template>
<script>
import { useDark, useToggle } from '@vueuse/core'
import { getCurrentInstance, reactive, toRefs, watch, ref } from 'vue'
import { onMounted } from 'vue'export default {name: 'App',components: {//HelloWorld},data() {return {      };},setup(props, ctx) {const CodebarParaData = ref(null);onMounted(() => {console.log(CodebarParaData.value); // <div>知了插件</div>});const codebarNameList = ref(["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"]);const fontNameList = ref(["Arial", "宋体", "黑体", "微软雅黑"]);const codebarPara = ref({name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,});const { proxy } = getCurrentInstance();const ClearDataClicked = () => {codebarPara.value.data = "";};const CodebarGenerate = () => {}const ParseDataFromExcel = () => {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}GetClipData().then(function (data) {codebarPara.value.data = ExcelDataOpt(data);});}return {CodebarParaData,ClearDataClicked,CodebarGenerate,ParseDataFromExcel,codebarNameList,fontNameList,codebarPara}},methods: {}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;/*color: #2c3e50;*/color: var(--bTextColor);margin: 0px;padding-left: 0;height: 100%;
}
</style>

7.7.this对象

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。

这篇关于vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1090058。

相关文章

JDK21对虚拟线程的几种用法实践指南

JDK21对虚拟线程的几种用法实践指南

《JDK21对虚拟线程的几种用法实践指南》虚拟线程是Java中的一种轻量级线程,由JVM管理,特别适合于I/O密集型任务,：本文主要介绍JDK21对虚拟线程的几种用法,文中通过代码介绍的非常详细,... 目录一、参考官方文档二、什么是虚拟线程三、几种用法1、Thread.ofVirtual().start(
阅读更多...
Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
IDEA和GIT关于文件中LF和CRLF问题及解决

IDEA和GIT关于文件中LF和CRLF问题及解决

《IDEA和GIT关于文件中LF和CRLF问题及解决》文章总结：因IDEA默认使用CRLF换行符导致Shell脚本在Linux运行报错,需在编辑器和Git中统一为LF,通过调整Git的core.aut... 目录问题描述问题思考解决过程总结问题描述项目软件安装shell脚本上git仓库管理，但拉取后，上l
阅读更多...
Linux创建服务使用systemctl管理详解

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限：所有者读写js，其他
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2