Vue使用PostCSS 插件和如何使用sass及常用语法

为什么要使用PostCss 转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置.将成为vw优先单位使用,以rem作为回退模式.考虑到vw在移动设备的支持度不如rem,这款插件很好的解决了该问题.然后简单的介绍下. 安装指令 $ npm install @ moohng / postcss-px2vw --save-dev 使用方法先创建一个.pos…

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 自定义一个插件的用法、小案例及在项目中的应用

1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, old…

vue 右键菜单插件简单、可扩展、样式自定义的右键菜单

今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装 npm install rightmenu --save-dev 开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu); 例…

分享一个自己写的vue多语言插件smart-vue-i18n

前言目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压缩后大小不超过2kb 使用方法通过Vue.js公开方法install安装,参数 lang 为初始化默认语言,参数 messages 为初始语言库,也可以在组件中新增多语言,语言库格式参照其他开源的国际化项目安装 github地址: smart-vue-i18n yarn add smart-vu…

Vue.js devtool插件安装后无法使用的解决办法

初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示vue.js not detected,无法正常使用呢?对于这样的问题,新人可能会花费很多时间去找答案,今天我们就来整理了解决方法,希望对大家有帮助.首先,我们先要确保Vue.js devtool插件已经安装成功了.具体的Vue.js devtool插件的安装方法可以:chrome插件CRX的离线安装…

Vue实战之插件 sweetalert 的使用

安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { install: (Vue) => { // sweetalert2 的设置默认配置的方法 swal.setDefaults({ type: 'warning', showCancelButton: true, confirmButtonColor: 'rgb(140,212,245)', can…

[vue]初探vue生态核心插件Vuex

为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从状态和 UI 的同步问题,从而使我们不需要由于状态发生改变去写大量的命令式改变 dom 的代码. 而类似于 vuex 这类状态管理的库,则解决了事件 -> 状态这个过程的维护问题.这类库所做的事情就是管理从事件源映射到状态变化这个过程(将这个映射过程从视图组件中剥离出来,组织好这一部分的代码,在…

Vue ---- ajax cookies 插件安装跨域问题 element-ui bootscript 导入

目录补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装配置如何使用? Vue的cookies插件:cookies 安装: main.js配置使用跨域问题(同源策略) 后台处理跨域问题 element-ui插件安装补充:bootscript导入配置jQuery 配置BootSript 补充: 流式布局样式 .xxx{ width: 90vh; /* 屏幕宽度 */ height: 100vh; /* 屏幕高度 */ } D…

基于vue的分页插件

相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下核心代码: DAO层接口: List<Article> selectAll(); mapper文件: 只需要写一个简单的查询即可. <select id="selectAll" resultMap="ResultMapWithBLOBs">…

vue之自定义插件

1.插件的作用插件通常会为 Vue 添加全局功能,一般是添加全局方法/全局指令/过滤器等 Vue 插件有一个公开方法 install ,通过 install 方法给 Vue 添加全局功能通过全局方法 Vue.use() 使用插件,它需要在你调用 new Vue() 启动应用之前完成. 2.开发插件并且使用在项目目录下创建plugins.js文件,用于写入插件内容 (function () { const MyPlugin = {} //声明一个插件对象 MyPlugin.install =…

浅析vue封装自定义插件

在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装自定义插件的本质就是组件实例化的过程或者指令等公共属性方法的定义过程,比较大的区别在于封装插件需要手动干预,就是一些实例化方法需要手动调用,而Vue的实例化,很多逻辑内部已经帮忙处理掉了.插件相对于组件的优势就是插件封装好了之后,可以开箱即用,而组件是依赖于项目的.对组件初始化过程不是很熟悉的可以参…

sass安装和语法

1.简介 sass 它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.这被叫做“css预处理器”(css preprocessor).它提供了很便利的语法,节省了我们写css的时间. 2.安装 (1)首先确保你的电脑安装了 ruby (传送门 https://www.ruby-lang.org/zh_cn/downloads/) // 控制台查看是否安装成功 ruby -v (2)安装 sass gem install sass 3.使用 (1)用编辑器新建…

【css预处理器】------sass的基本语法------【巷子】

001.安装sass 1.删除gem源:gem sources --remove https://rubygems.org/ 2.添加国内源:gem sources -a http://gems.ruby-china.org/ 3.打印是否替换成功:gem sources -l 4.安装sass:gem install sass Linux和Mac已自带Ruby,不用再安装,mac同学安装:sudo gem install sass gem sources --remove https://ru…

Vue常用语法及命令

1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log(username); var username = "小雪"; let username; console.log(username); let username = "雪人"; // 写一个if 判断的语句,var变量:只有全局作用域和函数作用域 // let 有全…

Vue常用语法

一.模板语法 1.双大括号表达式 [语法:] {{exp}} 用于向页面输入数据,即页面显示数据. [举例:] <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initi…

黑马eesy_15 Vue：常用语法

自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端的基础知识ES6语法和Vue.js 所以本篇博客作为入门Vue练习记录的过程,目的是供自学后端Java遇到Vue使用需求的时候,加强学习一下Vue基本使用的方法. 黑马eesy_15 Vue:02.常用语法黑马eesy_15 Vue:03.生命周期黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue常用语法 1.Vue的快速入门2.Vue的语法插值表达式事件的绑定…

“一键”生成HTML——Emmet插件常用语法

Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍的语法仅在sublime测试通过,不过其它平台应该也不会有什么出入. 使用Emmet前提:设置当前为HTML语法模式在sublime中启用Emmet,必须把当前代码的语法模式改为HTML,如果本来就是.html文件那就没问题:如果是新建的文件还没有保存过的,则需要手动先设置为HTML: 在subl…

Vue.Js添加自定义插件

基于上篇我们讲了在window下搭建Vue.Js开发环境我们可以开发自己的vue.js插件发布到npm上,供大家下载使用. 1.首先打开cmd命令窗口,进入我们的工作目录下执行 cd E:\vue 2.使用webpack的简单模板创建我们的项目,比如vue-dialog-rexsheng vue init webpack-simple vue-dialog-rexsheng 如下图,输入项目名称,项目描述,项目作者,认证单位,sass选择N 创建成功后,我们会发现工作目录e:/vue下多了…

vue（5）—— vue的路由插件—vue-router 常用属性方法

前端路由看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由,减轻了服务器对这方面的判断,在前端做好路由分发之后,后端就只需要写API接口了,更着重于数据交互,逻辑上的代码编写了单页面应用那么,既然有前端路由,每个路由是不是都要单写一个页面呢?不需要的,现在都提倡单页面应用什么是单页面应用呢单页面应用,即 single page applicatio…

vscode中vue代码颜色插件

vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. v…

vue Baidu Map --- vue百度地图插件

vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http://lbsyun.baidu.com/jsdemo.htm#d0_1 实现功能: 搜索地点点击地图获取到经纬度和地点信息 vue Baidu Map 安装: $ npm install vue-baidu-map --save 全局注册全局注册将一次性引入百度地图组件库的所有组件. import…

chrome调试vue.js的插件：vue.js devtools

1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 3.如何下载并安装vue.js devtools? 方法一:如果可以打开chrome应用商店, 第一步:直接打开应用商店(点击浏览器左上角“应用”,进入应用商…

webpack + vue 项目自定义插件解决前端 JS 版本更新问题

Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编码进打包后的 manifest.xxxx.js 文件中,然后通过JSONP原理按需加载每个chunk. 每个子模块加载完毕之后,浏览器将会进行本地缓存,从而节省了网络带宽. Webpack编译后的目录结构如下: 从结构目录来看,整个项目的入口就是index.html,我们来看看index.html的…

vue封装第三方插件并发布到npm

前言写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用项目初始化封装vue的插件用…

Vue Baidu Map 插件的使用

最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异步加载jsonp的方式,细节无关本文,暂且不提.噼里啪啦~噼里啪啦~ 代码一气呵成,本地测试完,立马上服务器测试,what ??? 什么鬼 ? 进入界面后,我的地图呢??地图呢??回看代码,代码中有一行window.onload = loadScript,呃~呃~呃~,vue中界面跳转不会触发这个,…

vue播放video插件vue-video-player实现hls， rtmp播放全过程

1.安装插件 1 npm install vue-video-player -S 2.配置插件在main.js里添加 1 import VideoPlayer from 'vue-video-player' 2 require('video.js/dist/video-js.css') 3 require('vue-video-player/src/custom-theme.css') 4 Vue.use(VideoPlayer) 3.使用插件在vue的组件页面里 1 <template>…

google vue开发调试插件，简便安装，亲测可用

前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez 安装方式: 将该文件下载后,打开google浏览器,然后打开扩展程序,将文件拖入浏览器扩展程序中,浏览器会弹出确认框,确认即可. 成功后如图:…

【vue】webpack插件svg-sprite-loader---实现自己的icon组件

引言:最近开始写vue的项目,借鉴了一下vue-element-admin源码,针对vue有一个关于icon图标的处理,最近也找了很多关于vue的icon处理的解决方案,大部分都是按照之前小程序的方式直接引入iconfont项目,然后在外面封装调用样式就可以了. 按照平时导入icon的方法的话有一些已知的缺点操作繁琐,每次ui需要加一些新的图标的时候,都要重新下载图标库的项目,然后把整体的文件(其中包括css,svg,ttf,woff等)替换掉. 如果更改名称的话,需要在图标库里改一次,然后进…

Vue中better-scroll插件的使用

实现原理:父容器固定高度,并设置属性overflow: hidden,使得子元素高度超出容器后能被隐藏.better-scroll作用在父容器上.1.npm安装better-scroll插件.npm install--save better-scroll2.在文件中引入better-scroll.import BScroll from 'better-scroll';用法:new BScroll(Dom对象,{//opsitons});在Vue中要获得Dom对象,需设置标签属性‘v-el’.例如…

【Vue使用PostCSS 插件和如何使用sass及常用语法】的更多相关文章