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

插件开发2024-06-27 17:13

文章目录

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

bash 复制代码 
#创建项目
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文件修改如下：

javascript 复制代码 
//全局挂载
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.修改为暗黑主题

bash 复制代码 
npm i sass
npm i scss

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

javascript 复制代码 
import 'element-plus/theme-chalk/dark/css-vars.css'

4.2.添加自定义样式文件

javascript 复制代码 
import './assets/main.css'

main.css中内容为：

css 复制代码 
html.dark {
    --bPageBgColor: #232323;
    --bTextColor: #fff;
    --roleHeaderBgColor: #0e0e0e;
    --selectRowBgColor: #414243;
}

4.3.html页面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" 然后重启项目。

javascript 复制代码 
    "rules": {
      "no-unused-vars": "off"
    }

5.2.关闭typescript检查

在设置中搜validate->往下滑找到Tyscript>Validate：Enable选项，取消勾选->重启一下vscode

5.3.调试器支持

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

html 复制代码 
"no-debugger": "off"

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

bash 复制代码 
"rules": {
    "no-unused-vars": "off",
    "no-debugger": "off",
    "no-undef": 0 ,
    "no-unreachable": 0
}

6.element常用标签

6.1.下拉列表|el-select

下拉列表数据绑定。

html 复制代码 
<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 框架中的一个组件，用于创建对话框,提供了丰富的功能和选项，可以用来创建各种类型的对话框，如信息确认框、表单填写框等。

html 复制代码 
<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函数。

javascript 复制代码 
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来实现响应式。

javascript 复制代码 
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) {
    //删除/r
    excelData = 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 的响应式系统是通过属性访问进行追踪的，如果我们直接"替换"一个响应式对象，这会导致对初始引用的响应性连接丢失。

javascript 复制代码 
<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.将响应式对象的属性赋值或解构至本地变量，或是将该属性传入一个函数时，会失去响应性。

javascript 复制代码 
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) {
  // 不会影响 state
  count++
}
callSomeFunction(state.count)

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

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

Vue 提供了一个 ref() 方法来允许我们创建使用任何值类型的响应式 ref 。

javascript 复制代码 
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，互访问

javascript 复制代码 
  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.常用组织

javascript 复制代码 
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) {
  //删除/r
  excelData = 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绑定范例

javascript 复制代码 
<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 指向。

相关推荐
半斗米4 小时前
VSCode + GDB + J-Link 单片机程序调试实践
vscode·单片机·mcu·gdb·嵌入式系统·调试·j-link
蓝胖子的多啦A梦5 小时前
【问题已解决】Vue管理后台，点击登录按钮，会发起两次网络请求（竟然是vscode Compile Hero编译插件导致的）
前端·vue.js·vscode
小绵羊不怕大灰狼5 小时前
VSCode 插件开发经验小结
ide·vscode·编辑器
每日亿学5 小时前
Docker在windows上使用vscode远程连接容器
linux·vscode·docker·ssh
墨轩尘6 小时前
vscode语言模式
ide·vscode·编辑器
乐吾乐科技8 小时前
【国产开源可视化引擎Meta2d.js】快速上手
开发语言·前端·javascript·开源·编辑器·数据可视化·大屏端
海滩超人8 小时前
vscode php dubug xdubg
ide·vscode·php
geovindu8 小时前
python: create Envircomnet in Visual Studio Code 创建虚拟环境
ide·vscode·python
ZXF_H8 小时前
VSCode打开其它IDE项目注释显示乱码的解决方法
ide·vscode·编辑器
哭哭啼10 小时前
VSCode中常用的快捷键
ide·vscode·编辑器
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）052025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题06【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解0751-2 万字长文，深度解读端到端自动驾驶的挑战和前沿08通达信神奇九转指标原理及选股公式，无未来函数，数字不消失09浏览器插件——ModHeader 的分享和学习10＜工控＞＜PLC＞汇川Easy521系列PLC与汇川SV630N伺服进行EtherCat通讯的相关配置及指令编写