分类 vue.js 下的文章

2024-08-17

在Ubuntu 18.04上安装并设置VS Code以使用Vue 3和Volar，你需要按照以下步骤操作：

确保你已经安装了Node.js和npm。如果没有，可以使用以下命令安装：
```
sudo apt update
sudo apt install nodejs npm
```
安装VS Code的Vue Language Features (Volar)扩展。打开VS Code，然后按照以下步骤操作：
- 打开扩展视图 (Ctrl+Shift+X)
- 搜索并安装 "Vue Language Features (Volar)" 扩展
确保你的项目使用Vue 3，并且已经配置了Volar。如果还没有配置，你可以使用Vite创建一个新项目，它内置支持Volar。
使用以下命令安装Volar：
```
npm init vue@latest
```
在创建项目的过程中，选择需要的配置，并确保选中Volar。
完成项目设置后，打开项目文件夹，并在VS Code中打开。
确保你的VS Code已经更新到最新版本，以便能够支持Volar的最新特性。

以上步骤将会在你的Ubuntu 18.04系统上安装并设置VS Code以便你可以使用Volar进行Vue 3项目的开发。

Vue ：axios请求post、get请求根据后参数类型进行传参

2024-08-17

在Vue中使用axios发送POST和GET请求时，传参的方式取决于HTTP请求的头部Content-Type的设置。以下是两种常见的Content-Type类型以及如何使用axios发送带参数的请求。

应用/json类型（通常用于POST请求）:




axios.post('/api/data', {
  key1: 'value1',
  key2: 'value2'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // 处理响应数据
})
.catch(error => {
  // 处理错误情况
});

表单数据编码（通常用于POST请求，适用于application/x-www-form-urlencoded）:




axios.post('/api/data', qs.stringify({
  key1: 'value1',
  key2: 'value2'
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(response => {
  // 处理响应数据
})
.catch(error => {
  // 处理错误情况
});

对于GET请求，参数会附加在URL后面，不需要特别指定Content-Type：




axios.get('/api/data', {
  params: {
    key1: 'value1',
    key2: 'value2'
  }
})
.then(response => {
  // 处理响应数据
})
.catch(error => {
  // 处理错误情况
});

以上代码中，axios.post和axios.get是axios提供的方法用于发送POST和GET请求，qs.stringify是qs库提供的方法，用于将JavaScript对象序列化为URL编码的字符串，通常在发送application/x-www-form-urlencoded类型的数据时使用。

【日常记录】【vue】vite-plugin-inspect 插件的使用

2024-08-17




import { defineConfig } from 'vite'
import Inspect from 'vite-plugin-inspect'
 
export default defineConfig({
  plugins: [
    Inspect({
      // 插件选项配置，例如：
      // 只在开发环境下启用插件
      enabled: process.env.NODE_ENV === 'development',
      // 自定义输出信息的格式
      // 可以是 'json' 或 'pretty'
      format: 'pretty',
    }),
  ],
});

这段代码展示了如何在Vite项目中配置和使用vite-plugin-inspect插件。开发者可以通过enabled选项控制插件的启用与否，并且可以通过format选项自定义输出信息的格式。这个插件在开发过程中可以帮助调试和分析项目的构建和依赖信息。

Vue板块:安装 Vue Devtools及不显示没有作用的问题

2024-08-17

要在Vue中安装Vue Devtools并解决不显示的问题，请按照以下步骤操作：

安装Vue Devtools：
- 通过Chrome扩展程序安装：
  1. 访问 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
  2. 添加扩展程序到Chrome。
- 或者，使用npm安装（需要Node.js环境）：
```
npm install -g @vue/devtools
```
  然后运行 vue-devtools 来启动开发者工具。
确保你的Vue应用是在开发模式下运行的，因为Vue Devtools仅在开发模式下默认可用。

在你的Vue应用中使能Vue Devtools：

如果你使用的是Vue 3，确保在入口文件（通常是 main.js 或 main.ts）中有以下代码：




import { createApp } from 'vue'
import App from './App.vue'
import VueDevtools from 'vue-devtools'
 
const app = createApp(App)
app.use(VueDevtools)
app.mount('#app')

如果你使用的是Vue 2，确保在入口文件（通常是 main.js）中有以下代码：




import Vue from 'vue'
import App from './App.vue'
import VueDevtools from 'vue-devtools'
 
Vue.use(VueDevtools)
 
new Vue({
  render: h => h(App),
}).$mount('#app')

重新加载你的Vue应用，并确保你的浏览器已经打开了Vue Devtools面板。
如果你的Vue应用已经是以开发模式运行，但Vue Devtools没有显示，尝试以下步骤：
- 打开Chrome开发者工具（F12）。
- 点击“Vue”标签页，如果它没有自动显示的话。
确保你没有通过生产环境设置禁用了Vue Devtools。

如果以上步骤仍然不能解决问题，可能需要检查你的浏览器扩展政策或者网络安全设置，确保它们没有阻止Vue Devtools的加载。

2024-08-17

在前端开发中，HTML、CSS和JavaScript是基础，而Vue.js是一个构建用户界面的渐进式框架，它使得前端开发变得更加高效和容易维护。

以下是一个简单的例子，展示了如何使用Vue.js创建一个基本的用户界面：




<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 示例</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="编辑我">
    <p>输入的内容是: {{ message }}</p>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

在这个例子中，我们创建了一个简单的Vue应用程序，其中包含一个绑定到Vue实例的数据属性message。{{ message }}是Vue的文本插值，它会显示message属性的当前值。v-model是Vue的双向数据绑定指令，它允许用户与输入字段进行交互，并自动更新Vue实例中的message属性。

这个例子展示了Vue.js如何使得前端开发变得更加直观和高效。

Vue.js计算属性详解：优雅处理数据逻辑和传递参数

2024-08-17




<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    };
  },
  computed: {
    // 计算属性 reversedMessage 将自动依赖于 `message` 的变化
    // 并且会缓存计算结果，只有 `message` 发生变化时，才会重新计算
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

这个例子中，我们定义了一个计算属性 reversedMessage，它会将数据属性 message 里的字符串反转。这个计算属性被定义在 computed 选项内，它是一个函数，Vue.js 会自动处理它的依赖和缓存结果，只有当 message 发生变化时，才会重新计算这个属性。这样的处理方式使得我们可以将数据的变化逻辑放在计算属性中，而不是在模板中直接写复杂的表达式，使得模板更加清晰易懂。

【VUE】记录一次 VUE中配置生产环境和开发环境方法

2024-08-17

在Vue项目中，你可以通过修改vue.config.js文件来配置不同的环境。以下是一个配置生产环境（production）和开发环境（development）的示例：




// vue.config.js
 
module.exports = {
  // 基于环境变量来设置不同的配置
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  outputDir: process.env.VUE_APP_OUTPUTDIR,
  assetsDir: 'static',
  lintOnSave: process.env.VUE_APP_LINT_ON_SAVE,
  devServer: {
    port: process.env.VUE_APP_PORT,
    open: true
  }
}

环境变量可以通过以下方式设置：

在环境变量中设置（例如在.bashrc或.bash_profile中为Unix系统，或environment variables设置中为Windows系统）：




# 对于 Unix 系统
export VUE_APP_PUBLIC_PATH=/my-app/
export VUE_APP_OUTPUTDIR=dist
export VUE_APP_LINT_ON_SAVE=true
export VUE_APP_PORT=8080
 
# 对于 Windows 系统，使用 `set` 命令
set VUE_APP_PUBLIC_PATH=\\my-app\\
set VUE_APP_OUTPUTDIR=dist
set VUE_APP_LINT_ON_SAVE=true
set VUE_APP_PORT=8080

使用npm scripts在package.json中设置：




{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "prod": "vue-cli-service build --mode production",
    "dev": "vue-cli-service serve --mode development"
  }
}

然后，你可以通过运行以下命令来启动或构建项目：




npm run prod  # 构建生产环境
npm run dev   # 启动开发服务器

这样，你就可以根据环境变量和npm脚本来配置不同的环境了。

vue：element-ui表单动态验证规则

2024-08-17

在Vue中使用Element UI时，可以通过动态绑定来设置表单项的验证规则。以下是一个简单的例子，展示了如何动态设置表单项的验证规则：




<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-button @click="addRule">添加规则</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      addRule() {
        // 假设我们要添加的规则是检查姓名长度
        this.rules.name.push({ min: 2, max: 5, message: '姓名长度在 2 到 5 个字符', trigger: 'blur' });
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('表单验证失败!');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个带有name字段的表单，并为其设置了一个必填的验证规则。点击按钮会调用addRule方法，该方法会向name字段的验证规则数组中添加一个新规则，用于检查姓名的长度。提交表单时，会先执行表单的验证，只有当验证通过时才会执行提交操作。

vue 借助vue-amap插件对高德地图的简单使用

2024-08-17




<template>
  <div class="map-container">
    <el-amap class="map" :vid="'amap'" :zoom="10">
      <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker"></el-amap-marker>
    </el-amap>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      markers: [
        [116.397428, 39.90923],
        [116.488248, 40.056673],
        [116.386326, 39.997761],
        // 更多位置坐标...
      ]
    };
  }
};
</script>
 
<style>
.map-container {
  width: 800px;
  height: 600px;
}
.map {
  width: 100%;
  height: 100%;
}
</style>

这个例子展示了如何在Vue应用中使用vue-amap插件来创建一个高德地图实例，并在地图上标记多个位置。el-amap组件是地图容器，el-amap-marker组件用来在特定的经纬度上放置标记。markers数组包含了一系列的位置坐标，这些坐标会被循环渲染为地图上的标记。

Vue页面生成导出PDF文件

2024-08-17

在Vue应用中导出PDF文件，可以使用html2canvas和jspdf库。以下是一个简单的例子：

安装依赖：




npm install html2canvas jspdf

Vue组件中使用这些库来导出PDF：




<template>
  <div>
    <button @click="exportPDF">导出PDF</button>
    <div id="content" style="padding: 10px;">
      <!-- 这里是你想要导出的内容 -->
      <h1>Hello, PDF!</h1>
      <p>这是一个PDF文件的示例内容。</p>
    </div>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    async exportPDF() {
      const content = this.$el.querySelector('#content');
      const canvas = await html2canvas(content);
      const imgData = canvas.toDataURL('image/png');
      const doc = new jsPDF({
        orientation: 'portrait',
        unit: 'px',
        format: 'a4',
      });
      const imgProps= doc.getImageProperties(imgData);
      const pdfWidth = doc.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      doc.save('export.pdf');
    },
  },
};
</script>

这段代码中，我们定义了一个exportPDF方法，它会在用户点击按钮时被触发。该方法首先使用html2canvas库将页面中的指定元素（这里是id为content的div）转换为canvas图像。然后，它使用jspdf库创建一个PDF文档，并将转换得到的canvas图像以PNG格式添加到PDF文档中。最后，使用doc.save()方法将生成的PDF保存到用户的设备上。