![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
美的人是吃货
昨日以昨,今日以今
展开
-
Error: Cannot find module ‘../config‘
写在前:因项目来回打开,可能不小心把文件夹移了位置,运行vue项目报错解决:找到文件夹放到正确的地方,我的是config 的文件夹跑到了build的文件夹下,daosh原创 2021-06-19 15:51:56 · 6098 阅读 · 0 评论 -
Cannot read property ‘style-resources-loader‘ of undefined
写在前:当前环境是vue3, vue-cli4新建项目。安装过 'style-resources-loader'之后报错;报错内容:Cannot read property 'style-resources-loader' of undefined;原创 2021-06-19 10:04:29 · 5466 阅读 · 2 评论 -
图片使用 onload 检测图片是否加载
写在前:图片更新,确定图片或者图片流是否加载完成(是否显示),更新图片封装方法: getimg(src, resolve, reject) { let img = new Image(); img.src = src; // 以下resolve为成功回调函数,reject为失败回调函数 img.onload = () => { resolve(img) }; // 这里需要把img传原创 2021-05-19 11:36:51 · 627 阅读 · 0 评论 -
vue 单页面 未登录 跳转登录页 记录
写在前:当前环境,复制登录后的单页面链接分享他人,他人并没有登陆过,实现他人打开这个链接未登录的情况下,路由重定向登录页,以防数据等参数错误导致页面不能查看问题。1.登陆页面,登陆成功后本地记录sessionStorage.setItem('userId', resdata);2.在main.js 中router.beforeEach((to, from, next) => { if (to.matched.some((auth) => auth.meta.requi..原创 2021-01-15 14:02:59 · 324 阅读 · 1 评论 -
vue 引入 echarts 小例子
写在前:这是一个使用vue引入 echarts 的案例,最简单的demo。全局使用。官网链接1、 使用npm 获取 echartsnpm install echarts --save2、 全局引入 main.js 中引入原创 2021-01-05 17:36:04 · 181 阅读 · 0 评论 -
vuex的使用杂录
写在前:vue官方文档地址定义:Vuex是一个专为Vue.js应用程序开发的状态管理模式。范围:组件之间共享的数据。安装vuexnpm install vuex --save引入:import Vuex from 'vuex'Vue.use(Vuex)创建store对象const store = new Vuex.Store({ state:{count: 0}, mutations: { increment (state) { stat.原创 2020-09-21 18:26:29 · 166 阅读 · 0 评论 -
vue 使用TCPlayerLite 官方提供方式播放直播
写在前:这是使用官方提供的方式实现视频播放(自动播放)可切换实现:<template> <!-- 测试--> <div id="palyback"> <div :class="{'else': onswitch}"> <div id="player-container-id"></div> </div> <div :class="{'else': !onswitch原创 2020-08-22 13:52:59 · 3346 阅读 · 2 评论 -
vue 使用v-tcplayer播放m3u8格式(直播)案例
写在前:这个例子,如果你只想显示一个视频,并且是调接口才能拿到视频地址,请勿使用这种方式,你可能要看最后提示。前提:已经下载插件(必须)<template> <!-- 测试--> <div id="palyback"> <div :class="{xiaoping: isaa, 'daping': dapingshow}"> <VTcPlayer ref="tcPlayer" :options="options" e原创 2020-08-21 15:41:45 · 1919 阅读 · 1 评论 -
vue 使用v-tcplayer播放m3u8格式直播(自动播放)
写在前:本例中记录使用vue插件 v-tcplayer 播放直播流m3u8格式,并实现自动播放安装插件下载地址实现效果:(待解决:当前页面刷新视频停止播放,视频暂停后切换)下载插件:npm install --save v-tcplayer页面引入:(本例中播放视频页面引入)import { VTcPlayer } from 'v-tcplayer'...原创 2020-08-21 15:11:07 · 3578 阅读 · 3 评论 -
vue 图片 404 显示默认图片
写在前: vue中循环显示图片,报错404,未加载图片的情况下可以使用默认图片 <img v-if="onswitch" :src="oneurl" alt="图片" onerror="this.src = '线上图片地址'">注:测试中本地图片没有实现效果原创 2020-08-15 17:12:57 · 776 阅读 · 0 评论 -
vue 中 router-view 路由跳转到同一个页面,页面刷新解决记录
写在前:当前环境,在父级页面点击方法跳转路由,路由携带参数到同一个页面,本例使用name/params(post)方式传参,页面不刷新解决方式记录。1.修改传参方式为get,当路由地址发生改变的时候,重新刷新页面。(绑定以下key) <router-view :key="$route.fullPath"></router-view>当前传参环境:router.js页面案例:{ path: 'rotation', component: Rotatio.原创 2020-07-28 15:39:26 · 3778 阅读 · 0 评论 -
局域网内解决vue项目跨域问题
写在前:vue-cli(2)脚手架项目,局域网使用谷歌浏览器,报错 “跨域” 问题, 修改vue中的配置文件,解决跨域。一、修改项目中的 config > index.js 文件(替换自己的调用的地址)proxyTable: { '/api': { target: 'http://192.168.0.162:998/', // 目标接口 changeOrigin: true, // 是否跨域 pathRewrite: {...原创 2020-07-08 10:19:22 · 1755 阅读 · 0 评论 -
vue-cli3脚手架引入 axios 两种方式
写在前: vue-cli3脚手架新建的项目中 全局使用 axios使用npm: 安装axiosnpm install axios新建开发环境下的配置文件.env.development文件名字文件内容 本地地址VUE_APP_URL = 'http://192.168.0.86:8090/'新建生产环境下的配置文件(可忽略).env.production...原创 2020-03-18 17:10:27 · 4113 阅读 · 0 评论 -
vue脚手架 vue-cli 3 手动建项目
注意,如果vue-cli 3是目前最新的,但是,不是vue3,只是脚手架版本(个人理解)第一步,下载node.js、使用node自带的npm 命令行搭建项目(node.js下载地址)1.检查是否安装node 方法:window + r 弹出输入框,输入:cmd2.在窗口中输入:node -v注:检查是否出现版本号,如果出现版本号,就表示成功;(报错请自行百度解决方法或留言在...原创 2020-03-13 11:50:15 · 212 阅读 · 0 评论 -
vue element 表单验证 rules 规则caikeng
问题复现: 输入内容符合rules 验证规则依旧报错如下:页面输入符合规则 依旧报错<el-form :model="querylearn" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="学段" prop="name"&...原创 2020-01-02 17:06:54 · 364 阅读 · 0 评论 -
vue 中 @click.native
写在前:使用 vue + element 的项目<el-option v-for="item in subEnum" :key="item.key" :value="item.key" :label="item.value" @click.native="sectionTap"></el-option>@click.native :给组件绑定原生事件...原创 2019-12-23 14:38:46 · 286 阅读 · 1 评论 -
vue-cli 脚手架
因为想记住这个过程,所以边实践边记录下来,希望可以帮助想开始搭建项目的人。第一步:安装node.js(node.js下载详细信息)1.1 进入cmd 依次输入 node -v npm -v1.下载成功安装成功(选择默认即可)后 执行 window 键 + r键 ,调出输入框,输入:cmd,出现窗口;输入:node -v注:查看是否出现版本号,成功出现版本号npm ...原创 2018-07-11 18:02:07 · 205 阅读 · 0 评论 -
vue 简单模拟 后台数据渲染页面
1.实例<div id="app"> <div class="student" style="width: 80%;margin: 0 auto;"> <ul style="list-style: none; text-decoration: none;"> <li v-for="person in persons" style="wid...原创 2019-03-16 10:38:09 · 3758 阅读 · 2 评论