vue学习总结
文章平均质量分 63
本专栏主要总结了我在工作、学习中有关vue的相关知识。
小黑ii
每天进步一点点~~~
展开
-
Ant Design Vue 实现左右树穿梭框
Ant Design Vue 实现左右树穿梭框最近碰见一个需求,要实现权限树左右树穿梭的功能。Ant Design Vue 官网中有穿梭框 Transfer 组件,但提供的示例是左侧是树,右侧则是平铺列表。只能在其基础上进行修改实现了。效果图Options API 实现新建文件 options-transfer.vue<template> <a-transfer :data-source="dataSource" :target-keys="targetK原创 2021-05-21 09:34:49 · 8495 阅读 · 22 评论 -
Vite 2.0 配置总结
Vite 2.0 配置总结GitHub 仓库地址:https://github.com/vitejs/viteVite 官网地址:https://cn.vitejs.dev/1. 环境变量配置项目根目录新建,.env.production.env.developmentNODE_ENV=development VITE_APP_WEB_URL=YOUR WEB URL.env.productionNODE_ENV=production VITE_APP_WEB_URL=原创 2021-03-15 21:31:56 · 11729 阅读 · 0 评论 -
Vue 3.0 项目中集成腾讯云TRTCCalling
2021年1月1日,祝大家新年快乐!大吉大利!2020年疫情原因,在线直播、实时音视频技术也更加火热起来。公司项目业务中也有需要音视频的地方。技术选型使用了腾讯云TRTCCalling,以下展示在Vue 3.0 项目中如何配置使用。在线demo地址:https://wkl007.github.io/trtc-calling-webGitHub地址:https://github.com/wkl007/trtc-calling-web1. 安装依赖yarn add tim-js-sdk trtc-cal原创 2021-01-01 13:03:45 · 2609 阅读 · 7 评论 -
Vue 3.0 + Three.js 学习总结
Vue 3.0 + Three.js 学习总结最近在学习Three.js相关的技术,恰逢Vue 3.0正式版也已推出。现总结一下在Vue 3.0 + TypeScript中如何使用Three.js,如有不足,望在评论区说明。项目使用Vue 3.0+ TypeScript+Ant Design Vue搭建。使用Options API与Composition API两种方式来使用Three.js。最终展示效果如图:Options API<template> <div id="th原创 2020-11-10 21:23:43 · 2481 阅读 · 0 评论 -
vue-cli 3.0 配置
最近上手试了试vue-cli(v3.0.0-rc.5),小结一下1.环境变量相关在一般项目中我们针对不同的开发环境会配置不同的环境变量:开发环境(development)测试环境(production)发布环境(release)1.在项目根目录下新建三个文件:.env.development,.env.production,.env.release//.env.de...原创 2018-07-18 15:48:30 · 6825 阅读 · 4 评论 -
vue分环境打包
在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。代码如下:1.config/prod.env.js文件修改如下:'use stri...原创 2018-04-22 14:37:56 · 1507 阅读 · 0 评论 -
vue 微信分享至朋友圈&&分享至朋友代码封装
1.新建share.js文件import {shareSDK} from "../api/common";//分享apiimport wx from 'weixin-js-sdk'export const shareTitle = '测试';export const shareUrl = '测试连接';export const shareImg = '测试图片';export co...原创 2018-04-01 17:20:05 · 4748 阅读 · 5 评论 -
vue移动端微信授权登录插件封装
1.新建wechatAuth.js文件const queryString = require('query-string')//应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)const SC...原创 2018-03-29 15:40:45 · 20131 阅读 · 35 评论 -
vue项目中实现扫码功能
最近在项目中碰见一个打开摄像头扫码的功能,项目最后打包成app,用的是hBuilder打的包,刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。 demo地址:vue-scan-demo 以下是代码实现:&amp;lt;template&amp;gt; &amp;lt;div class=&quot;scan&quot;&amp;gt;原创 2018-01-02 14:49:02 · 51263 阅读 · 85 评论 -
解决vue-cli npm run build之后vendor.js文件过大的问题
问题&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓原创 2017-11-22 09:15:54 · 24670 阅读 · 25 评论 -
在Vue项目中使用easyScroll滚动条插件
插件github地址:https://github.com/GarveyZuo/EasyScroll/1.插件采用jsx语法,使用前需要安装vue-jsx插件:npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-pre原创 2017-09-20 16:21:04 · 13322 阅读 · 2 评论 -
vue项目中使用echarts
vue-cli创建的项目中1.安装echarts依赖cnpm install echarts -S2.在需要创建图表的页面中按需引入<div class="chart" ref="chartOne" :style="{width: '300px', height: '300px'}"></div><script type="text/ecmascript-6"> //引入Echarts主模块原创 2017-08-30 09:34:08 · 4110 阅读 · 0 评论 -
vue项目中使用ueditor
以vue-cli生成的项目为例1.static文件夹下先放入ueditor文件2.index.html添加如下代码<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf原创 2017-08-23 16:24:21 · 10320 阅读 · 7 评论 -
vue-router实现路由懒加载
在项目router/index.js文件中将import Recommend from 'components/recommend/recommend'更改为const Recommend = (resolve) => { import('components/recommend/recommend').then((module) => { resolve(module) })}即原创 2017-07-13 17:52:22 · 3849 阅读 · 0 评论 -
vue-cli webpack中引入jquery
1.首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install2.在webpack.base.conf.js里加入var webpack = require("webpack") 在module.exports的最后加入plugins: [new webpack.optimize.CommonsChunkPlugin('common.原创 2017-05-02 10:16:31 · 799 阅读 · 0 评论 -
如何在vue项目中使用md5.js及base64.js
一、在项目根目录下安装npm install --save js-base64npm install --save js-md5二、在项目文件中引入import md5 from 'js-md5';let Base64 = require('js-base64').Base64;三、在项目文件中使用base64Base64.encode('dankogai'); // ZGFua29nYWk=原创 2017-04-24 14:19:58 · 51064 阅读 · 6 评论 -
在vue项目中使用Nprogress.js进度条
Ajaxyy应用程序的细长进度条。灵感来自Google,YouTube和Medium。在vue中使用nprogress.js安装$ bower install --save nprogress$ npm install --save nprogress在项目中引入在main.js中引入要使用的nprogressimport NProgress from 'nprogress'import 'np原创 2017-04-14 12:37:26 · 31135 阅读 · 1 评论 -
Vue-resource中post请求将data数据以request payload转换为form data的形式
这是当初我使用vue-resource中post请求时的一个坑,vue-resource中post发送的数据默认以request payload的形式,而一般我们使用的都是form data的形式。如何更改其形式只需要在main.js中写入以下代码:Vue.http.options.emulateJSON = true;Vue.http.options.headers = { 'Content原创 2017-04-14 11:19:07 · 18286 阅读 · 1 评论 -
Vue.js 中 v-if 和 v-show 有什么区别?
简单来说,v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低。具体解释如下:v-show 渲染页面结构后,通过 "display:none" 控制元素状态。所以初始化时间较长。v-if 是懒计算,如果条件为false,它什么也不做,加载速度较快。当条件为真时,v-if 才会真正编译渲染页面结构。因此,v-if 切换复杂组件的花销要比 v-show 大得多。所以要根据实际场景决原创 2017-03-02 10:36:17 · 436 阅读 · 0 评论 -
vue与angular的区别
vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。vue的双向邦定是基于ES5 中的 getter/setters来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,vue则不需要。因此,vue在性能上更高效,但是代价是对于ie9以下的浏览器无法支持。vue需要提供一个el对象进行实例化,后续的所有原创 2017-02-07 20:28:34 · 40059 阅读 · 4 评论 -
vue-cli 安装
使用脚手架工具 vue-cli 可以快速地构建项目安装过程:1、全局安装 : npm install -g vue-cli2、初始化webpack: vue init webpack my-test(工程名称)3、根据提示走4、进入你的工程目录 : cd my-test5、下载所有配置文件的内容: npm install6、热加载(启动服务器): npm run dev注:第六步如果报错,node.原创 2017-01-19 21:46:05 · 443 阅读 · 0 评论 -
vue2.0变化
vue2.0:bower info vuehtt://vuejs.org/到了2.0以后,有哪些变化?在每个组件模板,不在支持片段代码组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素,包裹住所有的代码原创 2017-01-19 21:02:21 · 1674 阅读 · 3 评论 -
vue学习part3
git page:任何仓库 master分支,都可以发布(git page)双向过滤器:Vue.filter(name,{ read: write:});bower:bower-> (前端)包管理器 npm install bower -g 验证: bower --versionbower install <包名>bower unin原创 2017-01-19 19:30:09 · 271 阅读 · 0 评论 -
vue学习part2
vue制作weibo 交互vue-> 1.0vue-resource ajax php服务器环境(node)this.$http.get()/post()/jsonp()this.$http({ url:地址 data:给后台提交数据, method:'get'/post/jsonp jsonp:'cb' //cbName});vu原创 2017-01-19 19:14:44 · 356 阅读 · 0 评论 -
vue学习part1
vue学习part1vue:1、读音: v-u-e2、vue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧3、mvc: mvp mvvm mv* mvx4、官网:http://cn.vuejs.org/5、手册: http://cn.vuejs.org/api/vue和angular区别?vue——简单、易原创 2017-01-19 18:53:38 · 522 阅读 · 0 评论