vue 插件配置

配置环境 ： vue-cl4

01style-resources-loader

全局调用less

vue add style-resources-loader

在项目根目录下的vue.config.js(没有需要新建)

const path = require('path');
 
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/styles/style.less'),
      ],
    },
  },
};

02配置自动rem换算 postcss-pxtorem和lib-flexibl

npm install postcss-pxtorem --save-dev
npm i -s  amfe-flexible

main.js文件引入： import 'amfe-flexible'

在根目录，和package.json同级，创建一个名为postcss.config.js的文件

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

03 初始化 less

@charset "utf-8";
/***********************************************************************
******************** 浏览器 初始化                    *******************
******************** 移动端                           *******************
************************************************************************
/

 /* 禁止选中文本（如无文本选中需求，此为必选项） */
// html, body {-webkit-user-select: none;user-select: none;}

/* 禁止长按链接与图片弹出菜单 */
// a, img {-webkit-touch-callout: none;}

/*连续英文，数字换行*/
.wordwrap{word-break: break-all;word-wrap: break-word;}
 
 /* 禁用iPhone中Safari的字号自动调整 */
 html {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     /* 解决IOS默认滑动很卡的情况 */
     -webkit-overflow-scrolling : touch;
 }
  
 /* 禁止缩放表单 */
 input[type="submit"], input[type="reset"], input[type="button"], input {
     resize: none;
     border: none;
 }
  
/* ios默认盒子模型为content-box；而安卓和谷歌是border-box。 */  
input{
    box-sizing:border-box;
}
 /* 取消链接高亮  */
 body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
  
 /* 设置HTML5元素为块 */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
 }
  
 /* 图片自适应 */
//  img {
//      width: 100%;
//      height: auto;
//      width: auto\9; /* ie8 */
//      display: block;
//      -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
//  }

 
/*单行溢出*/
.one-txt-cut{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,a:active,a:visited,a:hover {
    background: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

// 清除浮动
.clearfix {
    *zoom: 1;
    /*ie*/
    &::after,
    &::before {
        content: '';
        display: table;
    }
    &::after {
        clear: both;
    }
}
  

/***********************************************************************
******************** 样式 初始化                      *******************
******************** 移动端                           *******************
************************************************************************
*/

 body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     margin: 0;
     padding: 0;
 }
// 默认样式
a{
    text-decoration: none;
}
li{
    list-style: none;
}
// 浮动类 
.fl{
    float: left;
}
.fr{
    float: right;
}
// 双边距类 
.margin18{
    margin: 0 18px;
}
.margin29{
    margin: 0 29px;
}
.padding50{
    padding: 0 50px;
}
.margin50{
    margin: 0 50px;
}
.margin15{
    margin: 15px;
}
.margin25{
    margin: 15px;
}

// UI颜色类 
// @red:;
@pink:#e5004f;
@pinkwe:#ff4460;
@white:#ffffff;
@gray:#eee;
@gray-bar:#b3b3b3;
// 阴影类
.boxpink{
box-shadow: 1px 3px 9px @pink;
}
.box-gray{
    box-shadow: 1px 3px 9px @gray;
}
.box-aw{
    box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 20px 5px
}
.tex{
box-shadow: 1px 3px 9px @pink; 
}
// 圆角类 
.border-r5{
    border-radius:5px;
}
.border-r15{
    border-radius:15px;
}
.border-r30{
    border-radius:30px;
}
.border-r50{
    border-radius:50px;
}
//