【适用于vue项目的打印插件（转载）】的更多相关文章

适用于vue项目的打印插件（转载）

出处:https://www.cnblogs.com/lvyueyang/p/9847813.html // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN if (Array.isArray(refs)) { cloneN = refs[0].cloneNode(true) } else { cloneN = refs.cloneNode(true) } const body = document.get…

适用于vue项目的打印插件

此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN if (Array.isArray(refs)) { cloneN = refs[0].cloneNode(true) } else { cloneN = refs.cloneNode(true) } const body = document.getElementsByTagName('body')[0]…

创建vue项目及引入插件

部署开发环境 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install webpack -g 安装vue脚手架 cnpm install vue-cli -g 1. 新建vue项目 在硬盘上找一个文件夹放工程用的,在终端中进入该目录 cd 目录路径 根据模板创建项目 //vue init webpack vuedemo01 新建demo,模板为webpack简单版1.0…

scss/less语法以及在vue项目中的使用(转载)

1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与less正好为css提供这些,让css可以像编程一样灵活书写样式,而且scss与还提供了一些css兼容性的处理,所以运用scss就不需要像写css时队友的语法需要做hack处理.SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的…

vscode 中 vue项目使用eslint插件 检查代码

前言 本文章项目由vue-cli3创建 vscode版本1.36.1 eslint1.9.0 在网上找了一大堆文章,不知是什么原因,没有一篇可以直接使用的 折腾了许久,直接按eslint插件的说明,竟然可以了,本方法在2台电脑上试过成功. 步骤 首先在vscode里安装eslint 进插件详情页,按说明,先全局安装eslint包 然后需要创建eslintrc配置文件 在VSCODE里面,CTRL+SHIT+P, 复制 粘贴Create ESLint configuration 这行文字,然后回车…

vue项目中使用插件将字符串装化为格式化的json数据（可伸缩）

插件地址:https://www.npmjs.com/package/vue-json-viewer 第一步:安装vue-json-viewer插件 $ npm install vue-json-viewer --save 如果npm安装报错,可换成cnpm安装 第二步:在当前页面中引入 import Vue from 'vue' import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer)  注释: (1)如果在全局main.js中引…

vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) //或者 //var option={....} option配置请查看 http://photosw…

vue项目 预览照片的插件 v-viewer

查看图片主要使用的旋转.翻转.缩放.上下切换.键盘操作等功能都有. 1.首先是安装 npm install v-viewer --save 2.安装完在main.js里面引用(还要记得引用它的css样式)下面有两种调用方式 import Vue from 'vue'import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css' // vue注册调用方法一:Vue.use(Viewer, { defaultOptions: { zInd…

HTML5 Canvas圆盘抽奖应用（适用于Vue项目）

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>HTML5 Canvas圆盘抽奖应用DEMO演示</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-sc…

基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS…

手动搭建webpack + vue项目之初体验

在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建vue项目.下面我们使用webpack构建一个简单的vue项目. 前置条件: 电脑已安装node 基本步骤如下: 1. 新建一个空目录,并进入到改目录 $ mkdir myApp $ cd myApp 2. 初始化一个最简单的采用模块化开发的项目 $ npm init 执行这条命令时,会询问你一些项…

基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.js 在main.js需要引入该插件的css和js文件 import 'vue-animate-fullpage/animate.css' import VueAnimateFullpage from 'vue-animate-fullpage' Vue.use(VueAnimateFullpage)…

python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面版 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 基本实例 默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容. 带标题的面版 通过 .panel-heading 可以很简单地为面板加入一…

转载 配置vue项目

Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 说明:此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单…

vue项目全局引入vue-awesome-swiper插件做出轮播效果

在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托管在GitHub中,供下载并理解. vue项目自动生成完毕后,继续在命令行窗口输入cd swiper-test,将目录切换到swiper-test. 下面就开始启动vue项目了,输入启动命令行:npm run dev. 打开浏览器输入网址:localhost:8080 环境搭好了,进入主题,要想引入…

<转载> VUE项目中CSS管理

vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用scoped之后,父组件的样式将不会渗透到子组件中.不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响,如果希望父组件样式影响子组件,可以使用 >>>操作符: 1 2 3 <style scoped> .a >>> .b {…

如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolv…

在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示

在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"><…

实战：vue项目中导入swiper插件

版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件 i…

.gitignore 标准模板 -适用于SpringBoot+Vue项目 -Idea+VSCode开发

.gitignore 标准模板 -适用于SpringBoot+Vue项目 node_modules/ target/ !.mvn/wrapper/maven-wrapper.jar ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans *.log ### IntelliJ IDEA ### .idea *.iws *.iml *.ipr .mvn mvnw* ### NetBeans…

后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 项目src文件夹下的main.js入口文件中 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' V…

vue项目及插件

vue项目的创建 方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷 方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 >>>default (bable,eslint) //默认 manually select features //自定义 (*)bable //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6) TypeScript //js编程还是ts编程 Progressive Web App(P…

vue项目配置多入口多出口【转载】

版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article/details/85106002 问题引入: 在vue项目中,我们通常使用vue-cli脚手架生成项目,生成的是一个单页面的工程,main.js是整个项目唯一的入口,整个项目都在一个index.html外壳中. 但是,有时候,这种默认结构不能满足项目需要 大项目使用单页面负载过重 多页面利于模块独…

vue项目中使用Lodop实现批量打印html页面和pdf文件

1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下: ● PRINT_INIT(strPrintTaskName)打印初始化 ● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小 参数说明: intOrient:打印方向及纸张…

创建一个vue 项目 必备的几个插件

第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org 第二步项目初始化 1.第一步:安装vue-cli cnpm install vue-cli -g      //全局安装 vue-cli 2.新建vue项目 vue init webpack  ”项目名称“  3.下…

用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小项目,确实是可以做服务端渲染,但是这个需要在服务器启动服务,当时我是用的docker,然后用node+nginx做了个容器,然后用pm2做进程守护. 后面我拿原来的Vue项目做了一个对比发现确实是加载速度要比原来的快很多. 后面我又发现有个预渲prerender-spa-plugin染的东西,然后早…

适用于小白：VSCode搭建Vue项目，最详细的搭建步骤哦

在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框.点击终端-新建终端,输入上述命令,回车,等待安装完成. 3.安装webpack,它是打包js的工具 安装命令: npm install -g webpack 安装方法同上. 4.安装完成之后就可以开始创建vue项目,首先创…

vue项目中遇到的那些事。

前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准…

Vue项目经验

Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿.解决方案:在组件生命周期beforeDestroy停止setIntervalbeforeDestory() {clearInterval(this.timer);MessageBox.close() } 使用vue过程中…

webpack搭建vue项目开发环境【文档向学习】

为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版本就更新了,又要对着帖子找文档. 但这个过程十分重要,因为你想要的一切早已都在文档中给出了说明,在查阅文档的过程中不但能学会正确的使用工具更增强了阅读文档这种姿势正确的学习能力. 本文就是记录一次不断遭遇版本问题,一路查阅文档达到学习目的的经历,分享给大家.文章中每个章节提到的相关文档都会在本章节总…