![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
烟火星辰madi
这个作者很懒,什么都没留下…
展开
-
将Vue页面导出为pdf格式并进行下载
1.使用npm下载两个插件 a.将html页面转换成图片 npm install --save html2canvas b.将图片生成pdf npm install jspdf --save 2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件,内容如下: // 导出页面为PDF格式 import html2Canvas from 'html2canvas'; import JsPDF from 'jspdf'; export default { install(Vue, opti原创 2021-02-09 20:49:52 · 407 阅读 · 0 评论 -
在vue项目中使用rem适配实现h5页面
1.安装依赖 npm install amfe-flexible -S npm install postcss-px2rem -S 2.引入lib-flexible // 在入口main.js中 引入 lib-flexible import "amfe-flexible/index.js"; 注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!! 3.配置post-px2rem vuec原创 2020-12-30 10:28:02 · 927 阅读 · 0 评论 -
h5 rem是如何实现自适应布局的?
摘要:rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起原创 2020-12-30 10:22:15 · 1278 阅读 · 0 评论 -
vue element-ui按需引入
1.安装elementui npm i element-ui -S 2.按需引入需要下载插件 npm install babel-plugin-component -D 3.然后,将 .babelrc 修改为: { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]原创 2020-10-12 16:40:48 · 379 阅读 · 0 评论 -
vue实现动态改变title
想要实现vue动态改变页面title,需要给每个页面设置标题。并且在路由发生变化时修改页面title router - index.js const router = new Router({ mode: 'history', routes: [ { path: '/index', name: 'index', component: Index, meta:{原创 2020-09-27 13:38:29 · 396 阅读 · 0 评论 -
vue.js通过路由跳转页面的三种方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。 <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`,原创 2020-09-27 13:27:15 · 1579 阅读 · 0 评论 -
Vuex 详细教程
最详细的Vuex教程 什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1、利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。 npm install vuex --save 要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。 2、新建一个原创 2020-07-12 12:50:06 · 191 阅读 · 0 评论 -
Vuex入门(一)
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核心 上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解. 二. 为什么要使用Vuex? 试想这样的场景, 比如一个原创 2020-07-12 12:26:59 · 108 阅读 · 0 评论 -
创建node web项目服务器运行前端项目
在vue_shop同级创建一个文件夹vue_shop_server存放node服务器 使用终端打开vue_shop_server文件夹,输入命令 npm init -y 初始化包之后,输入命令 npm i express -S 打开vue_shop目录,复制项目打包好dist文件夹,粘贴到vue_shop_server中 在vue_shop_server文件夹中创建app.js文件,编写代码如下: const express = require('express') const app = express原创 2020-07-11 22:15:53 · 512 阅读 · 0 评论 -
Vue-resource和Axios对比以及Vue-axios
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios。 vue-resource特点 vue-resource插件具有以下特点: 1,体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。 2,支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。 3,支持Promise API和URI Templates Pro原创 2020-07-05 19:22:56 · 302 阅读 · 0 评论 -
Vue知识点
vue核心知识——理论篇 1、对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少。 Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。 渐进式的含义,我的理解是:原创 2020-07-05 18:54:22 · 311 阅读 · 0 评论 -
HTML元素脱离文档流
一、什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流。 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成了文档流。 二、什么是脱离文档流? 元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。 脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。 三、怎么脱离文档流? 1:float 使用floa原创 2020-07-04 21:28:37 · 467 阅读 · 1 评论