vue
单眼皮的小熊
这个作者很懒,什么都没留下…
展开
-
Element表单嵌套树形表格的校验问题
Element表单嵌套树形表格的校验问题原创 2023-02-23 15:22:41 · 1083 阅读 · 6 评论 -
vue2中v-if里面相同组件不重新渲染
<template> <div class="app-container"> <template v-if="type === '1'"> <CommonForm :formData="{a:1}" ref="contract_gov" /> </template> <template v-if="type === '2'"> <CommonForm :formData="{b:2}" ref="co.原创 2022-05-27 17:37:44 · 1148 阅读 · 0 评论 -
Vuex持久化存储之vuex-persist
众所周知,vuex所保存的数据在页面刷新后会丢失,故一般情况不想丢失的时候,我们会配合localStorage,手动从localStorage中存取,现发现一款插件可以帮助我们自动存取,打到持久化存储的目的。引入vuex-persist插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下:安装:npm install vuex-persist -S使用:..原创 2022-04-13 09:48:31 · 7740 阅读 · 1 评论 -
VUE项目WebPack打包删除注释和console
项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的领导让删除,于是使用插件cnpm install uglifyjs-webpack-plugin -Dvue.config.js里添加配置const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //引入插件module.exports = { configureWebpack: { optimization: { minimi原创 2022-03-14 14:46:23 · 3642 阅读 · 2 评论 -
如何在vue项目中使用PWA
pwa ? 这是什么? 第一次听到pwa的时候是隔壁桌的大佬在交流前端的时候说的“这是前端目前很火的技术,用户体验很好,简单方便 ... ...”。听起来就很想试一试,在大佬的帮助下完成了自己人生的第一个pwa项目。强烈安利,接下来就好好的去了解一下所谓的pwa什么是pwa ?Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性..转载 2021-10-26 15:55:19 · 6201 阅读 · 3 评论 -
vue+qiankun微前端实践
qiankun基座也可以用多种脚手架搭建(此处以vue2.x 为例):vue-cli搭建vue2.x 项目,然后安装qiankun:$ yarn add qiankun # or npm i qiankun -S基座配置:我们将子应用的配置都放在:main/src/micro-app.js下:const microApps = [ { name: 'sub-vue1', entry: '//localhost:7777/', active原创 2021-07-05 15:48:24 · 1930 阅读 · 0 评论 -
vue-子组件调用父组件方法并获取返回值
有木有遇到项目中列表渲染时,后台返回数据需要翻译,如返回的是 1/0,需要翻译成 男/女,当然,如果你直接用的,则直接编写方法或filter即可,这里说的是自定义封装的table组件。1、首先想到的是$emit(),但是此方法返回值是vue对象,而不是父组件方法中return的值,这里就不展示了。2、然后曾经我也用过$parent直接调用父级的方法,如下sexFilter(value){ return this.$parent.sexFilter(value)}但是也总觉得有点别原创 2021-06-25 14:08:29 · 7449 阅读 · 0 评论 -
vue动态添加路由清空路由
刚做的项目分多个模块,点击后再查询菜单,动态加进路由,直接动态添加则爆出警告信息(路由重复):于是乎想到了先清空路由:resetRouter() { const newRouter = new Router({ mode: 'hash', // scrollBehavior: () => ({ y: 0 }), routes: constantRoutes, //引入的公共路由 base: process.e原创 2021-06-09 17:47:01 · 3949 阅读 · 3 评论 -
vue项目浏览器出现的警告信息:[vue-router] Duplicate named routes definition: { name: “index“, path: “/index“ }
那是因为路由这样写的改成这样即可:{ path: '', redirect: { name: 'index', }, }, { path: '/index', component: (resolve) => require(['@/views/index'], resolve), name: 'index', meta: { title: '首页', noCache: true, affix: true },.原创 2021-06-09 17:37:59 · 3763 阅读 · 0 评论 -
vue自定义组件中的v-model
话不多说,直接上代码父组件<template> <div> <Base-input v-model="baseValue" @myChange="change"></Base-input> <button @click="changeValue">更改baseValue</button> </div></template><script>import BaseI原创 2021-02-09 15:51:48 · 173 阅读 · 0 评论 -
vue的filter在三元表达式中的问题
filter与三元结合遇到的问题:<!-- 如果用括号括起来,过滤器就不识别--> <div> {{info.status == '1' ? '进行中' : (info.modified_time |getFormateTime) }} </div>解决一:新建方法替换,如<div> {{info.status == '1' ? '进行中' : formateTime(info.modified_time原创 2021-01-23 15:20:30 · 1915 阅读 · 4 评论 -
elementui el-form 输入框回车页面刷新问题
问题描述:在提交某项业务时,需要输入一次密码,点击下方确定后提交,但是当el-input有焦点时,按下回车会发生页面刷新事件,url中的参数也被清空。代码如下:<div class="password ft12"> <el-form> <el-form-item label="密码:" label-width="95px" prop="password" class="password"> <el-input cla原创 2021-01-18 11:39:17 · 1189 阅读 · 1 评论 -
win10系统cnpm报错
在安装启动服务的时候会报“cnpm : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本”(每次都百度,偶尔还找半天,便自行记录在此)。我遇到的问题如下图所示:解决方案第一步:在开始菜单里找到Windows PowerShell.并以管理员身份运行这里要注意的就是必须要以管理员身份运行。第二步:输入 set-ExecutionPolicy RemoteSigned 回车第三步:输入 A 回车第四步:原创 2020-10-15 16:49:28 · 288 阅读 · 0 评论 -
vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue目录下,则需要做路径配置,并做history配置一、 需要修改router.js中new Router 配置,加一个 base: ‘/vue/’, 它指定应用的基路径,默认是根路径’/’,表示该应用...原创 2019-11-03 00:07:54 · 188 阅读 · 0 评论 -
vue-cli3.0中vue.config.js配置
vue-cli3.0创建项目时没有创建vue.config.js,可以自己在根目录下创建该文件const path = require('path') //路径const uglifyJsPlugin = require('uglifyjs-webpack-plugin') //npm install uglifyjs-webpack-plugin --save-dev//生产环境co...原创 2019-11-02 23:16:24 · 689 阅读 · 0 评论 -
vue小技巧———动态路由引入
有时候项目比较大的时候,路由太多,放在一起不便于维护,这时候我们可以分模块引入路由,比如在router目录下新建 login.routes.js然后我们在主路由 index.js里面动态引入即可import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home'Vue.use...原创 2019-10-31 13:22:05 · 917 阅读 · 0 评论 -
vue小技巧———一键全局注册组件
我们在做vue项目时,有些频繁使用的组件,你还需要每次使用的时候都 import 么?那么往这看过来第一步把需要频繁使用的组件放在一起,同级新建 global.jsimport Vue from 'vue'function changeStr(str) { return str.charAt(0).toUpperCase() + str.slice(1) //国际惯例,组件首字母...原创 2019-10-31 12:55:34 · 144 阅读 · 0 评论 -
vuex study第一节
引入vuex1.利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。npm install vuex --save2.新建一个vuex文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。 然后写store.jsimport Vue from 'vue'import Vuex from 'vuex'//安装vuexV原创 2018-01-01 17:41:29 · 203 阅读 · 0 评论 -
vuex study第二节state访问状态对象
上一节我们是直接用 $store.state.count 来访问store状态的,现在我们是想处理一下,然后直接用 count 来调用: 第一种方法:用vue的computed计算属性,在Count.vue<template> <div> <h1>{{ msg }}</h1> <!--直接引用store里的数据--> <h2>{{ $stor原创 2018-01-01 18:11:01 · 301 阅读 · 0 评论 -
vuex study第三节Mutations修改状态
第一节我们初步见识了Mutations,这节我们再来详细看看,首先我们在store里面的mutations的方法加个参数const mutations = { add(state,n){ state.count+=n; }, reduce(state){ state.count--; }}然后是我们的Count.vue组件<templ原创 2018-01-01 18:32:20 · 322 阅读 · 0 评论 -
vuex study第四节getters计算过滤操作
首先store里面声明getters//声明getters,就是每次count改变时先加上100const getters = { count:function(state){ return state.count +=100; }}//导出export default new Vuex.Store({ //导出状态常量 state, /原创 2018-01-01 19:07:03 · 196 阅读 · 0 评论 -
vuex study第五节actions异步修改状态
首先在store声明actions//声明actionsconst actions = { //context表示上下文对象 即store addAction(context){ context.commit('add',10); //延迟3秒执行一次reduce setTimeout(() => {context.commit('原创 2018-01-01 19:40:49 · 512 阅读 · 0 评论 -
vuex study第六节初识module模块组
首先store声明module//声明模块组const moduleA = { state, mutations, getters, actions}//导出export default new Vuex.Store({ modules:{ a:moduleA }})然后Count.vue组件调用state{{ $store.s原创 2018-01-01 20:30:33 · 207 阅读 · 0 评论 -
axios代理跨域proxy+拦截器使用
1、首先axios不支持vue.use()方式声明使用(npm安装就不说了)//在main.js中如下声明使用import axios from 'axios';Vue.prototype.$axios=axios;//挂载到Vue原型上//那么在其他vue组件中就可以this.$axios调用使用2.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本原创 2018-01-10 20:45:38 · 9197 阅读 · 3 评论 -
星星评价技巧
目前因为没做过电商的,所以看到电商的几星评价,自己也来试一把,这里用的vue,主要是想给这小算法做个笔记 首先template:template> div class="star"> span class="star-item" v-for="(item,index) in classes" :class="item" :key="index">span> div>te原创 2018-01-28 00:09:32 · 265 阅读 · 0 评论 -
Vue调试神器vue-devtools安装
前言vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。chrome商店直接安装 vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。或手动安装 第一步:找到vue-devtools的github项目,并将其原创 2017-12-30 19:03:58 · 462 阅读 · 0 评论