文档章节

vue 引入less

o
 osc_4nmshwhm
发布于 2018/08/07 11:01
字数 162
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1.

引入的组件:

less

style-loader

css-loader

less-loader

2.

main.js引入

import  '!style-loader!css-loader!less-loader!./assets/css/reset.less'

3.

App.vue引入:

<script>

//flexible.js(适配移动端)
(function flexible(window,document){
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;

//adjust body font size
function setBodyFontSize(){
if(document.body){
document.body.style.fontSize = (12*dpr)+'px'
}else{
document.addEventListener('DOMContentLoaded',setBodyFontSize)
}
}
setBodyFontSize();

//set 1rem = viewWidth / 10
function setRemUnit (){
var rem = docEl.clientWidth/10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()

//reset rem unit on page resize
window.addEventListener('resize',setRemUnit)
window.addEventListener('pageshow',function(e){
if(e.persisted){
setRemUnit();
}
})

//detect 0.5px supports
if(dpr >=2 ){
var fakeBody = document.createElement('body');
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if(testElement.offsetHeight === 1){
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window,document))

export default {
name: 'App'
}
</script>

4.

vue文件less部分引入

<style scoped lang="less" rel="stylesheet/less">
@import "../assets/css/common.less";

.m-header{
.w(750);
.h(100);
background-color:purple;
.fs(30);
color:red;

}

 </style>

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue.js 知识点总结(入门上手)

文章目录 Vue.js 是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并...

数据库爆破专家
04/17
0
0
vue项目优化-使用cdn瘦身

一般开发vue项目时,都会通过npm install命令下载相应的依赖到本地以供使用,但是会使打包时间长,增加代码体积之外,如果首页加载模块较多,会拉长首页加载时间,但是通过cdn引入vue、vue-r...

Dj0427
2019/03/25
213
0
cordov vue项目中调用手机原生api

cordova不仅可以把vue项目打包成app,还可以让vue借助cordova调用手机原生的api 比如拍照 比如图片上传 比如定位 比如扫描二维码 比如支付等等 Vue Cordova教程-Vue+Cordova打造跨平台可安装...

星辰之力
2019/03/29
0
0
Vue——安装vue-router

vue-router提供了Vue.js的路由控制和管理,也是官方提供的路由控制组件,通过vue-router可以非常方便地进行路由控制。 用Vue.js+vue-router的形式创建单页应用是非常简单的。使用Vue.js,可以...

soul_programmer_swh
03/20
10
0
webpack构建vue单文件组件

1.安装vue-loader和 2.配置webpack.config.js var path = require('path');var webpack = require('webpack');var VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = ......

osc_uonv8t4g
2019/03/27
10
0

没有更多内容

加载失败,请刷新页面

加载更多

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
今天
24
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
今天
29
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
今天
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
63
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部