vue
qq_35321405
打造自己
展开
-
vue-cli3多项目整合到一个项目中维护打包发布
一. 概述二. 方案三. 实现步骤原创 2020-01-10 17:46:14 · 5130 阅读 · 1 评论 -
vue-cli3项目在IE浏览器打开兼容问题
一.问题描述vue打包的项目在ie浏览器上,不能打开。找了一天的解决方案,解决一个又报一个兼容错误,一步一坑一步一填,终于解决了问题????。我们需要了解的ie浏览器支持版本大于ie8。二.方案第一步:安装babel-polyfill依赖解决es6语法的兼容问题npm install babel-polyfill --save-dev在main.js 文件中引用这个库,import ...原创 2020-01-10 16:39:38 · 7546 阅读 · 2 评论 -
vue项目中实现的全屏功能
一. 引入全屏功能库npm install screenfull -s二. 使用方法<template> <div class="home"> <p class="chart-title" @click="toggleFullscreen">全屏</p> </div></template><...原创 2019-11-07 10:47:20 · 1719 阅读 · 2 评论 -
vue-cli3引入less预处理语言
一. 引入lessnpm install less less-loader --save-dev二. 引入样式资源处理器在style资源中注入css / sass / scss / less / stylus这些内容。主要作用导入一些公共的样式文件,避免在每个样式文件中手动的@import导入。vue add style-resources-loader选择CSS Pre-proc...原创 2019-11-06 18:16:43 · 924 阅读 · 0 评论 -
Vue Cli下环境变量和模式
一. 模式Vue Cli 项目中有三种模式:development(开发模式)、production(生产模式)、test(测试模式)。注意模式不同于NODE_ENV,一个模式可以包含多个环境变量。1. 通过pageage.json下scripts配置打包命令。development: 对应的命令 vue-cli-service serveproduction:对应的命令 vue-cli...原创 2019-05-31 17:59:07 · 2267 阅读 · 0 评论 -
vue项目升级
一、需要升级的依赖包项目中使用的依赖包版本比较旧,在新的版本中一些指令被废弃了,也添加了一些新的指令用法,修复了之前版本存在的局限性。如果不定期升级版本,后期维护起来会很麻烦。依赖包旧版本号新版本号升级命令vue2.5.162.6.10npm update vuevue-router3.0.13.0.3npm update vue-routerv...原创 2019-06-06 18:13:36 · 6210 阅读 · 0 评论 -
分析vue双向绑定原理(MVVM)
Vue的响应式原理,也可以叫双向绑定原理,MVVM模式原理。一、MVVM 理解MVVM分为Model、View、ViewModel三者。Model 代表数据模型,数据和业务逻辑都在Model层中定义;View 代表UI视图,负责数据的展示;ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;Model 和 View 并无直接关联,而是通过 V...转载 2019-06-18 16:55:46 · 545 阅读 · 0 评论 -
设置echarts图表(饼图,折线图,柱状图)点击事件
一. 概述vue+echarts 开发环境,echarts API提供默认了点击事件,但是有一些需求,要求我们改良一下点击事件。比如:柱状图,默认事件只有点击图表柱子,才可以触发点击事件。有时候数据比较小,柱子不容易点击,但是我们还想看点击后的效果,只能扩大触发点击区域的方法。 this.line = this.$echarts.init(document.getElementById(th...原创 2019-06-20 18:03:58 · 5800 阅读 · 0 评论 -
vue-计算属性和侦听属性
一、计算属性computed计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。对比普通函数方式,每次访问都需要执行一遍函数。计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter 。例子<script>// @ is an alias to /srce...原创 2019-06-04 18:14:55 · 391 阅读 · 0 评论 -
echarts图表横屏展示
一. 概述项目环境:vue + vuex + echarts实现图表的横屏效果。二. 效果图横屏效果三. 方案废弃方案:在图表的外层添加一个div,添加css旋转属性,宽/高=100%,设置图表的高=屏幕高,图表的高=屏幕宽废弃方案的结果:效果同样能达到横屏效果,但是提示文本有问题,有些区域点击无法弹出提示文本,pass了这个写法。也琢磨了一下为什么部分区域点击无效呢,...原创 2019-06-21 18:06:14 · 7081 阅读 · 12 评论 -
window10下搭建vue前端开发环境
一. 运行环境:nodejs下载网址:http://nodejs.cn/download/根据自己系统选择对应的安装包,我的系统window10 ,64位。二. 下载vue开发环境相关的依赖项打开cmd终端,输入node -v,查看nodejs版本号,来检查nodejs是否安装成功了。安装vue:npm install vue安装vue脚手架:npm install -g @v...原创 2019-07-10 14:57:07 · 680 阅读 · 0 评论 -
nginx同域名下部署多个vue项目
一.需求想要在同一个域名下部署多个前端项目,通过不同url来区分调用相应前端项目。比如:部署项目a,项目b。想要效果如下。浏览器输入:http://localhost:8082/a/,展示项目a。浏览器输入:http://localhost:8082/b/,展示项目b。二. 本地下载nginx服务器http://nginx.org/en/download.html三. nginx常用...原创 2019-07-16 15:16:53 · 7092 阅读 · 2 评论 -
vue项目中使用element-ui封装菜单树
一. 效果图底层使用el-menu菜单组件,项目中要求动态获取菜单树,并且层级不固定。所以就在el-menu组件基础上封装了一下。二. 实现代码SideBar.vue 文件<template> <el-aside width="200px" style="background-color: #F3F6F9"> <el-menu :...原创 2019-08-20 15:20:13 · 3303 阅读 · 0 评论 -
Visual Studio Code+vue项目格式化代码配置方法
一. 概述使用Visual Studio Code开发工具,多人开发vue项目,为了统一代码格式风格问题,配置格式化文件模板。给我们多人开发提供了很多便利,能快速找到项目中未使用到的方法,变量,多引用的组件。提醒我们及时处理这些多余的代码。二. 使用插件格式化js代码插件:ESLint格式化html、标准css、标准js、vue文件:Vetur区分html,js,css模块不同属性使用...原创 2019-08-21 16:29:00 · 5499 阅读 · 0 评论 -
vue-cli3中使用svg-sprite-loader方法
一. 引用步骤npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D在src目录下新建svg文件夹,这里存放所有svg文件。在vue.config.js文件中配置加载svg文件对应svg-sprite-loader规则const path = require('path')function resolve(...原创 2019-08-21 17:36:28 · 3251 阅读 · 1 评论 -
vue-小知识
一、Vue中给data中的对象添加一个新的属性时会发生什么,如何解决。// 假如data中有一个obj对象,申明方式如下。obj={name:'xudanfeng'}// 通过这种方法添加age属性,属性添加成功,但是视图并未立马更新。this.obj.age = 12// 这种方法添加的属性,在视图中会立马刷新。this.$set(this.obj,'sex','女')原因在于在...转载 2019-06-05 14:37:07 · 185 阅读 · 0 评论 -
vue-插槽使用
一. 概述项目开发中想封装一个好用的列表组件,思考到怎么在一个组件中实现不同的样式和细微差别呢,想到了vue插槽功能符合我的预想。遇到了一个问题入坑了原创 2019-05-30 18:31:31 · 8255 阅读 · 0 评论 -
Vue-cli2 + webpack搭建vue项目流程以及打包发布流程
目录1.1 命令行初始化项目1.2 分析项目目录1.3 运行项目1.4 多环境配置打包发布一. vue-cli2 + webpack搭建项目流程以及打包发布流程最近升级到vue-cli3,发现vue-cli2搭建项目命令不能用了,两者搭建开发环境项目内容也发生了变化。vue-cli2搭建项目环境的命令:vue init webpack vue2-webpack-proj...原创 2019-04-25 18:41:28 · 5295 阅读 · 0 评论 -
vue的mixins混入功能
混入minxins:分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时,所有混入对象的选项将混入该组件本身的选项。 选项合并:组件选项和对象选项同名时,将以恰当方式混合。 数据对象:和组件数据冲突时以组件数据优先 同名钩子函数:混合为一个数组,都将被调用,混入对象钩子先调用。 值为对象选项:methods,components,将被混合为同一个对象...原创 2018-07-24 15:36:40 · 8494 阅读 · 0 评论 -
vue---Prop使用
一. 简述prop使用场景:父组件需要向子组件传递消息的时候,子组件就可以定义prop属性,来接受父组件传递消息。二. 使用方法定义1: 带校验方式指定属性,方便其他人知道传什么类型的值Vue.component('my-test',{ props: { course: { type: Object, def...原创 2018-08-13 17:45:47 · 3514 阅读 · 0 评论 -
vue---组件间传递消息(父子传递消息,兄弟传递消息)
一. 简述有时候我们需要使用到组件间的传递消息,来达到我们想要效果。比如以下场景,A下包含B1,B2,他们之间可以相互通信。二. 实现方法上面那个图包含两中通信方式,父子通信,兄弟通信。我们首先实现父子通信,其次在实现兄弟通信。2.1 父子通信B1,B2组件定义props属性,来接受父组件传递过来的值。B1,B2想要给A传递消息,需要通过this.$emit函数来传递消息。...原创 2018-08-13 18:58:23 · 2877 阅读 · 0 评论 -
vue引入element-ui
一.简述vue项目中使用element-ui框架,可以快速开发后台项目。这里我们从一个新vue项目开始,一步一步引入element-ui。二. 步骤初始化vue项目:vue init webpack 项目名 加载element-ui:npm install element-ui --save 或者 npm i element-ui -S 配置element-ui: 在main.js...原创 2018-09-04 16:55:05 · 4350 阅读 · 0 评论 -
vue中引入echarts
一. 简述vue项目中使用图标库echarts.二. 步骤引用echarts:npm install echarts -s 配置echarts:// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base...原创 2018-09-04 17:34:34 · 1163 阅读 · 0 评论 -
vue中引入axios
一. 简述vue项目中引入axios,它作用和ajax一样来提供网络请求服务。二. 步骤1.引用axios:yarn add axios2.封装axios:/** * @description axios 网络请求封装 * @author xudanfeng */import axios from 'axios'let querystring = requi...原创 2018-09-18 10:29:53 · 11120 阅读 · 0 评论 -
vue引入md5
一. 简述登录,修改重要信息等场景需要用到md5加密,来保证传输数据保密性,安全性。二. 步骤1. 引入md5:yarn add md5 -s2. 使用md5: 在需要加密的页面,引入该模块<script>import {post} from '@/common/net/serviceUtil.js'import md5 from 'md5'export...原创 2018-09-18 10:39:01 · 8730 阅读 · 0 评论 -
创建Vue项目流程
一. 简述vue-router + vue-cli + Element-ui + axios + Echarts开发环境配置,这里前提已安装好node环境。二. 步骤初始化vue项目:vue init webpack smile 进入项目目录,安装插件:yarn install 运行项目:yarn run dev 引入Element-ui:引入Element-ui文章 引入E...原创 2018-09-18 10:20:04 · 345 阅读 · 0 评论 -
vue---移动端调试功能vConsole
一. 简述web端项目可以查看浏览器控制台信息,方便调试。然而移动端项目没有控制台可看,调试起来特困难。最近在做基于vue框架的移动端项目,有的bug不看日志,无法调试,很头疼。百度一下终于解决了这个难题,基于vue的有个可以在移动端查看日志的插件vConsole,很好用,也方便。二. 如何使用1. 引入vConsole插件:yarn add vconsole -s或npm in...原创 2018-10-17 13:51:39 · 10965 阅读 · 0 评论 -
Vue-cli3 + webpack搭建vue项目流程以及打包发布流程
目录1.命令行初始化项目2. 分析项目目录3. vue.config.js多环境打包配置4. 发布项目5.参考文章1.命令行初始化项目bogon:vue xudanfeng$ vue create vue-cli-projectVue CLI v3.0.2? Please pick a preset: Manually select features? C...原创 2019-04-26 14:31:10 · 5419 阅读 · 0 评论 -
vue-按需加载引用echarts中组件
目录第一步:引用echarts组件库第二步:main.js中全局配置主模版第三步:封装echarts折线图line组件第四步:在需要使用页面中引用line组件。项目中我们一般会全局引用echarts组件库,开发起来方便。发现项目文件体积过大,首屏加载也会慢。为了解决首屏加载速度问题,项目体积大的问题。方法1:这就要求我们要采用按需加载的模式。没有使用到的echarts中组件不要...原创 2019-04-28 19:13:19 · 10618 阅读 · 0 评论 -
js监控页面浏览时长和记录页面某一个图形浏览时长
需求:pm要求实现一个记录用户停留这个页面时长,后台记录,通过这些记录总结用户的习惯。比较坑的就是pm又提出了第二个需求,记录页面中某一个图表浏览时长。无语了,第一反应是不可能实现第二个需求。我们系统环境:vue,听到第一个需求的时候,脑子里有一个想法,应该不难实现,就是定时器的功能。第二个需求懵了,想象脑壳疼,挺麻烦的。聪明的我还是奋战几天实现了原创 2019-04-19 17:10:33 · 5038 阅读 · 0 评论 -
vue-路由篇页面跳转和页面参数传递
简介:路由文件内容介绍目录简介:路由文件内容介绍一 . 页面跳转二. 页面传参,获取页面传递过参数三. 路由导航待整理定义了需要跳转的文件位置映射关系,每一个路由对应一个组件。/** * @file 主路由配置页 */import Vue from 'vue'import Router from 'vue-router'// 懒加载,可以节省收屏加载时间c...原创 2019-04-19 18:50:51 · 1731 阅读 · 0 评论 -
vue--封装日历,周历,月历,季历组件
一. 效果图 二. 实现功能时间快捷键对应的时间段获取方法封装,需要注意本周,上周,采用的是周一到周日日历模版去的间隔。 日历网上找的一个demo,改装成自己项目中要求的样子。限制了未来月份不能切换,最小切换月份2018年1月。 日历展示样子有两种模版:周一到周日,周日到周六。 月历,季历设置了未来时间段不可点击。注意:安卓,ipone手机...原创 2019-05-07 10:19:47 · 7212 阅读 · 6 评论 -
Promise
一. 简述js是单线程的,Promise解决就是异步编程一种思想,比传统的回调函数和事件强大好多。Promise:英文承诺意思,Promise对象中保存某个未来才回结束的事件(通常是一个异步操作)的结果。Promise有三个状态:pendding,rejected,resolvedPromise对象状态的切换只有两种可能:pendding->rejected,pendding...转载 2018-07-24 14:41:06 · 3349 阅读 · 0 评论