1..安装sass 和 node-sass
$ npm install sass-loader node-sass webpack --save-dev
$ npm install style-loader css-loader --save-dev
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader",// 将 JS 字符串生成为 style 节点
"css-loader",// 将 CSS 转化成 CommonJS 模块
"sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
]
}]
}
3.安装 stylus
"stylus-loader": "^3.0.1",
"stylus": "0.52.4",
$ npm install stylus -g
$ npm install stylus stylus-loader --save-dev
vue add style-resources-loader
module: {
rules: [
{
test: /\.css$/,
use: [
‘style-loader‘,
‘css-loader‘
]
},
{
test: /\.styl/,
‘css-loader‘,
‘stylus-loader‘
]
}
]
}
2.修改webpack.base.conf.js alias:
alias: {
‘@‘: resolve(‘src‘),
‘src‘: resolve(‘src‘),
‘common‘: resolve(‘src/common‘),
}
3.移动端加meta标签
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0,user-scalable=no">
4.安装fastclick 解决移动端300ms延迟问题
$ npm install --save fastclick
在main.js中：
import fastclick from ‘fastclick‘
fastclick.attach(document.body)
5 Vue --- 安装并使用vue-awesome-swiper轮播插件
$ npm install vue-awesome-swiper --save
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
import ‘swiper/dist/css/swiper.css‘
Vue.use(VueAwesomeSwiper)
<template>
<div class="wapper">
<h3>swiper轮播</h3>
<swiper :options="swiperOption">
<swiper-slide class="swiperbox swiperone">I‘m Slide 1</swiper-slide>
<swiper-slide class="swiperbox swipertwo">I‘m Slide 2</swiper-slide>
<swiper-slide class="swiperbox swiperthree">I‘m Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default({
name:"swipertest",
data(){
return{
swiperOption:{
pagination:".swiper-pagination",//轮播圆点显示
loop:true,//支持循环轮播
}
}
}
})
</script>
<style scoped>
/*>>>穿透，改变轮播圆点样式，不受scoped限制*/
.wapper >>> .swiper-pagination-bullet-active{
background: #fff;
}
.swiperbox{
width:100%;
height: 100px;
}
.swiperone{
background: #f90;
}
.swipertwo{
background: #f00;
}
.swiperthree{
background: #5d5d5d;
}
</style>
==============resetcss=================
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,figure,
footer,menu,section{
display: block;
}
ol,li{
list-style: none;
}
blockquote,q{
quotes: none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content: ‘‘;
content: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a{
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece{
background-color: rgba(0,0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
height: 5px;
background-color: rgba(125,125,0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
width: 5px;
background-color: rgba(125,0.7);
-webkit-border-radius: 6px;
}
html,body{
width: 100%;
font-family: "Arial","Microsoft YaHei","黑体","宋体","微软雅黑",sans-serif;
}
body{
line-height: 1;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0);
}
html{
overflow-y: scroll;
}
/*清除浮动*/
.clearfix:before,
.clearfix:after{
content: " ";
display: inline-block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
.fl{
float:left;
}
.fr{
float:right;
}
/*隐藏*/
.dn{
display: none;
}
————————————————
border.css文件
=============border.css==============
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
content: "\0020";
overflow: hidden;
position: absolute;
}
/* border
* 因，边框是由伪元素区域遮盖在父级
* 故，子级若有交互，需要对子级设置
* 定位 及 z轴
*/
.border::before {
box-sizing: border-box;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-bottomleft::before {
left: 0;
width: 100%;
height: 1px;
}
.border-right::before,
.border-bottomleft::after {
top: 0;
width: 1px;
height: 100%;
}
.border-top::before,
.border-topright::before {
border-top: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-right::before,
.border-topright::after {
border-right: 1px solid #eaeaea;
transform-origin: 100% 0;
}
.border-bottom::before,
.border-bottomleft::before {
border-bottom: 1px solid #eaeaea;
transform-origin: 0 100%;
}
.border-left::before,
.border-bottomleft::after {
border-left: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-topright::before {
top: 0;
}
.border-right::before,
.border-topright::after {
right: 0;
}
.border-bottom::before,
.border-bottomleft::after {
bottom: 0;
}
.border-left::before,
.border-bottomleft::before {
left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49),(-webkit-max-device-pixel-ratio: 1.49),(max-device-pixel-ratio: 1.49),(max-resolution: 143dpi),(max-resolution: 1.49dppx) {
/* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
.border::before {
width: 200%;
height: 200%;
transform: scale(.5);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.5);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.5);
}
}
@media (min--moz-device-pixel-ratio: 2.5),(-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5),(min-resolution: 240dpi),(min-resolution: 2.5dppx) {
.border::before {
width: 300%;
height: 300%;
transform: scale(.33333);
}
.border-top::before,
.border-bottomleft::before {
transform: scaleY(.33333);
}
.border-right::before,
.border-bottomleft::after {
transform: scaleX(.33333);
}
}
===========================
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。