vue3
vue3一站式解决方案
gblfy
心如向阳,次第花开!
展开
-
vue 支持多端口多代理调用
vue 支持多端口多代理调用原创 2023-10-16 20:53:02 · 714 阅读 · 0 评论 -
vue3.2.X + Vite2.X + Pinia2.X的前端项目常见报错
vue3.2.X + Vite2.X + Pinia2.X的前端项目常见报错原创 2023-07-27 22:19:37 · 778 阅读 · 0 评论 -
Error: No known conditions for “./lib/locale/lang/zh-cn“ entry in “element-plus“ package
Error: No known conditions for "./lib/locale/lang/zh-cn" entry in "element-plus" package原创 2023-07-27 22:17:01 · 2260 阅读 · 0 评论 -
安装多个nodejs版本
安装多个nodejs版本原创 2023-07-19 10:15:52 · 910 阅读 · 1 评论 -
解决vue+elementUI部署到服务器上后自定义样式失效的问题
解决vue+elementUI部署到服务器上后自定义样式失效的问题原创 2023-07-03 22:16:13 · 496 阅读 · 0 评论 -
Vue3中 如何在vite中使用svg图标详解
vite svg图标原创 2022-12-11 22:09:31 · 2864 阅读 · 2 评论 -
unplugin-vue-components和unplugin-auto-import 使用
插件原创 2022-12-11 21:21:30 · 1163 阅读 · 0 评论 -
[V3] Error on build in CI: Cannot find module ‘node:path‘ in vite.config.ts
[V3] Error on build in CI: Cannot find module ‘node:path‘ in vite.config.ts原创 2022-12-06 15:51:13 · 346 阅读 · 0 评论 -
vue-cli 创建vue3项目
文章目录一、环境准备二、核心组件2.1. axios封装2.2. vuex2.3. vue-router一、环境准备前提:# 安装node环境node -vnpm -v# 安装镜像源工具npm install nrm -g nrm ls# 使用淘宝镜像源nrm use taobao nrm ls# 卸载旧脚手架工具npm uninstall vue-cli -goryarn global remove vue-cli# 安装新版的脚手架工具 指定版本@vue/cli@原创 2022-01-23 19:46:31 · 3201 阅读 · 0 评论 -
vue 单独页面定时器 离开页面销毁定时器
data: { return { timer: null }},created() { this.timer = setInterval(....);},beforeDestroy() { if(this.timer) { //如果定时器还在运行 或者直接关闭,不用判断 clearInterval(this.timer); //关闭 }}...原创 2022-01-20 13:14:17 · 897 阅读 · 0 评论 -
js 时间比较大小
const startTime = parseInt(this.timeValue.replace(':', '')); const endTime = parseInt(this.timeValue2.replace(':', '')); //进行比较 if (startTime > endTime) { //添加校验提示 console.log("startTime>endTime") } else {...原创 2022-01-19 15:49:15 · 382 阅读 · 0 评论 -
去除字符串最后一位的几种方法
1.使用slice方法/** * slice(start,end) * start 要截取的字符串的起始下标 如果为负数从后面开始算起 -1指的是字符串的最后一位 * end 要截取的字符串的结尾下标 如果为负数从后面开始算起 -1指的是字符串的最后一位 * start 和 end 都是下标 */let str ="122889,"str=str.slice(0,str.length-1)console.log(str)//1228892.substr方法/** * substr原创 2022-01-16 22:43:40 · 32631 阅读 · 0 评论 -
Vue v-if,v-else-if,v-else的使用
v-else-if 要紧跟 v-ifv-else要紧跟v-else-if 或 v-if代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js v-if语法使用 </title> <script src="vue.js"></script> <script src="n原创 2022-01-05 10:52:20 · 726 阅读 · 0 评论 -
Vue如何循环提取对象数组中的值
数据如下,提取name和callcount第一种:getQueryCallStatistics("sesp1", this.provinceId).then((res) => { let arr = []; let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []; this.xunshiMap = res.data.callstatistics; res.data.callsta原创 2021-12-29 09:09:19 · 7084 阅读 · 0 评论 -
vue2 工具类_h5缓存
文章目录路径:public\static\jslocal-storage.jssession-storage.js全局注册使用路径:public\static\jslocal-storage.jsLOCAL_KEY_REMEMBER_MEMBER = "LOCAL_KEY_REMEMBER_MEMBER"; // 记住我LocalStorage = { get: function (key) { let v = localStorage.getItem(key);原创 2021-12-28 21:44:45 · 336 阅读 · 0 评论 -
Vue刷新当前页面几种方式
问题:最近些日子项目中突然碰到了一个需求,再完成编辑操作之后需要进行页面刷新,通过实验有如下几种姿势可以解决需求中的问题,下面进行简单总结如下。姿势一:this.$router.go(0)这个姿势是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏,严重影响用户的体验感,效果不好。this.$router.go(0)姿势二:location.reload()这个姿势是利用了直接使用刷新当前页面的方法。但是同样存在有一个问题就是页原创 2021-12-28 21:12:32 · 23559 阅读 · 3 评论 -
Vue生命周期中mounted和created的区别
一、什么是生命周期?用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:二、created和mounted区别?官方图解如下:我们从图中看两个节点:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的原创 2021-12-27 22:13:58 · 518 阅读 · 0 评论 -
vue 报错error: ‘to‘ is defined but never used (no-unused-vars)
解决方法1:在.eslintrc.js文件内加入如下代码:rules: {"no-console": "off","no-unused-vars":"off", //重要 var 变量为引入"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",},原创 2021-12-20 10:33:54 · 989 阅读 · 0 评论 -
vue2 父子组件传参 回调函数使用
关键点:父组件给子组件动态传参使用v-bind:属性key(多个单词用下划线拼接)子组件接收父组件传参参数使用 props标签,+属性key多个单词用驼峰形式拼接)子组件定义回调父组件函数子组件:v-on:change="uploadFile()父组件::after-upload=“afterUpload”然后定一个afterUpload(resp)方法接收子组件传过来的值 <div class="col-sm-10"> <fi原创 2021-11-06 20:22:03 · 1828 阅读 · 0 评论 -
data.name.toLowerCase() is not a function问题
文章目录1. 现象2. 分析3. 解决方案1. 现象Error in v-on handler: "TypeError: suffixs[i].toLowerCase is not a function"2. 分析主要原因是.toLowerCase()方法需要前面是字符串类型3. 解决方案案例:(data.name +='') .toLowerCase()源码修改后...原创 2021-11-06 20:12:34 · 2672 阅读 · 0 评论 -
vue 集成 Loading 加载效果
文章目录1. 工具类2. 插件官网3. 导入js4.. 使用5. 效果图1. 工具类Loading = { show: function () { $.blockUI({ message: '<img src="/static/image/loading.gif" />', css: { zIndex: "10011", padding: "10px",.原创 2021-11-02 18:20:13 · 684 阅读 · 0 评论 -
vue 集成 sweetalert2 前端校验
文章目录1. 集成 sweetalert22. 校验工具类抽象3. 校验工具类4. 使用5. 效果图6. 后端集成1. 集成 sweetalert2官网:https://sweetalert2.github.io在index.html引入<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>2. 校验工具类抽象Tool = { /** * 空校验 null或""都返回true */..原创 2021-11-02 18:13:27 · 713 阅读 · 0 评论 -
vue 集成 sweetalert2 提示组件
文章目录一、项目集成1. 引入方式2. 确认框封装3. 提示框封装4. 确认框使用5. 消息提示框使用6.项目效果一、项目集成官网链接:https://sweetalert2.github.io案例1. 引入方式CDN引入方式:在index.html中全局引入<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>位置:npm安装方式:npm install sw..原创 2021-11-02 18:03:26 · 1324 阅读 · 0 评论 -
yarn vite vue3.x
文章目录一、插件安装1. vue-router2. vuex3. element-plus4. axios5. sass二、Yarn 常用命令2.1. 添加依赖包2.2. 将依赖项添加到不同依赖项类别2.3. 升级依赖包2.4.移除依赖包2.5.安装package.json里的包依赖三、Vite3.1. 简述3.2. 全局安装vite3.3. 创建项目3.4. 下载依赖3.5. 运行项目3.6. 安装路由3.7. 安装vuex3.8. 安装sass3.9. main.js一、插件安装安装项目生原创 2021-10-31 19:23:07 · 5906 阅读 · 1 评论 -
Vue-router 的使用 (vue3.x版本)
文章目录一、安装1. npm2. yarn二、使用2.1. 引入+注册2.2. 创建+配置一、安装1. npm默认npm install vue-router -S # 卸载npm uninstall vue-routervite# 安装npm install vue-router@next -S # 卸载npm uninstall vue-router@next2. yarn默认# 安装yarn add vue-router -S # 卸载yarn原创 2021-10-31 18:58:16 · 1230 阅读 · 0 评论 -
does not provide an export named ‘createRouter
文章目录一、 外象1. 背景2. 现象二、 解决方案2.1. npm2.2. yarn一、 外象1. 背景vue3与vite整合使用时2. 现象浏览器控制台SyntaxError: The requested module‘/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4’does not provide an export named ‘createRouter’二、 解决方案使用方式根据自己的方式执行选原创 2021-10-31 18:50:16 · 4122 阅读 · 0 评论 -
vue3 线上环境 ctx 无法识别
解决方案:Vue3获取当前组件实例的 getCurrentInstance 方法上 ctx 生产获取不到 上面的全局方法,getCurrentInstance代表上下文,即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段,如果将项目打包放到生产服务器上运行,就会出错,ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx // 获取Composition API 上下文对象 // const { ctx} ..原创 2021-10-20 13:43:50 · 1977 阅读 · 0 评论 -
Vue项目启动后Error: Cannot find module ‘xxx’的解决方法
文章目录1. 删除2. 安装依赖3. 启动项目解决方法1. 删除删除 node_modules 整个文件夹和 package-lock.json 文件(这个文件不一定有),注意不是 package.json2. 安装依赖在项目下运行: npm install # oryarn3. 启动项目npm start# oryarn start# or 支持热部署yarn dev问题解决...原创 2021-10-18 13:06:31 · 2516 阅读 · 1 评论 -
yarn全局安装vue/cli vue不是内部命令
yarn全局安装vue/cli vue不是内部命令在使用 yarn global add @vue/cli安装 @vue/cli之后 执行vue --version报错:‘vue’ 不是内部或外部命令,也不是可运行的程序 或批处理文件解决方案:命令行输入 yarn global bin 然后把得到的地址添加到环境变量中...原创 2021-10-16 07:57:34 · 1507 阅读 · 0 评论