- 博客(69)
- 收藏
- 关注
RSS订阅原创 vue3.x项目，配置项目打包到二级目录
一、打开 vite.config.js 文件，添加或修改base字段， 将其值设置为二级目录的路径。vue3.x项目，配置项目打包到二级目录。
2024-03-14 10:11:54
542
原创 react项目打包二级目录
在React 18.x中，如果你使用的是Create React App (CRA)来创建和管理你的项目，你可以通过修改package.json文件中的homepage字段来配置应用打包到一个二级目录。process.env.PUBLIC_URL在开发环境中通常是空字符串，在生产环境中则是你在package.json中设置的homepage字段的值。在create-react-app创建的项目中，可以通过process.env.PUBLIC_URL来访问homepage字段中定义的URL。
2024-03-08 11:57:49
487
原创 qiankun：react18主应用 + 微应用 react18 + vue3
qiankun+react18主应用 +vue3/react微应用
2023-07-19 20:43:34
1836
原创 react中使用 websocket
参考官网地址： https://socket.io/zh-CN/docs/v4/client-installation/#from-npm。react中使用 websocket，使用socket.io库。
2023-07-05 16:56:09
1572
原创 react中使用Ant Design的Upload 组件，使用后端提供的接口上传图片，不使用默认的action 请求
2、上传多张图片（可拖拽和点击）
2023-06-29 16:44:35
2306
1
原创 mpvue的一些知识
一、mpvue中生命周期：1、created：所有页面的created都是在页面渲染的一开始都全部加载出来（在vue中，created是按需加载，当我们进入某个页面，才会加载当前的created）2、onLoad： 用户进入A页面，会触发onLoad，但是当进入另一个页面后再返回到A页面，不会触发onLoad3：mounted：是用户每次进入页面， 都会执行，无论是否点击返回二、动态绑定 class//对象形式 <div v-for="(item, index) in List" :ke
2020-10-30 10:34:53
1623
原创 vue解决组件循环使用报错
当我们正常的注册组件，正常的引用组件，还是报错 组件没有正常的注册，如下图：解决方法：将原来的 import xxx from ‘xx/xx/xxx’ components:{ xxx }更改成： components: { xxx: () => import(“xx/xx/xxx”), },...
2020-10-20 18:11:43
720
原创 mpvue项目引入vant组件
1、安装npm i @vant/weapp -S --production2、在 build —> webpack.base.conf.js 加入以下代码： new CopyWebpackPlugin([{ from: path.resolve('node_modules/@vant/weapp/dist'), to: path.resolve('dist/wx/vant-weapp/dist'), ignore:
2020-09-23 17:30:07
734
原创 electron项目的一些问题
1、运行项目报错：process is not defined解决方法：在 .electron-vue —> webpack.renderer.config.js 里加入如下代码： templateParameters(compilation, assets, options) { return { compilation: compilation, webpack: compilation.getStats().toJson(),
2020-09-18 17:51:16
279
原创 vs code 代码格式化
设置vs code代码在一行显示设置 -》 首选项 -》 setting -》 setting.json里放入下面代码{“vetur.format.defaultFormatter.js”: “vscode-typescript”,“vetur.format.defaultFormatterOptions”: {“js-beautify-html”: {“wrap_attributes”: “force-expand-multiline”,“wap_line_length”: 22
2020-08-13 16:22:35
348
原创 点击切换状态按钮，当页面刷新之后保持在之前状态的内容区（使用 vuex ）
1、在 store文件夹下的 modules 下新建 status.js2、在 store 下的 index.js中引入 status.js
2020-08-13 16:11:39
616
原创 vue 开始时间＜结束时间，结束时间＞开始时间
if (Date.parse(this.beginTime) - Date.parse(this.endTime) >= 0) { this.$message.error('结束时间必须大于开始时间') return;} else if (Date.parse(new Date()) - Date.parse(this.beginTime) > 0) { this.$message.error('开始时间不得小于当前时间') return;}...
2020-08-10 15:44:00
2046
原创 点击动态切换背景颜色
<template> <div> <div v-for="(item,index) in 10" :key="index" :class="{'active':index===nowIndex}" @click="handleClick(index)"> <p>测试一下</p> </div> </div></template><script>export de
2020-07-25 15:32:38
458
原创 vue + 下载文件（以下载excel表格为例）
通过 a 标签的 href 属性来实现下载<template> <div> <a :href="downloadUrl+'?type=excel'"> // 此处下载是get请求，type=excel为后台要求要传的请求参数，要拼接在 地址后面 <el-button size="small" type="primary" style="margin-left:10px">excel模板下载</el-button>
2020-07-23 17:05:34
2673
原创 vue +element + 导入表格（ 导入的表格为 application/json 格式 ）
1、下载包npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx2、在main.js中引入import XLSX from 'xlsx'Vue.use(XLSX)3、使用（第一种：未调接口；第二种调接口）<template> <div> <el-upload action :show-file-list="false" :on-change="handl
2020-07-23 16:55:10
1114
原创 vue多个页面用到同一个接口的数据（ 比如名称列表 ），使用 vuex
第一种： 调接口不传参数1、在 store文件夹下的 modules文件夹下新建 getName.js// getName.jsimport { getNameList } from "@/apis/apis"; // 导入接口export default { state: { nameList: [] // 名称列表 }, mutations: { changeNameList(state, payload) { state.nameList= pay
2020-07-22 22:02:00
4801
原创 vue + element + Upload 上传图片
<template> <div> <el-form :inline="true" :model="form" :rules="Rules" ref="form" label-width="100px"> <el-form-item label="头像" prop="avatar"> <el-upload class="avatar-uploader" :action="uploadUrl" :headers="{.
2020-07-20 11:42:10
468
原创 vue + element + select 获取下拉框的 label 和 value 值（ 例如 绑定的是 id ， 但后台要求即传 id ，又要传 id 对应的 name ）
<template> <div> <el-form :inline="true" :model="form" ref="form" :rules="formRule"> <el-form-item label="标题" prop="titleId"> <el-select v-model="form.titleId" filterable placeholder="请选择标题" @change="changeTit
2020-07-20 10:14:50
6003
原创 监听vuex 中数据状态的变化
<script>export default { data() { return { index: '', }; }, created(){ this.index = this.$store.state.moduleName.index; }, computed: { getIndex() { return this.$store.state.moduleName.index } }, watch: {
2020-07-17 09:45:26
1896
原创 vue +element + 导入表格（ 导入的表格传给后台 form-data 格式 ）
1、安装插件npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx2、使用<template> <div> <el-upload class="upload student-enter" action="#" :show-file-list="false" :on-change="handleExcel" accept="application/vnd.op
2020-07-16 21:34:22
2387
原创 vue项目打包之后出现源代码的问题
1、在config -> index.js//config -> index.js productionSourceMap:false, //将 productionSourceMap:ture 改为 productionSourceMap:false2、vue cli3 及以上版本在 根目录下的 vue.config.js//vue.config.js module.exports = { productionSourceMap: true}...
2020-07-16 21:12:27
1134
原创 vue项目中，比如登录的时候要进行校验，如果2个或多个校验是一样的时候，可以封装一个 promise ，避免代码重复
因本人暂时还为把promise琢磨清楚，但确实在项目中也迷迷糊糊的使用了，所以目前写出来仅供自己参考。我在如下使用场景使用 promise我们在做登录的时候，通常会做校验，在有要发送短信验证码之前，要校验手机号、用户名等，在登录的时候除了要校验手机号、用户名等之外，还要校验 短信验证码，此时就会出现一种情况，即发送验证码的时候要校验，登录也要校验，只是多了一个 验证码的校验，这时候就会造成重复校验的情况，如果要校验的 类目比较少还好，还无所谓，如果要校验5-6条等，那无疑会增加代码，所以我们可以用 pr
2020-07-10 17:47:03
598
2
原创 vue 多个页面调同一个接口，传不同的参数，使用 Vuex 来实现传不同参数调统一接口
1、在 api 文件夹下的 api.js 下import https from "@/utils/axios"; // 引入在 utils下的 axios.js 中封装的请求export const pageOfInfoAtES = function(params) { let url = "/xxx/pageOfInfoAtES"; return https(url, params, "post");};2、在 store文件夹下的 modules文件夹下新建 getInfo.j
2020-07-10 17:17:11
4845
2
原创 vue项目打包到二级目录（以测试环境打包到二级目录为例）
1、在 build —> webpack.base.conf.jslet publicPath = ''if (process.env.NODE_ENV === "production") { publicPath = config.build.assetsPublicPath} else if (process.env.NODE_ENV === "testing") { publicPath = '/xxx' + config.dev.assetsPublicPath}modul
2020-07-07 10:33:58
2863
原创 vue 数字图片验证码
1、安装npm install identify2、封装公共组件<template> <div class="code-container"> <canvas id="code-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script>export default { pr
2020-07-05 18:42:52
1177
原创 vue中使用富文本编辑器 wangEditor
一、 wangEditor基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费http://www.wangeditor.com/index.html（1）、安装npm install wangeditor2、封装公用组件 editor.vue<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar">
2020-07-05 14:38:14
985
原创 vue封装axios
1、安装npm install axiosnpm i qs2、在 utils 文件夹下新建 axios.jsimport axios from "axios"; // 引入 axios 模块，用于请求数据import Qs from "qs"; // 在对axios进行封装前，引入 qs 包，用于序列化表单，不然后台接收不了数据（post请求默认Content-type是 application/json，而后台需要接收的数据格式为application/x-www-form-urlencode
2020-07-03 09:42:03
309
原创 小程序中使用模板（template）
一、模板的引入（1）模板定义在pages下新建 templates文件夹，在 templates 文件夹下新建一个 student.wxml，定义模板： // 模板定义 在 templates -> student.wxml<template name="student"> <view>姓名： {{name}}</view> <view>年龄： {{age}}</view></template>(2) 模
2020-07-02 22:18:13
522
原创 element + tabs 页面刷新保持刷新之前的页面
例：个人中心下的 tab 使用：实现效果： (1) 当点击“个人中心” 下不同的 tab 跳转到 /userCenter?type=“xx” ： 通过 this.router.push实现(2)当点“个人中心”的时候，跳到第一个tab页（如果是在第2个tab页，也切换至第一个tab页）：通过监听′router.push 实现 (2) 当点“个人中心”的时候，跳到第一个 tab 页（如果是在第2个tab页，也切换至第一个tab页） ： 通过监听 'router.push实现(2)当点
2020-07-01 15:59:59
3822
2
原创 重复点菜单报错解决
在 router文件夹下的 index.js 加入以下代码// router -> index.js const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch(error => error)}
2020-06-23 16:36:27
348
原创 vue页面导出pdf
1、下载插件：npm install --save html2canvas // 将html页面转换成图片npm install jspdf --save //将图片生成pdf2、.在utils文件夹中新建 htmlToPdf.js:// utils -> htmlToPdf.js// 导出页面为PDF格式import html2Canvas from "html2canvas";import JsPDF from "jspdf";export default { inst
2020-06-23 11:29:04
1346
原创 手机短信验证码
<template> <div class="salary-page"> <van-form> <van-field v-model="form.name" label="姓名" placeholder="请输入姓名" clearable required /> <van-field v-model="form.phone" label="手机号" placeholder="请输入手机号" clearable required
2020-06-22 22:18:49
357
原创 vue路由跳转打开新页面
handleLink(row) { let link = this.$router.resolve({ path: '/user', query: { id: row.id } }); window.open(link.href, '_blank') },
2020-06-20 16:56:38
673
原创 对象数组的常用操作
一、从数组中取出符合条件的某一个对象let obj = data.find(element => element.id = this.id);console.log(obj)二、从对象数组中取出对象中的某几个属性的，组成一个新数组let arr = [];data.forEach(element => { arr.push({ name: element.name, id: element.id })});三、从对象数组中取出对象中的某一项属性值，组成一个新的数组let
2020-06-20 14:26:36
1643
1
原创 vue滑块验证
<template> <div> <el-form :model="form" ref="form" :rules="codeRules"> <el-form-item prop="phone"> <el-input type="tel" :maxlength="11" v-model.trim="form.phone" placeholder="请输入手机号"></el-input> .
2020-06-16 16:16:35
581
原创 vue阻止事件冒泡
[email protected]=“handleRowClick” <el-table:data="tableData" @row-click.stop="handleRowClick"> <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column> <el-table-column prop="s
2020-06-15 16:39:23
452
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人