分类 vue.js 下的文章

2024-08-10

要创建一个简单的Vue静态页面，你需要遵循以下步骤：

确保你有Node.js和npm/yarn安装。
创建一个新的Vue项目或者在现有项目中添加页面。
使用Vue模板语法编写HTML模板。
（可选）添加组件的JavaScript逻辑。
（可选）添加样式表。

以下是一个简单的Vue静态页面的示例代码：

首先，确保你已经安装了Vue CLI。如果没有，请通过以下命令安装：




npm install -g @vue/cli
# OR
yarn global add @vue/cli

然后，创建一个新的Vue项目：




vue create my-static-page
cd my-static-page

接下来，在项目中添加一个新的组件 StaticPage.vue：




<template>
  <div>
    <h1>这是一个静态页面</h1>
    <p>这里是内容...</p>
  </div>
</template>
 
<script>
export default {
  name: 'StaticPage'
  // 组件的其他逻辑
}
</script>
 
<style>
/* 组件的样式 */
h1 {
  color: #3498db;
}
</style>

最后，在 src/App.vue 中引用这个组件：




<template>
  <div id="app">
    <static-page></static-page>
  </div>
</template>
 
<script>
import StaticPage from './components/StaticPage.vue'
 
export default {
  name: 'app',
  components: {
    StaticPage
  }
}
</script>
 
<style>
/* 全局样式 */
#app {
  text-align: center;
}
</style>

现在，运行以下命令启动开发服务器：




npm run serve
# OR
yarn serve

一个简单的静态页面就创建完成了，你可以在浏览器中访问 http://localhost:8080 查看结果。

System

2024-08-10

所有,vue.js

CryptoJS 提供了md5加密的功能，并且可以方便地将加密结果转换为二进制、十六进制、Base64格式。

解决方案1：




import CryptoJS from "crypto-js";
 
let message = "Hello, World!";
let messageMD5Binary = CryptoJS.MD5(message).toString(CryptoJS.enc.Binary);
let messageMD5Hex = CryptoJS.MD5(message).toString(CryptoJS.enc.Hex);
let messageMD5Base64 = CryptoJS.MD5(message).toString(CryptoJS.enc.Base64);
 
console.log(messageMD5Binary);
console.log(messageMD5Hex);
console.log(messageMD5Base64);

解决方案2：




import md5 from 'js-md5';
 
let message = "Hello, World!";
let messageMD5Binary = md5(message, { output: "binary" });
let messageMD5Hex = md5(message, { output: "hex" });
let messageMD5Base64 = md5(message, { output: "base64" });
 
console.log(messageMD5Binary);
console.log(messageMD5Hex);
console.log(messageMD5Base64);

解决方案3：




import crypto from 'crypto';
 
let message = "Hello, World!";
let messageMD5Binary = crypto.createHash('md5').update(message).digest('binary');
let messageMD5Hex = crypto.createHash('md5').update(message).digest('hex');
let messageMD5Base64 = crypto.createHash('md5').update(message).digest('base64');
 
console.log(messageMD5Binary);
console.log(messageMD5Hex);
console.log(messageMD5Base64);

以上三种方案都可以实现将明文转换为MD5加密的二进制、十六进制、Base64格式。其中，解决方案1和解决方案2使用的是CryptoJS库，解决方案3使用的是Node.js的crypto模块。这三种方案可以根据你的环境和需求选择使用。

System

2024-08-10

所有,vue.js

前后端分离开发的一个常见实践是使用Vue.js作为前端框架，结合Element UI进行快速开发；后端使用Spring Boot框架，搭配MyBatis进行数据库操作。以下是一个简单的例子，展示如何实现前后端分离开发。

前端（Vue.js + Element UI）:

安装Vue CLI并创建新项目。
使用Element UI插件。
创建Vue组件并使用Element UI组件。
使用axios进行HTTP请求发送。




// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import axios from 'axios'
 
Vue.use(ElementUI)
Vue.prototype.$http = axios
 
new Vue({
  el: '#app',
  render: h => h(App)
})

后端（Spring Boot + MyBatis）:

创建Spring Boot项目并添加Web依赖。
添加MyBatis依赖和MySQL驱动。
配置数据库连接。
创建Mapper接口和对应的XML映射文件。
创建Service和Controller层。




// UserController.java
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
 
@RestController
@RequestMapping("/api/users")
public class UserController {
 
    @Autowired
    private UserService userService;
 
    @GetMapping
    public List<User> getAllUsers() {
        return userService.findAll();
    }
 
    @GetMapping("/{id}")
    public User getUserById(@PathVariable("id") Long id) {
        return userService.findById(id);
    }
 
    // 其他CRUD操作
}

数据库设计（MySQL）:

创建数据库和表。
设计相应的实体类。




-- users.sql
CREATE TABLE `users` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

以上代码提供了前后端分离开发的一个简单示例。在实际开发中，还需要考虑权限控制、异常处理、分页、搜索等功能，以及保证前后端接口的一致性。

- 阅读更多 -

Vue前端项目部署的三种方案

System

2024-08-10

所有,vue.js

在Vue前端项目部署时，常见的三种方案包括：

静态文件服务器：将Vue项目构建的静态文件部署在一个静态文件服务器上，如Nginx或Apache。
服务端渲染（SSR）：使用Node.js运行Vue应用，并将首次渲染为HTML。
单页应用（SPA）：构建单页应用，通过前端路由来处理页面跳转。

以下是部署的基本步骤：

静态文件服务器

构建项目：npm run build
将dist/目录中的文件上传到服务器
配置服务器，例如Nginx配置：




server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /path/to/your/dist;
        try_files $uri $uri/ /index.html;
    }
}

服务端渲染（SSR）

安装vue-server-renderer：npm install vue-server-renderer
使用Express.js设置服务端渲染：




const express = require('express');
const fs = require('fs');
const serverRenderer = require('vue-server-renderer');
const app = express();
 
app.use('/dist', express.static('dist'));
 
app.get('*', (req, res) => {
    const appHtml = fs.readFileSync('dist/index.html', 'utf-8');
    const bundle = serverRenderer.createBundleRenderer('dist/vue-ssr-server-bundle.json', {
        runInNewContext: false // 推荐
    });
 
    bundle.renderToString(req, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error');
            return;
        }
        res.end(appHtml.replace('<!--app-->', html));
    });
});
 
app.listen(80);

单页应用（SPA）

构建项目：npm run build
上传dist/目录到服务器
配置服务器重定向到index.html：




server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /path/to/your/dist;
        try_files $uri $uri/ /index.html;
    }
}

在实际部署时，还需考虑路由模式（hash或history）、性能优化、安全配置等因素。

- 阅读更多 -

干货分享：Vue 3和TypeScript结合进行API封装

System

2024-08-10

所有,vue.js




// Vue 3和TypeScript结合使用的API封装示例
import axios from 'axios';
import { ElMessage } from 'element-plus';
 
// 封装API请求函数
export const api = <T = any, R = any>(config: AxiosRequestConfig): Promise<R> => {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: import.meta.env.VITE_API_BASE_URL,
      timeout: 10000,
    });
 
    instance(config)
      .then((response: AxiosResponse<T>) => {
        if (response.status >= 200 && response.status < 300) {
          resolve(response.data);
        } else {
          ElMessage.error('请求失败，请检查网络和参数');
          reject(response);
        }
      })
      .catch((error: AxiosError) => {
        ElMessage.error('请求失败，请检查网络和参数');
        reject(error);
      });
  });
};
 
// 使用封装的API函数
api({
  method: 'GET',
  url: '/some-endpoint',
}).then((data) => {
  console.log(data); // 处理响应数据
}).catch((error) => {
  console.error(error); // 处理错误
});

这个示例展示了如何在Vue 3项目中使用TypeScript封装一个简单的API请求函数，并使用Element Plus的ElMessage组件来显示错误信息。这个封装的函数可以被Vue组件或者其他API服务所调用，简化了代码，并提供了一个统一的错误处理方法。

- 阅读更多 -

Vue 3.0 新手入门指南

System

2024-08-10

所有,vue.js




<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">点击我</button>
    <p>点击次数: {{ counter }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const message = 'Vue 3.0 入门示例';
    const counter = ref(0);
 
    function incrementCounter() {
      counter.value++;
    }
 
    return { message, counter, incrementCounter };
  }
}
</script>

这个Vue 3.0的简单示例展示了如何创建一个组件，包括如何定义响应式数据和事件处理函数。<script setup> 是Vue 3.0中引入的一个新特性，它可以让你更直观地使用Composition API。

System

2024-08-10

所有,vue.js

Vue-Quill-Editor 富文本编辑器在使用时可能会遇到样式失效的问题。这通常是因为样式没有正确加载或者是由于样式冲突导致的。以下是一些解决方法：

确保已经正确安装了 vue-quill-editor 并且引入了必要的 CSS 文件。




import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
 
// 引入样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)

如果你在使用 uni-app，可能需要对样式进行特殊处理，因为 uni-app 对于 webview 的样式支持有限。你可以尝试将样式文件放入 static 目录，然后在页面中通过 <style> 标签引入。




<template>
  <div>
    <quill-editor></quill-editor>
  </div>
</template>
 
<script>
// 引入组件
import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  }
  // 其他选项...
}
</script>
 
<style>
/* 引入样式 */
@import "static/quill.snow.css";
</style>

确保没有其他 CSS 样式覆盖了 Quill 的样式。你可以使用开发者工具检查元素样式，看是否有其他样式规则影响了 Quill 编辑器的显示。
如果以上方法都不能解决问题，可以尝试在 Quill 的官方 GitHub 仓库中搜索相关问题，或者在 Stack Overflow 等社区提问。

总结，解决 Vue-Quill-Editor 富文本样式失效问题的关键是确保所有必要的样式文件都已正确加载，并且没有被其他 CSS 样式所覆盖。

System

2024-08-10

所有,vue.js

在Vue中，localStorage、sessionStorage和cookie都是用于在客户端存储数据的机制。

localStorage: 用于长久保存整个网站的数据，即使窗口关闭后数据也不会消失，除非主动删除数据。




// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
let data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

sessionStorage: 与localStorage类似，但其存储的数据只在当前会话期间有效，也就是说，一旦窗口关闭，数据就会消失。




// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
let data = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清空所有数据
sessionStorage.clear();

cookie: 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。




// 设置cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 UTC; path=/";
// 获取cookie
let cookies = document.cookie;
// 删除cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

注意：在Vue中，你可能更多地会使用Vuex或者Vue-router来管理状态，而不是直接使用localStorage。这是因为Vuex和Vue-router提供了更好的状态管理机制，并且能够更好地集成到Vue应用中。

System

2024-08-10

所有,vue.js

Vue 应用反复刷新标签页导致内存持续增长可能是由于内存泄露。内存泄露是指分配给程序的内存在使用后没有被正确释放，导致该程序持有的内存越来越多，最终可能导致系统响应变慢甚至崩溃。

解决方法：

使用浏览器的开发者工具（如Chrome的开发者工具）定期监控内存使用情况。
检查是否有未释放的全局变量或者事件监听器。
使用Vue的性能工具，如Vue.js devtools扩展，监控组件的加载和卸载情况。
使用内存分析工具（如JavaScript内存泄露分析器）来识别和定位内存泄露的具体位置。
确保在组件销毁时移除事件监听器，取消异步操作（如定时器、Ajax请求），清理不再需要的数据结构。
使用Vue的生命周期钩子（如beforeDestroy和destroyed）来处理资源清理工作。

如果是在开发过程中发现的问题，可以通过单元测试和组件封装来减少潜在的内存泄露风险。如果是在生产环境中发现的问题，可能需要进一步分析用户的使用场景和行为以找出导致内存增长的具体原因。

- 阅读更多 -

关于vue中图片相关src相对路径不同情况

System

2024-08-10

所有,vue.js

在Vue项目中，图片的相对路径问题主要取决于你如何引用这些图片。以下是一些常见的情况和解决方法：

在JavaScript中使用相对路径：




// 如果图片位于src目录下的assets文件夹中
import logo from '@/assets/logo.png';
 
// 使用时
<img :src="logo">

在HTML模板中使用相对路径：




<!-- 如果图片位于public目录下 -->
<img src="./assets/logo.png">

动态绑定相对路径：




<!-- 假设imageUrl是一个动态绑定的路径 -->
<img :src="imageUrl">




data() {
  return {
    imageUrl: require('@/assets/logo.png')
  }
}

使用webpack的require方法：




// 在组件内部
export default {
  data() {
    return {
      imageUrl: require('@/assets/logo.png')
    }
  }
}




<!-- 在模板中 -->
<img :src="imageUrl">

确保图片文件放置在Vue项目结构对应的文件夹内，例如src/assets或public。在webpack构建的Vue项目中，推荐使用@别名引用src目录，因为webpack会正确处理这些路径。而public目录下的资源会被直接拷贝到最终构建目录，不会经过webpack处理，所以使用相对路径会更方便。

- 阅读更多 -