![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
一个前端小朋友
个人的一点看法,如有错误,请不吝指教
展开
-
vue-cli 4.2.3中vue.config.js 配置常用参数(webpack)
截止到2020.3.17,vue-cli版本已经到了4.2.3原创 2020-03-19 10:13:36 · 3794 阅读 · 3 评论 -
vue使用xlsx修改样式导出excel
先上效果图使用的插件是xlsx和xlsx-stylenpm install xlsx-style --savenpm install xlsx --save官方文档:xlsx-style在需要的组件中引入直接import ‘xlsx-style’ 不起作用,不知道什么原因,在node-modules中找到xlsx-style中的dist目录中的xlsx.full.min.js粘贴到...原创 2019-05-29 18:34:31 · 13227 阅读 · 32 评论 -
vue-cli兼容ie浏览器
当你高高兴兴的写完了页面,谷歌完美运行,但是到了ie,“SCRIPT1006:缺少‘)’,”SCRIPT1004: 缺少 ‘;’,你因为是真的缺少这些东西吗?不,你错了,只是编译出了问题罢了。 vue-cli其是兼容ie的,前提是你写的代码都是es5,因为ie不支持es6,如果你使用了箭头函数,let等es6新语法,那么ie你就需要下载一个babel-polyfill插件。 这个插件的作用就是...原创 2018-07-13 17:33:57 · 5206 阅读 · 4 评论 -
vue 安装vue-echarts以及如何自适应屏幕
npm i vue-echarts 安装 import ECharts from ‘vue-echarts/components/ECharts’ 引入 Vue.component(‘chart’, ECharts) 注册组件在template中这样写 <chart :options="ying" style="width: 100%;heig...原创 2018-05-25 18:28:11 · 8113 阅读 · 0 评论 -
使用Vue-cli搭建前端项目具体流程
Vue-cli是vue的一个脚手架,我们可以通过它来构建我们的前端项目 安装vue-cli的步骤 1. 安装nodeJS(已经集成npm) 2. node –v ; npm –v查看是否成功安装 3. 配置环境变量,找到npm所在的路径(\username\AppData\Roaming\npm)文件可能隐藏,将其放在path中(一般会自动添加) 4. 安装vue-cli: np...原创 2018-02-05 11:37:46 · 5176 阅读 · 0 评论 -
Vue 项目中的性能优化
1、组件复用,公共方法提取,Vue.use2、keep-alive 缓存使用 keep-alive 包裹组件,包裹中的组件不会被销毁,会被缓存。3、获取dom,使用 $refs 配合 ref 获取,提升页面查找时的性能4、v-for 设置key。在用v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值,为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff5、防止内存泄露,组件销毁前钩子,清除事件监听,定时器,全局变量等6、路由懒加载,使用原创 2020-07-06 23:19:46 · 346 阅读 · 0 评论 -
前端播放rtmp和hls视频流(vue-video-player)
前端是不支持直接播放视频流的。想要实现直播可以安装flash插件。推荐使用videojs,这里用vue做示范首先安装建议使用npmnpm i vue-video-player --save因为rtmp需要flash所以npm i videojs-flash在需要的组件中引入 import 'video.js/dist/video-js.css' import 'videojs-f...原创 2018-11-30 12:54:17 · 8188 阅读 · 3 评论 -
使用electron将vue-cli项目打包成exe
如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读。 首先你可以下载一个demo了解一下。git clone https://github.com/electron/electron-quick-startcd electron-quick-startnpm installnpm start这个demo主要就是main.js和package.json 打开...原创 2018-08-29 12:12:03 · 3765 阅读 · 1 评论 -
vue 左右滑动手机屏幕切换路由-touch事件
手机左右滑动,切换导航 以维修记录为例,当页面偏移50px而且手离开屏幕时,路由相应切换 var router = this.$router; this.$refs.maintain.addEventListener('touchstart', (e) => { this.startX = e.touches[0].pageX; }) ...原创 2018-05-30 17:43:48 · 6106 阅读 · 1 评论 -
vue异步axios获取的数据怎样渲染到页面
我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined。 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式。。。 created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseI...原创 2018-04-27 17:48:27 · 24178 阅读 · 6 评论 -
v-for循环出的数据怎么修改其样式(this.$nextTick)
今天忙公司的vue项目,忽然遇到一个问题,循环出来的数据怎么修改它的其中的样式 <ul id="tbUl"> <li v-for="item in date" class="wLi"> <span class="circle"></span> <span c原创 2018-03-07 18:18:30 · 3987 阅读 · 0 评论 -
vue中嵌套页面(iframe)
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径,也可使用服务器根路径http:localhost:8088/…<iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:abso原创 2018-03-08 18:24:57 · 58895 阅读 · 4 评论 -
vue中引入外部js
我们在做vue项目时,经常会需要引入js,常用的有以下几种。第一种import XX from “路径”Vue.use(XX);这里的js文件要导出用export default {Vue.proprtypes.aa=function(){}}第二种js文件没有用export default{}直接就是纯方法解决:可以在main.js中加入以下代码,其中...原创 2018-03-01 14:33:22 · 22975 阅读 · 8 评论 -
vue中使用ref的好处
当我们需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID<div id="parent"> <p ref="profile" id="profile"></p></div>var parent = new Vue({ el: '#parent' })// 访问子组件实例var原创 2018-03-19 16:35:02 · 2032 阅读 · 0 评论 -
vue中计算属性和watch的区别
学习vue框架,一定少不了学习计算属性computed和watch computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。 watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。&...原创 2018-03-14 10:23:37 · 21193 阅读 · 0 评论 -
vue项目设置服务器代理(实现跨域)
设置服务器代理在config文件中的index.js中的proxyTableproxyTable: {//设置服务器代理"/taokubuy": {"target":"http://198.33.33.33:8000,"changeOrigin":true,"pathRewrite": {"^/api":""//api相当于一个别名,代指http://198.3原创 2018-04-16 17:28:15 · 4921 阅读 · 0 评论 -
vue-cli中js是怎样引入html的?
vue-cli是怎么通过webpack把js文件引入index.html的过程呢? vue新手在用vue-cli写项目时候会发现,项目目录下index.html并没有通过标签引入任何js。index.html如下:<!DOCTYPE html><head></meta charsets="utf-8"></meta name='viewpo...原创 2018-02-05 11:42:37 · 5500 阅读 · 0 评论