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;
}
//