随笔分类 - Vue
摘要：背景 有的时候我们需要将组件的配置以文件的形式导入，那导入的配置需不需要使用ref或者reactive处理成响应式对象呢？ 答：不用，貌似导入的配置会有响应式，但是通过isRef、isReactive、IsProxy方法去鉴定的时候返回的false 示例代码： // dialog.config co
阅读全文
摘要：背景 我们可以通过ui组件库来统一调整组件的语言设置，比如统一设置成中文或者英文 步骤 引入 element-plus相关的语言包。这里使用中文 通过 el-config-provider组件进行配置 // App.vue <template> <div class="app"> <el-confi
阅读全文
摘要：问题描述 vue-router中配置history为createWebHistory() 后，当刷新页面会出现无法找到资源的问题 配置如下： // router/index.ts const router = createRouter({ history: createWebHistory(), r
阅读全文
摘要：问题 使用最新版的vuex后，然后vue3在template模版中使用出现红色警告，但是编译无异常 效果图 解决办法： 在shims-vue.d.ts文件中新增下面的声明 // shims-vue.d.ts import { Store } from '@/store' declare module
阅读全文
摘要：背景 有的时候我们在Excel中填写内容后通过前端批量上传，然后将数据批量存到数据库中 步骤 安装xlsx npm install xlsx 对上传的文件进行解析，获取上传文件中的每行数据 <template> <div> <button @click="parse">解析</button> <in
阅读全文
摘要：背景 比如在vue2的情况下我们有的时候需要为Vue的原型对象上添加属性或方法，vue3的情况下需要为app挂载全局属性配置，但是结合了ts后，在vue文件中会报警告，但是程序可以正常被执行 挂载全局配置 组件中使用 解决办法 找到shims-vue.d.ts文件后，进行如下配置即可 // 注意：这
阅读全文
摘要：vue3项目打包 默认情况下npm run build后会将文件打包到dist目录下，其中dist/index.html是首页 从上面我们可以知道资源都是以/进行访问，我们使用vscode的live server插件后打开发现资源出现问题，访问地址为：http://127.0.0.1:5500/de
阅读全文
摘要：应用场景 样式可以自定义+当组件中有重复样式定义时可以使用var(变量名)来占位 示例 给test1组件动态设置颜色1、颜色2，test1组件为颜色1，test1组件内部的两个小元素是颜色2 App.vue <test :myColor1="'green'" :myColor2="'orange'"
阅读全文
摘要：背景 有的情况我们需要根据echarts展示的数据查看对应的明细，查看明细的方式可能是向后端发送网络请求或者是后端早已经把数据全部发送给前端、由前端自己去做筛选，那么我们可以根据echarts提供的事件去处理逻辑 步骤 vue3中引入echarts import { createApp } from
阅读全文
摘要：github下载源码 地址：https://github.com/vuejs/core 注意：我此时下载的是vue3的3.2.37 全局安装pnpm包管理工具 因为vue3的3.2.37采用pnpm工具管理项目，而不是采用yarn了 安装依赖 进入到源码所在的文件夹使用pnpm install来安装
阅读全文
摘要：简述 使用vuecli3创建的项目，想要在手机上试运行，发现无法利用axios获取本地服务器中的数据，手机中展示效果如下 分析 aixos网络请求地址 可能是axios请求的基地址写成了localhost，导致无法发送网络请求。 解决办法：将对应的IP换成你本机的IP。比如你用手机开的热点，那么就换
阅读全文
摘要：此文档参考https://github.com/constown/mallAPI进行制作的文档。 简述 根据coderwhy老师的仿蘑菇街移动商城开发supermall，然后根据constown通过已爬虫的数据存储到本地数据库，利用本地的后台提供接口服务 API接口获取的几种方式 方法一 百度搜索蘑
阅读全文
摘要：问题描述 使用vue-router代码进行路由跳转时，重复点击某个链接后报下面的错误 分析 英文译为"避免重复导航到此地址"，简单来说就是不要在同一个地方重复点击。 解决办法 在router文件夹下的index.js中加入如下代码： 注意：需要在创建路由实例之前 import VueRouter f
阅读全文
摘要：场景 有的时候有些代码经常写，我们希望通过快捷键快速生成对应的代码结构，可以使用到vscode的代码片段 示例：根据html代码快速生成vue模版 步骤1：复制要快速生成的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
阅读全文
摘要：文章摘自https://www.cnblogs.com/smilexumu/p/9287920.html chrome已安装Vue Devtools在控制台却无显示的解决： 在点亮Vue Devtools图标后，控制台没有vue解读显示。 原因：脚手架配置NODE_ENV直接定义为了producti
阅读全文
摘要：背景 vue项目中我们一般会添加eslint来规范团队中JS的代码规范，但有的时候eslint的规范不太合理，比如：需在函数名和(之间留有空格，我们如果不保留空格的话，无法让项目正常的编译运行，因此需要在配置中添加对规则的忽略 解决办法 在项目的根路径下找到.eslintrc.js,在rules配置
阅读全文
摘要：背景 vue-cli项目中配置了eslint并设置了lint on save，会对项目中的JS语法进行ESLINT的校验。而在我们需要在vscode中安装vetur插件对.vue文件进行高亮，vetur插件会自动将单引号变成双引号 解决办法 在菜单栏中选择"文件" >"首选项" >设置-->在搜索框
阅读全文
摘要：情景 有的时候我们需要指定vue-cli项目使用指定的端口进行启动，而不是采用vue-cli默认的端口进行启动 步骤 在项目文件夹下创建vue.config.js，然后添加如下配置 module.exports = { devServer: { port: 8999, //启动端口 open: tr
阅读全文
摘要：场景描述 在vue-cli创建的项目中，开发阶段会经常使用console来打印内容，方便我们调试，但是生产阶段我们不希望在控制台输出信息，可以使用babel-plugin-transfrom-remove-console插件 环境 "dependencies": { "vue": "^2.6.11"
阅读全文
摘要：场景 有的时候我们需要从后台返回数据，但是后台没有提供这个接口，我们可以将数据打包到js文件中，然后向外暴露要使用的数据作为后台接口返回的数据 举例 模拟物流接口数据的返回 网上所需要的数据接口 http://www.kuaidi.com/index-ajaxselectcourierinfo-77
阅读全文
