Vue
文章平均质量分 62
xiaoQinVar
欢迎来我的github gtiee一起学习
展开
-
vue.config.js配置https未加ssl证书报错/socket-node/info net::ERR解决方案
vue.config.js配置https未加ssl证书报错/socket-node/info net::ERR解决方案记录一波,查阅资料流程背景:因为开发直播间用到TRTC SDK,在web端调试要么http:localhost:port、https:ip:port直播黑盒测试,采用最接近真实的测。一台电脑肯定不够,要么内网穿透,要么局域网,无论哪种方式都逃不掉https协议!我原本的vue.config.js有关https的配置module.exports = { devServ原创 2022-05-09 11:42:27 · 2294 阅读 · 0 评论 -
Element-UI配个第三方字体图片插件使用
Element-UI配个第三方字体图片插件使用我这里采用的是阿里icon选择好你的图标之后download完成之后将里面需要的文件放在一个自定义的文件夹内按照下载的演示文档给的要求,按照他的要求引入,比如我这里采用的是font-css引入import Vue from 'vue'import App from './App.vue'import router from './...原创 2020-04-26 20:50:02 · 389 阅读 · 0 评论 -
Element-UI踩坑
Element-UI踩坑——Form系列每次踩的坑解决了都会记录在里面resetFields重置表单内容依旧有,注意是否数据绑定resetFields重置表单内容依旧有,注意是否数据绑定如果已经将数据绑定了,那么restFields()只会清除表单的规则而不会清空内容。...原创 2020-05-02 17:10:55 · 630 阅读 · 0 评论 -
element-ui的自定义表单验证(不需要其他插件)
element-ui的自定义表单验证(不需要其他插件)在使用element-ui组件时发现它提供的官方验证很少,像电话的就没有(可能我没找到,懒得找),所以就有了本文自定义验证。超简单创建文件夹和文件,个人喜欢最求封装性和后期维护,虽然现在没感受到任何好处。因为写过的项目不会再看第二眼在文件内自定义验证规则export function isValidPhone(str) { // 验证电话函数 const reg = /^1[3|4|5|7|8][0-9]\d{8}$/ retu原创 2020-05-17 21:38:03 · 576 阅读 · 0 评论 -
vue/cli3.0打包后html文件引入的是绝对路径修改成相对路径问题
vue/cli3.0打包后html文件引入的是绝对路径修改成相对路径问题在文件中修改传送门在文件中修改,可能这个博主用的是2.0吧,我没找到这些文件。不过挺详细的脚本之家的文件内直接修改方式参照大佬给的方法改的新建vue.config.js文件,配置如下:module.exports = { publicPath: ""};再打打包就是相对路径了。提醒一下,如果是h...原创 2020-05-04 17:48:45 · 2665 阅读 · 0 评论 -
ESLint规则修改和VS Code编译器格式化规则修改
ESLint规则修改进入.eslintrc.js文件在rules中修改,以 禁用esLint的函数名之后必须加空格再加括号为例module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', 'eslint:recommended' ...原创 2020-05-03 16:45:56 · 649 阅读 · 0 评论 -
node-sass无法下载的解决方法
node-less无法下载的解决方法有的人说可以用npm下载报错后会给一个地址用迅雷直接下载就可以,因为自己的网络缘故此方法不行。最终的解决办法是新建.npmrc文件在package,json同级目录下,然后再直接安装就可以了。.npmrc内部写上sass_binary_site=https://npm.taobao.org/mirrors/node-sass/...原创 2020-04-26 15:56:18 · 1116 阅读 · 2 评论 -
vue.config.js配置sass-resources-loader
配置sass-resources-loader详细查看sass-resources-loader的GitHub网站新建vue.config.js文件开始配置内容 // scss-resources-loader配置module.exports = { chainWebpack: config => { const oneOfsMap = config...原创 2020-04-25 20:59:51 · 4649 阅读 · 0 评论 -
Vue cli别名配置
Vue cli别名配置新建一个vue.config.js文件,这个文件的作用有:配置别名、配置一些插件像scss-resources-loader:一个可以创建多个文件,文件内部的内容都会作为全局变量,在其他创建的文件中不用引入可以直接访问、以及其他插件。配置内容const path = require('path'); const fs = require('fs');funct...原创 2020-04-25 20:53:39 · 986 阅读 · 0 评论 -
Vue嵌套路由(vue-cli项目写法)
Vue嵌套路由(vue-cli项目写法)创建项目后书写路由规则 const routes = [ { path: '/', redirect: '/home', // 重定向到/home路径 }, { path: '/home', component: Home // home组件页面(第一层) }, { path: '/about', // about组件页面(第一层) component: () => import('原创 2020-08-09 13:07:46 · 620 阅读 · 0 评论 -
Vue过滤器使用(全局、局部)
Vue过滤器使用(全局、局部)转载 : 借鉴大佬文章这里只写全局过滤器定义无参全局过滤器<div id="app"> <p>{{ msg | msgFormat}}</p></div> <script> // 定义一个 Vue 全局的过滤器,名字叫做 msgFormat Vue.filter('msgFormat', function(msg) {原创 2020-08-09 09:08:44 · 501 阅读 · 0 评论 -
Vue监听浏览器前进后退物理返回键(浏览器自带的)
Vue监听浏览器前进后退物理返回键在某些需求下要监听用户物理按键。popstate事件只会在页面不跳转的情况下,路由发生变化触发。created() { // 创建vm实例后执行 // 浏览器控制按钮前进后退触发函数 window.addEventListener('popstate', this.popstate, false); }, destroyed() { // 销毁vm组件 // 避免堆栈溢出,多次创建、多次触发 window.removeEventLis原创 2020-05-09 21:04:53 · 13385 阅读 · 2 评论 -
修饰符.sync的用法
修饰符.sync的用法单个props数据绑定用法对象型props数据绑定用法在vue.2.3.0从vue 1.0.0里面重新拿会修饰符.sync很明显它的意思就是说.sync修饰符可以像v-model一样实现类似双向绑定的场景用法。还有一点需要注意这几行的大概意思就是要求我们用$emit('update:xx', 参数)的形式传参,因为如果不用这种方法子组件内的props参数将无...原创 2020-04-29 19:26:07 · 13290 阅读 · 0 评论 -
v-slot的用法(代替slot和slot-scope)
v-slot的用法(去除了slot和slot-scope)具名插槽根组件 <div id="app"> <Son> <template v-slot:name><!-- 这里注意是v-slot:子组件的插槽名 --> <span>替换了</span> </tem...原创 2020-04-29 13:39:12 · 2419 阅读 · 1 评论 -
Element-UI局部引入、封装
Element-UI局部引入、封装按照官网的引入只需要注意.babelrc文件就可以了,但是那样的代码很长很杂乱无章。采纳自大佬的笔记→传送门最好专门用一个文件夹来封装这个文件选择你需要引入的局部内容这里我选择的官网的摘要,如果你引入的部分,但是触发事件会报错应该是你少引入了一些内容这里你可以选择es6的import导出,我这里选择的是node的CommonJS导出规则,包...原创 2020-04-26 18:51:32 · 2486 阅读 · 1 评论 -
Vue全家桶中使用minxin混入
Vue全家桶中使用minxin混入官网只介绍了普通的引入方法,没有介绍用Cli构建项目的混入方法局部引入创建好混入文件写入并导出.vue文件中引入全局混入1、 2步与局部引入一样在入口文件main.js引入...原创 2020-04-26 17:17:44 · 1340 阅读 · 1 评论 -
前端路由模拟(hash值、history、Vue)
前端路由模拟(hash值、Vue)创建三个简易的子组件 <script type="text/x-template" id="home"> <div> <h1>home</h1> </div> </script> <script type="text/x-template" ...原创 2020-04-23 20:10:20 · 263 阅读 · 0 评论 -
Vue查漏补缺——template标签和具名插槽
Vue查漏补缺——template标签和具名插槽组件html内容:<script type="text/x-template" id="cCop"> <div> <h1>cCop组件</h1> <slot name="test">默认</slot> </div> ...原创 2020-04-09 21:39:23 · 728 阅读 · 0 评论 -
Vue(复用)组件,data属性为何是一个函数。
data属性为何是一个函数总而言之:为了防止组件复用相互影响。从Vue组件的角度上理解<body> <div id="app"> <cop></cop> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...原创 2020-03-21 14:37:20 · 360 阅读 · 0 评论 -
重学Vue——v-model用v-bind和v-on的简易实现
v-model用v-bind和v-on的简易实现<body> <div id="app"> <div>{{ msg }}</div> <input type="text" :value="msg" @input="input" ref="input"> </div> <script src...原创 2020-03-01 12:28:23 · 395 阅读 · 0 评论