前端开发技术分享

Component template should contain exactly one root element. If you are using v-if on multiple eleme

Mon, 23 Feb 2026 10:33:25 +0800

情境描述

今天使用vue框架做项目的时候，突然出错

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

到百度翻译成中文的意思是

组件模板应正好包含一个根元素。如果在多个元素上使用v-if，请改用v-else-if来链接它们。

错误发生原因

每一个vue文件就是vue组件，在vue组件当中，有一条规定，就是，template标签只能有一个儿子，不能有多个儿子，也就是说，以下的写法是错误的。

<template>  
    <home-title></home-title>
    <flist-content></flist-content>
    <page></page>
</template>

正确的是，我们应该使用一个大盒子将这三个组件都包裹起来，这里的大盒子，我使用div元素来描述。比如这样：

<template>
    <div>
        <home-title></home-title>
        <flist-content></flist-content>
        <page></page>
    </div>
</template>

小结：

记住，template只能有一个儿子，但是，template可以有n多个孙子。

原文链接：https://blog.csdn.net/weixin_39553363/article/details/104151953

vue项目中配置不同的环境是否显示vConsole

Tue, 30 Dec 2025 15:26:35 +0800

前言

为了让测试人员能够在手机、平板上也能看到像浏览器f12那样的调试工具，便于查看日志数据和网络请求等，专门搜了一下，发现这个vConsole官方的调试工具真的很强大，十分好用。

vConsole的简介

一个轻量、可拓展、针对手机网页移动端的前端开发者调试面板。
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。
现在 vConsole 是微信小程序的官方调试工具

主要功能

日志(Logs)： console.log|info|error|...
网络(Network)： XMLHttpRequest, Fetch, sendBeacon
节点(Element)： HTML 节点树
存储(Storage)： Cookies, LocalStorage, SessionStorage
手动执行 JS 命令行
自定义插件

安装

方式一：npm:
```
npm install vconsole -D
```
方式二：CDN：

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  var vConsole = new window.VConsole();
</script>

引入

在main.js中

1、直接使用

import VConsole from 'vconsole'
Vue.use(vConsole)

2、实际项目开发中，往往有多个环境。

所以一般做一下判断，生产环境运行就不用显示了

import VConsole from 'vconsole'
const isProd = process.env.NODE_ENV === 'production'
if (!isProd) {
  const vConsole = new VConsole()
  Vue.use(vConsole)
}

使用

运行项目就直接出现在右下角vConsole按钮，点击就能用了。直接进入调试模式，非常方便，和浏览器f12一样。

官网演示：http://wechatfe.github.io/vconsole/demo.html

原文地址：https://www.jb51.net/javascript/328934yhq.htm

VUE开发报错：Module build failed (from ./node_modules/ ...

Mon, 20 Oct 2025 11:25:52 +0800

VUE开发报错：

Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
语法错误: Unexpected token (1:309)

at pages……:1

1. 错误描述：修改完vue文件后，提示语法错误，并且还在第一行。
2. 错误产生原因：页面有语法错误。
3. 解决方案：仔细检查代码的页面部分，如还是没看出来，就一部分一部分删除，缩小范围。。一般是标签的属性内语法错误，比如文本+变量的写法多了一个符号。。为什么一般是这样呢，因为其他语法错误，IDE一般都会提示。

uni-app 组件引用错误，仅支持 import 方式引入组件

Sat, 23 Aug 2025 15:56:16 +0800

经查阅官方文档得知，符合uniapp规则的自定义组件，不需要引用以及注册，详见：https://uniapp.dcloud.net.cn/component/#easycom

解决方案：

1. 去除使用该自定义组件的页面中对该组件的注册，即去除components里对该组件的注册。**（推荐）**
2. 增加使用该自定义组件的页面中对该组件的import引入。*（不推荐）*

uni-app 编译出来的微信小程序中自定义组件没有wxss

Sun, 22 Jun 2025 11:26:12 +0800

经查阅官方文档得知，符合uniapp规则的自定义组件，不需要引用以及注册，详见：https://uniapp.dcloud.net.cn/component/#easycom

解决方案：

去除使用该自定义组件的页面中对该组件的import引入。---推荐
增加使用该自定义组件的页面中对该组件的注册，即components里注册组件。---不推荐

微信小程序 -- 由于隐私协议未设置，影响隐私相关api调用

Sun, 20 Apr 2025 11:52:46 +0800

在app.json中，usePrivacyCheck设置为false，可以免除在开发者工具中调试时的影响，开发版暂未测试。

VUE开发报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent ...

Sun, 23 Feb 2025 10:25:36 +0800

VUE开发报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "xxx".

翻译：避免直接修改 props 的值，因为每当父组件重新渲染时，props 的值将被覆盖。相反，使用基于 props 值的数据或计算属性。

意思就是，不要直接使用父组件传的值进行渲染，要使用另一个可替代参数或计算属性。

vue 子组件调用父组件方法

Sun, 22 Dec 2024 10:33:02 +0800

示例：

    父组件：
  ...（略）
  <子组件 @触发的方法="父组件方法"></子组件>
  ...（略）
  父组件方法(参数对象){
      let {参数1，参数2，...}={...参数对象}
  }
  
  子组件：
  ...（略）
  //调用父组件方法
  this.$emit("触发的方法",参数对象)

js 中 object循环

Sun, 20 Oct 2024 10:22:07 +0800

1. 使用for...in循环
for...in语句在一个对象的所有可枚举属性上迭代。

let obj = {a:1, b:2, c:3};
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
        console.log(key, obj[key]);
  }
}

2. 使用Object.keys()
Object.keys()方法会返回一个由一个对象自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致。

 let obj = {a:1, b:2, c:3};
 Object.keys(obj).forEach((key) => {
     console.log(key, obj[key]);
 });

3. 使用Object.entries()
Object.entries()方法会返回一个给定对象自身可枚举属性的键值对数组。

let obj = {a:1, b:2, c:3};
Object.entries(obj).forEach(([key, value]) => {
    console.log(key, value);
});

4. 使用Object.getOwnPropertyNames()
Object.getOwnPropertyNames()方法返回一个数组，包含对象自身所有属性的名称（包括不可枚举属性）。

let obj = {a:1, b:2, c:3};
Object.getOwnPropertyNames(obj).forEach((key) => {
    console.log(key, obj[key]);
});

UniApp H5 跨域代理配置并使用

Mon, 26 Aug 2024 10:00:36 +0800

UniApp H5 跨域代理配置并使用

一、方式一：修改 manifest.json 文件

在 UniApp 找到 manifest.json -》源码视图，添加 h5 配置项：

"h5" : {
    "devServer" : {
        "disableHostCheck" : true,
        "proxy" : {
            "/api" : {
                "target" : "http://www.dzm.com",
                "changeOrigin" : true,
                "secure" : false,
                "ws": false,
                "pathRewrite" : {
                    "^/api" : ""
                }
            }
        }
    }}

二、方式二：添加 vue.config.js 文件

像 vue 开发一样，手动创建一个 vue.config.js 文件，然后添加上代理，vue.config.js 只能创建在项目的根目录，不然会无法识别到。

注意：UniApp 会识别 vue.config.js 文件，但是 manifest.json 的优先级
要高于 vue.config.js 文件，所以看需求选择一个配置即可。

module.exports = {
    devServer: {
        disableHostCheck: true,
        proxy: {
            '/api': {
                target: 'http://www.dzm.com',
                changeOrigin: true,
                secure: false,
                ws: false,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }}