随笔分类 - Vue开发
摘要：在Vue.js中，动态路由通常指的是基于某些条件（如参数、用户角色等）动态地改变路由的路径或组件。在Vue Router中，你可以使用params或query来实现动态路由。以下是一些实现动态路由的方法： 1. 使用params定义动态路由 在Vue Router中，你可以在路由路径中使用冒号（:）
阅读全文
摘要：在项目开始的时候，把所有的代码都码好。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。 跳转后页面的样式会沿用了前一个页面的样式，导致页面错乱。 解决办法: 在跳转前和跳转后页面的style上加上scoped <style scoped> header{ width:
阅读全文
摘要：router-view 实现路由内容的地方，引入组件时写到需要引入的地方需要注意的是，使用vue-router控制路由则必须router-view作为容器。 通过路由跳转的三种方式 1、router-link 【实现跳转最简单的方法】 <router-link to='需要跳转到的页面的路径> 浏览
阅读全文
摘要：1.安装 npm i vconsole -D 2.在Vue项目的入口文件（通常是main.js或main.ts）中导入VConsole 请注意，在生产环境下，你应该避免将VConsole包含在你的项目中。你可以使用条件语句来仅在开发环境下引入VConsole //处理是开启H5调试 import V
阅读全文
摘要：路由（router） 一、就是对应关系 前端路由的工作方式： 1.用户点击了页面上的路由链接 2.导致了URL地址栏中的hash值发生了改变 3.前端路由监听到了hash地址的变化 4.前端路由吧当前hash地址对应的组件渲染到浏览器中 二、history原理 1、history模式主要使用两个HT
阅读全文
摘要：1、先看看package.json文件，是不是安装了vue-router，如下图，因为我安装了所以有 2、如果没有安装，就使用命令下载vue-router，因为是vue3，要使用vue-router4.0.0以上版本 npm install vue-router@/next --save 3、在项目
阅读全文
摘要：一、问题 在配置路由的时候，遇到了一个问题，就是添加路由界面的时候，找不到指定的文件，提示错误，如下图: 但是，如果将@换成 ../就正常了，如下图: 二、解决方法 1、需要先安装一个path的插件 npm install --save-dev @types/node 2、找到vite.config
阅读全文
摘要：一，搭建vite项目 兼容性注意：Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。 通过下面的命令行可以创建指定项目名称和你想要使用的模板的vue项目 # npm 6.x
阅读全文
摘要：1.安装echarts和echarts-map插件 npm install echarts --save npm install echarts-map --save 2.在组件中引入echarts和echarts-map import echarts from 'echarts' import '
阅读全文
摘要：npm 启动项目 npm run serve/dev的时候报了个错：再次记录一下 1.问题原因 项目启动失败，一直报错，翻译一下，大概意思就是依赖包或者模板有问题 2.解决方法 （1）需要找到node_modules把这个文件夹删掉 （2）然后cmd或者vscode终端再运行npm install即
阅读全文
摘要：以下是一些常见的webpack打包优化方案： 1.使用生产模式（production mode）： // webpack.config.js module.exports = { mode: 'production', // ... 其他配置 }; 2.代码分割（Code Splitting）： /
阅读全文
摘要：Vue路由（router）的安装和使用 安装vue-router插件 第一步：在CMD窗口中，使用命令跳转到vue的安装路径下第二步：输入命令：npm i vue-router@3vue2 要安装 vue-router3 npm i vue-router@3 vu3 要安装 vue-router4
阅读全文
摘要：1.运行vue项目 npm run serve 2.开启vue项目 npm run start 3.重启vue项目 npm run restart 4.停止vue运行 npm run stop 5.打包vue项目 npm run build
阅读全文
摘要：封装正则校验证件号方法 创建commRepExp.js /** * 校验身份证,代校验位 此处仅仅是大陆18位的身份证校验 * @param idCard 校验的数据 * @returns Boolean 返回布尔值 */ const isVerifyIdCard = (idCard) => { /
阅读全文
摘要：实现文本框根据输入内容自适应高度。 代码如下： <van-field v-model="setMailInfo.tempName" rows="1" autosize label="" class="mt-textarea" input-align="right" type="textarea" p
阅读全文
摘要：Vant 修改field中的placeholder样式 .van-field__control::-webkit-input-placeholder { color: #757575; font-size: 0.75rem; font-weight: 400; }
阅读全文
摘要：1.常用的父子组件通讯方式：props，$emit 父组件传入属性，子组件通过props来接收，在子组件中就可以用this.xxx方式使用。 子组件通过$emit(事件名，参数)向外弹出一个自定义事件，在父组件中的属性监听事件，可以获得子组件中传出来的值 //父组件 <com-view :show=
阅读全文
摘要：vant处理页面下拉刷新，上拉加载 html <div id="app" v-cloak> <div class="header fixed_top background_FFF border_beee"></div> <!-- 内容 --> <div class="main_container"
阅读全文
摘要：案例是三个组件之间进行传值，为了好区分，将父、子组件改名为：父组件、儿组件、孙组件，三代之间进行传值。父组件：one.vue儿组件：two.vue孙组件：three.vue 一、父子组件间传值 1.vue框架传值常用的有： （1）父传子，在父组件里面的子组件上通过v-bind绑定一个变量传给子组件，
阅读全文
摘要：一、创建vue2脚手架项目 第一步：打开打开cmd命令窗口，配置npm淘宝镜像 命令：npm config set registry https://registry.npm.taobao.org 第二步：全局安装@vue/cli 命令：npm install -g @vue/cli 注意：此命令只
阅读全文
浙公网安备 33010602011771号