vue开发常见需求

v-for

遍历数组

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
  </li>
</ul>

遍历对象

<p v-for="(val,key) in obj" :key="key">--键是--{{key}}--值是--{{val}}</p>

动态class

 <li
    v-for="item in list"
    :key="item.id"
    :class="{ activeProject: item.isActive }"
    @click="changeActive(item)"
>
    <span>{{ item.name }}</span>
</li>

<script>
function changeActive(item) {
    list.value.forEach(e => {
        e.isActive = e.id === item.id;
    })
}
</script>

重写css

<style scoped>
.main-class >>> .jsoneditor-menu {
    // /*这种是vue2的写法，是错误的*/
}

/*应该是这样的写法*/
.main-class :deep(.jsoneditor-menu) {
  background-color: #f0f0f0;
  color: #333;
}
</style>

静态资源访问

在vue3+vite的组合中，静态资源访问比如图片可能会遇到坑。

直接导入图片

如果你放在了非public公共目录下的话，可以用这种方式。

<template>
  <img :src="logo" alt="Logo">
</template>

<script setup>
import logo from './assets/logo.png';
</script>

公共目录public

你可以将它们放置在 public 文件夹中。所有位于 public 文件夹中的资源都会被直接复制到输出目录，并且可以通过根路径访问

<img src="/img/pay-success.png" alt="Logo">

如何读取项目内的txt内容,不用ajax方式

如果你的Vue 3项目是基于Vite构建的，那么你可以更简单地做到这一点，因为Vite默认支持导入文本文件作为字符串：

直接导入文本文件 直接在你的Vue组件或JavaScript文件中导入.txt文件即可：

import txtContent from './path/to/your/file.txt?raw';

export default {
  name: 'MyComponent',
  data() {
    return {
      fileContent: txtContent,
    };
  },
  mounted() {
    console.log(this.fileContent); // 输出文本文件的内容
  }
};

注意：在Vite中，你需要添加?raw查询参数来告诉Vite以原始文本的形式导入文件。

vue 项目history模式刷新404问题解决办法

vue项目history模式部署到服务器后 ，根路径访问没有问题，但是进入其他功能再刷新页面就会出现404，因为你没在nginx或者apache配置上面加上重定向跳转。

nginx配置内容：

解决办法，只需要加上这段配置：

location / {
  try_files $uri $uri/ @router;
  index index.html;
}
 
location @router {
  rewrite ^.*$ /index.html last;
}

或：

location / {
        root   /apps/web/www.test.com;
        index  index.html index.htm;
        # vue router history模式404
        try_files $uri $uri/ /index.html;
        # 允许 所有头部 所有$corsHost域 所有方法
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    }

这句配置的意思是每次匹配url路径时候找不到对应静态资源时候调制跳转到index.html文件