分类 vue.js 下的文章

2024-08-23




<template>
  <el-popover
    ref="popover"
    placement="bottom"
    width="400"
    trigger="manual"
    v-model:visible="isPopoverVisible"
    @show="onPopoverShow"
  >
    <template #reference>
      <el-input
        v-model="searchText"
        :placeholder="placeholder"
        @keyup.enter="onEnter"
        @input="onInput"
        @focus="onFocus"
        @blur="onBlur"
      >
        <template #suffix>
          <i v-if="searchText" class="el-input__icon el-icon-circle-close" @click="clearSearch"></i>
          <i v-else class="el-input__icon el-icon-search"></i>
        </template>
      </el-input>
    </template>
    <el-scrollbar height="240px">
      <div class="history-search-list">
        <div
          class="history-search-item"
          v-for="(item, index) in historyList"
          :key="index"
          @click="selectHistory(item)"
        >
          {{ item }}
        </div>
      </div>
    </el-scrollbar>
  </el-popover>
</template>
 
<script>
import { ref } from 'vue';
import { ElPopover, ElInput, ElScrollbar } from 'element-plus';
 
export default {
  components: {
    ElPopover,
    ElInput,
    ElScrollbar
  },
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    }
  },
  setup(props, { emit }) {
    const searchText = ref('');
    const isPopoverVisible = ref(false);
    const historyList = ref(JSON.parse(localStorage.getItem('historyList')) || []);
 
    const onEnter = () => {
      emit('update:searchText', searchText.value.trim());
      addToHistory();
      isPopoverVisible.value = false;
    };
 
    const onInput = () => {
      if (searchText.value.trim()) {
        isPopoverVisible.value = true;
      }
    };
 
    const onFocus = () => {
      isPopoverVisible.value = true;
    };
 
    const onBlur = () => {
      setTimeout(() => {
        isPopoverVisible.value = false;
      }, 200);
    };
 
    const clearSearch = () => {
      searchText.value = '';
      emit('update:searchText', '');
    };
 
    const selectHistory = (item) => {
      searchText.value = item;
      emit('update:searchText', item);
      isPopoverVisible.value = false;
    };
 
    const onPopoverShow = () => {
      if (historyList.value.includes(searchText.value.trim())) {
        historyList.value = historyList.value.filter(i

- 阅读更多 -

vue获取用户的mac地址

System

2024-08-23

所有,vue.js

在Web开发中，出于安全考虑，直接获取用户的MAC地址是不可能的，因为浏览器不允许直接访问这些底层信息。但是，如果你需要在Vue应用程序中进行某种形式的设备识别，你可以考虑使用其他方法，例如使用浏览器提供的API，或者依赖于用户在表单中输入的信息。

如果你的Vue应用程序是一个桌面应用程序（例如，使用Electron构建的），那么你可以使用Node.js的os模块来获取MAC地址。

以下是一个简单的例子，展示了如何在Vue组件中获取并显示MAC地址：




<template>
  <div>
    <p>Your MAC address is: {{ macAddress }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      macAddress: ''
    };
  },
  created() {
    this.getMacAddress();
  },
  methods: {
    getMacAddress() {
      // 仅在Node.js环境中有效
      if (process.platform !== 'win32' && process.platform !== 'darwin') {
        this.macAddress = require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[1]][1].mac;
      } else {
        // 在浏览器环境中，你无法获取MAC地址
        this.macAddress = 'Cannot retrieve MAC address in browser';
      }
    }
  }
};
</script>

请注意，这个例子假设你正在使用Electron，并且运行在非Windows和非macOS系统上。在实际的Web应用程序中，你不能获取用户的MAC地址。如果你需要识别设备，你可能需要依赖于用户输入的标识符，或者使用其他服务器端的机制来关联用户的行为。

- 阅读更多 -

Chrome插件：Vue.js Devtools 高效地开发和调试

System

2024-08-23

所有,vue.js

Vue.js Devtools 是一个用于 Chrome 浏览器的扩展程序，它允许开发者有效地开发和调试 Vue.js 应用程序。

以下是如何安装和使用 Vue.js Devtools 的步骤：

访问 Chrome 网上应用店：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
点击“添加至 Chrome”按钮。
确认添加扩展。
安装完成后，重新加载页面或打开新的标签页。
使用 Vue.js 应用程序，你将会在浏览器的开发者工具中看到一个新的“Vue”标签。
打开开发者工具（在 Chrome 浏览器中按 F12 或右键点击页面元素并选择“检查”）。
现在你可以在“Vue”标签页中查看组件树、状态、计算属性和事件等信息。

注意：Vue.js Devtools 需要你的网页使用 Vue.js 2.0 或更高版本。如果你的项目是基于 Vue 3.x，你可能需要使用专门为 Vue 3 设计的 devtools，例如 Vue Devtools。

- 阅读更多 -

vue-tsc --noEmit导致打包报TS类型错误

System

2024-08-23

所有,vue.js

报错解释：

vue-tsc --noEmit 是用于在 Vue 项目中检查 TypeScript 类型错误，而不产生任何输出文件的命令。如果在执行该命令后，项目的打包过程中报类型错误，这可能意味着在执行 vue-tsc --noEmit 时发现了类型不匹配或者其他类型错误，而这些错误在打包阶段被严格执行导致了报错。

解决方法：

仔细检查 vue-tsc 命令输出的错误信息，确认是否有类型不匹配或未声明的变量等问题。
修改 TypeScript 代码，解决所有类型错误。
如果项目中有类型声明文件（如 .d.ts 文件），确保它们是最新的，并且正确地引用了所有类型。
确保 tsconfig.json 配置正确，没有配置错误导致类型检查不准确。
如果使用了类型守卫（type guard）或者条件类型（conditional types），确保它们的行为符合预期。
在修改代码后，重新运行 vue-tsc --noEmit 确保所有类型错误都被解决。

如果在修正类型错误后，打包问题依然存在，可能需要进一步检查打包工具的配置，比如 Webpack 的配置文件，以确保类型检查与打包过程无冲突。

- 阅读更多 -

Chrome/edge 浏览器中安装 Vue Devtools 插件

System

2024-08-23

所有,vue.js

在 Chrome 或 Edge 浏览器中安装 Vue Devtools 插件的步骤如下：

访问 Vue Devtools 的 GitHub 发布页面：https://github.com/vuejs/devtools/releases
下载最新的 .crx 文件（这是 Chrome 扩展的打包格式）。
打开 Chrome 或 Edge 浏览器的扩展页面：
- 在地址栏输入 chrome://extensions/ 或者在 Edge 浏览器中点击右上角的三个点 -> 更多工具 -> 扩展。
确保开启了“开发者模式”。
拖动 .crx 文件到扩展页面中，这将自动安装扩展。

如果你是开发者并且想要通过开发者模式进行加载，可以使用以下步骤：

Clone the Vue Devtools repository:




git clone https://github.com/vuejs/devtools.git

Navigate into the newly cloned directory:
```
cd devtools
```
Install dependencies:
```
npm install
```
Build the project:
```
npm run build
```
Open Chrome's extension page: chrome://extensions/
Enable “Developer mode”
Click “Load unpacked” and select the devtools/shell directory

请注意，如果你是从 GitHub 发布页面下载 .crx 文件，则不需要编译项目，只需按照上述步骤安装即可。

System

2024-08-23

所有,vue.js

在Vue 3和TypeScript中，组件的生命周期钩子可以使用Composition API的onMounted, onBeforeMount, onShow（仅限于使用了uni-app框架的情况）。

以下是一个简单的例子：




<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const message = ref('Hello, Vue 3!');
 
    onMounted(() => {
      console.log('组件已挂载');
    });
 
    onBeforeMount(() => {
      console.log('即将挂载组件');
    });
 
    // 如果是在uni-app中，可以使用onShow
    onShow(() => {
      console.log('页面显示/切入前台');
    });
 
    return { message };
  },
});
</script>

在这个例子中，onMounted 在组件挂载完成后触发，onBeforeMount 在组件挂载之前触发。如果你使用的是uni-app，可以使用onShow钩子，它会在页面显示/切入前台时触发。

请注意，这些生命周期钩子只能在setup函数内部被调用，并且它们应该直接在setup函数作用域内被调用，不应该在任何函数内部或者在return语句之外调用。

- 阅读更多 -

vue中动态引入图片

System

2024-08-23

所有,vue.js

在Vue中，你可以使用require函数动态地引入图片。这在你需要根据组件的状态或者用户的交互来改变图片资源时特别有用。

以下是一个简单的例子，展示了如何在Vue组件中根据数据属性动态引入图片：




<template>
  <div>
    <img :src="imageSrc" alt="Dynamic Image">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageName: 'example.jpg'
    };
  },
  computed: {
    imageSrc() {
      // 使用require动态引入图片
      return require(`@/assets/images/${this.imageName}`);
    }
  }
};
</script>

在这个例子中，imageName 是一个数据属性，可以根据需要动态改变。imageSrc 是一个计算属性，它使用require函数来构建图片的路径。@/assets/images/ 是图片存放的文件夹路径，确保你的图片放在项目的 src/assets/images/ 目录下。

注意：在webpack构建的Vue项目中，require 可以正确处理动态路径的图片资源。如果你的项目没有使用webpack，那么你可能需要其他方法来动态引入图片。

System

2024-08-23

所有,vue.js




# 安全相关的 Nginx 配置示例
 
# 禁止访问 .htaccess 文件
Location ~ /\.ht {
    Deny all;
}
 
# 禁止访问 /config 目录下的文件
Location ~ ^/config/ {
    Deny all;
}
 
# 禁止访问 /scripts 目录下的文件
Location ~ ^/scripts/ {
    Deny all;
}
 
# 禁止访问 /logs 目录下的文件
Location ~ ^/logs/ {
    Deny all;
}
 
# 禁止访问 /backups 目录下的文件
Location ~ ^/backups/ {
    Deny all;
}
 
# 禁止访问 .yml 或 .yaml 文件
Location ~ \.yml$ {
    Deny all;
}
 
Location ~ \.yaml$ {
    Deny all;
}
 
# 禁止访问 .properties 文件
Location ~ \.properties$ {
    Deny all;
}
 
# 禁止访问 .git 目录下的文件
Location ~ ^/git/ {
    Deny all;
}
 
# 禁止访问 .gitignore 文件
Location ~ /\.gitignore$ {
    Deny all;
}
 
# 禁止访问 .gitmodules 文件
Location ~ /\.gitmodules$ {
    Deny all;
}
 
# 禁止访问 .gitattributs 文件
Location ~ /\.gitattributes$ {
    Deny all;
}
 
# 禁止访问 .env 文件
Location ~ /\.env$ {
    Deny all;
}
 
# 禁止访问 .bak 文件
Location ~ \.bak$ {
    Deny all;
}
 
# 禁止访问 .orig 文件
Location ~ \.orig$ {
    Deny all;
}
 
# 禁止访问 .old 文件
Location ~ \.old$ {
    Deny all;
}
 
# 禁止访问 .swo 文件
Location ~ \.swo$ {
    Deny all;
}
 
# 禁止访问 .swp 文件
Location ~ \.swp$ {
    Deny all;
}
 
# 禁止访问 .lock 文件
Location ~ \.lock$ {
    Deny all;
}
 
# 禁止访问 .DS_Store 文件
Location ~ /\.DS_Store$ {
    Deny all;
}
 
# 禁止访问 .hg 目录下的文件
Location ~ ^/hg/ {
    Deny all;
}
 
# 禁止访问 .svn 目录下的文件
Location ~ ^/svn/ {
    Deny all;
}
 
# 禁止访问 .project 文件
Location ~ /\.project$ {
    Deny all;
}
 
# 禁止访问 .settings 目录下的文件
Location ~ ^/settings/ {
    Deny all;
}
 
# 禁止访问 .cache 目录下的文件
Location ~ ^/cache/ {
    Deny all;
}
 
# 禁止访问 .vscode 目录下的文件
Location ~ ^/vscode/ {
    Deny all;
}
 
# 禁止访问 .idea 目录下的文件
Location ~ ^/idea/ {
    Deny all;
}
 
# 禁止访问 .vs 目录下的文件
Location ~ ^/vs/ {
    Deny all;
}
 
# 禁止访问 .db 文件
Location ~ \.db$ {
    Deny all;
}
 
# 禁止访问 .pdb 文件
Location ~ \.pdb$ {
    Deny all;
}
 
# 禁止访问 .orig 文件
Location ~ \.orig$ {
    Deny all;
}
 
# 禁止访问 .bak 文件
Location ~ \.bak$ {
    Deny all;
}
 
# 禁止访问 .tmp

System

2024-08-23

所有,vue.js




<template>
  <div>
    <!-- 父组件 -->
    <ChildComponent :parentData="parentData" @childEvent="handleChildEvent" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
// 父组件中的数据
const parentData = ref('父组件数据');
 
// 父组件中的事件处理函数
const handleChildEvent = (value) => {
  console.log('子组件触发的事件', value);
};
</script>




<template>
  <div>
    <!-- 子组件 -->
    <button @click="emitChildEvent">触发事件到父组件</button>
  </div>
</template>
 
<script setup>
import { inject, defineExpose } from 'vue';
 
// 通过inject使用父组件传递的数据
const parentData = inject('parentData');
 
// 子组件中的事件触发函数
const emitChildEvent = () => {
  // 使用emit触发事件到父组件
  emit('childEvent', '子组件数据');
};
 
// 定义子组件暴露的方法和属性
const exposedMethod = () => {
  console.log('这是子组件暴露的方法');
};
 
defineExpose({
  exposedMethod
});
</script>

在这个例子中，父组件通过props传递数据给子组件，子组件通过inject获取数据。子组件使用emit触发一个自定义事件，父组件通过方法handleChildEvent监听并响应该事件。子组件还使用defineExpose定义了一个方法并将其暴露给父组件，父组件可以通过ref获取到这个方法并调用。这样的通信方式可以有效地实现跨组件数据和事件的传递。

- 阅读更多 -

Vue中SourceMap的使用方法详解

System

2024-08-23

所有,vue.js

在Vue项目中使用SourceMap主要是为了在开发环境中提供源代码映射，以便开发者可以在浏览器的开发者工具中查看并调试经过压缩或转换的代码。

以下是在Vue项目中使用SourceMap的步骤：

确保在vue.config.js文件中启用了source map。默认情况下，Vue CLI 3+已经为你配置好了。




// vue.config.js
module.exports = {
  // ...
  productionSourceMap: false, // 生产环境不生成source map
  // ...
};

如果你需要在开发环境总是生成source map，确保productionSourceMap设置为true。




// vue.config.js
module.exports = {
  // ...
  productionSourceMap: process.env.NODE_ENV !== 'development',
  // ...
};

如果需要更细致地控制source map的生成，可以使用webpack的配置来实现。




// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      // 开发环境下的配置
      config.devtool = 'source-map'; // 或者 'cheap-module-source-map', 'eval-source-map'等
    } else {
      // 生产环境下的配置
      config.devtool = 'hidden-source-map';
    }
  }
};

使用devtool属性时，可以选择不同的值来改变source map的生成方式和大小，具体可以查看webpack的文档了解不同devtool值的区别。

以上步骤可以确保在Vue项目中正确使用并配置SourceMap，从而在开发过程中提高调试效率。

- 阅读更多 -