![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
1佳佳佳佳
这个作者很懒,什么都没留下…
展开
-
Vue Test Utils前端单元测试
Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具。可见无论是受欢迎度和写法上,Jest 都有很大的优势,因此推荐使用开箱即用的 Jest。Jest 默认支持断言,同时默认支持覆盖率测试。原创 2023-05-11 18:33:24 · 1262 阅读 · 0 评论 -
elementUI中textarea组件无法autoSize问题记录
问题:使用饿了么框架中的文本域组件,配置autoSize,使其自适应高度。在输入的过程中,可以正常达到自适应的效果。但预览时,即value有默认值时,autoSize失效。原创 2023-04-11 14:29:04 · 2483 阅读 · 0 评论 -
发布与更新自己的npm包
部署自己的npm包原创 2022-06-30 14:16:04 · 1722 阅读 · 0 评论 -
父子组件,父孙组件之间的通信 provide与inject
一、概念这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide:是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。inject:一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值。二、场景当子组件或孙组件想要使用父组件的变量或需要变更父组件的变量值时,通常使用props和$emit进行实现。父子组件之间的交互还较为方便,但一旦子组件的原创 2022-03-08 18:31:16 · 494 阅读 · 1 评论 -
ios Safari 无法禁止缩放的问题
通常,我们会通过meta标签来实现禁止页面缩放的效果<meta id="meta-viewport" name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">但在实际开发过程中,发现部分safari浏览器下,仍可以进行缩放,即meta设置在 Safari 内无效了一下代码都在vue的index.h原创 2021-09-26 16:56:31 · 476 阅读 · 0 评论 -
vue,env多环境切换
生产项目通常有多个环境,本地开发时就需要我们区分不同的环境进行联调或修复缺陷。可通过env进行不同环境的配置,并结合代理,达到本地开发,不同环境调用相应接口地址及资源的效果。实现命令行:npm run serve --env=ft1vue.config.jsconsole.log(process.env.npm_config_env)const env = process.env.npm_config_envlet api = 'https://apift2-xxx' // 默认的接口路径原创 2021-09-15 17:30:43 · 845 阅读 · 0 评论 -
vue3封装axios+Promise及代理配置
axios安装npm install axios新建一个util文件夹,用于存放工具类新建http.js,用于封装axios请求import axios from 'axios'const httpUtil = axios.create({ baseURL: '/api', timeout: 100000})httpUtil.ajax = (options) => { return new Promise((resolve, reject) => { h原创 2021-09-03 10:10:09 · 1018 阅读 · 0 评论 -
vue脚手架vue-cli4.x安装vue3项目
关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。Node 版本要求Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。安装vue-cli4.x原创 2021-08-26 14:39:30 · 183 阅读 · 0 评论 -
在vuecli4.x下,实现移动端适配
参照vant官网的Rem 布局适配https://youzan.github.io/vant/#/zh-CN/advanced-usagepostcss-pxtorem对移动端进行适配——可在编译过程中将px转化为remlib-flexible——用于设置 rem 基准值安装:npm install postcss postcss-pxtorem --save-devnpm i -S amfe-flexible配置可在vue.config.js或postcss.config.js进行配置,原创 2021-08-26 18:20:02 · 211 阅读 · 0 评论 -
vue-父子组件之间的参数传递
父组件向子组件传递:父组件中: <template> <div id="app"> <child :logo11="logoMag"></child> </div> </template> <script> //引用子组件 import child from "@/components/Test原创 2021-02-19 10:44:14 · 88 阅读 · 0 评论 -
windows安装nvm的一些注意点
nvmnode.js version management node版本管理器。当发现多个项目使用的node版本不一致时,node的版本管理就需要用到nvm。安装https://github.com/coreybutler/nvm-windows/releases这里是将nvm安装到了D盘的tool文件夹下(需要注意的是nvm的安装路径不可以携带中文,会导致安装完成后无法正常找到nvm)选择node安装路径。(若在安装nvm之前安装过node,建议将之前的node卸载,没有卸载遇到了nvm无法原创 2021-02-18 15:58:20 · 182 阅读 · 0 评论 -
vue注入组件时报错:did you register the component correctly? For recursive components......
报错信息:vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.找原因:查了很多,大多数都是说components拼写错误,或者写了两个components。这个也需要检查一下,但是我这边是没有这样的问题的,再原创 2020-10-22 15:30:50 · 49589 阅读 · 15 评论 -
对象数组根据某一字段合并元素
如:// arr为初始数组,key为需要处理的key名称 unique (arr, key) { var tempArr = [] var newArr = [] for (let i = 0; i < arr.length; i++) { if (tempArr.indexOf(arr[i][key]) === -1) { newArr.push({ name: arr[i].name,原创 2020-10-13 16:42:10 · 767 阅读 · 0 评论 -
vue input双向绑定时处理number类型数据为3-4-4类型(如手机号码)
这里input框使用的是vant组件的Fieldimport Vue from 'vue';import { Field } from 'vant';Vue.use(Field);<van-field v-model="loginPhone" type="tel" maxlength="13" //此处长度为13是因为11位手机号码+两个空格 clearable placeholder="请输入手机号" />使用vue的watch来原创 2020-05-11 18:23:26 · 1852 阅读 · 1 评论 -
vue实现图片验证
一、插件安装npm install --save vue-monoplasty-slide-verify二、应用插件在main.js内全局引用import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);三、页面代码<slide-verify :l="42" :r="10" ...原创 2020-04-07 17:42:46 · 2174 阅读 · 3 评论 -
vue+element 前端解析excel并表格展示
首先引入依赖模块:npm install xlsx --save在需要解析excel的页面(vue文件)中引入依赖:import XLSX from 'xlsx'页面部分:使用elementUI组件完成文件上传: <!-- excel表格上传 --> <el-upload class="upload-demo" ...原创 2020-02-26 14:16:44 · 9588 阅读 · 9 评论