vue3.0 vue.config.js基础配置
const path = require('path');
const resolve = dir => {
return path.join(__dirname, dir)
}
module.exports = {
// 如果你不需要使用eslint，把lintOnSave设为false即可
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('styles', resolve('src/styles'))
.set('_c', resolve('src/components'))
.set('_v', resolve('src/views'))
},
// 打包时不生成.map文件
productionSourceMap: false
// 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
// devServer: {
// proxy: 'localhost:3000'
// }
}
移动端的自适应2vw的配置
重点：要把core-js 升级到 @3：npm i core-js@3 -S
插件的安装
npm i cssnano postcss-aspect-ratio-mini postcss-preset-env postcss-px-to-viewport postcss-viewport-units postcss-write-svg -S
npm i cssnano-preset-advanced -D
npm i postcss-import postcss-url autoprefixer -D
postcss.config.js里面的配置
//https://github.com/michael-ciniawsky/postcss-load-config
// module.exports = {
// plugins: {
// autoprefixer: {}
// }
// }
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false, // 允许在媒体查询中转换`px`
exclude: /(\/|\\)(node_modules)(\/|\\)/ //在node_modules文件里面的样式不转成vw
},
"postcss-viewport-units":{},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
},
}
}
移动端css初始化样式
/* 移动端要加上<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,er-scalable=no"> */
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}
* {box-sizing: border-box;}
css基础样式
// Variables
// --------------------------------------------------
@font-size-small : 12px;
@font-size-base : 14px;
@font-size-big : 18px;
@font-size-title : 16px;
@font-size-large : 30px;
// Color
@main-color : #1890FF ;
@auxiliary-color : #243857;
@info-color : #44B9C2;
@success-color : #50D6DF;
@warning-color : #ECA828;
@error-color : #EE0F25;
@disable-color : #E6E6E6;
@text-strong-color : #000000; // 一级标题
@text-primary-color : #333333; // 主要文字
@text-regular-color : #666666; // 常规文字
@text-secondary-color : #999999 ; // 次要文字
@text-light-color : #cccccc ; // 次要文字
@title-color : #485465;
@text-color : @text-regular-color;
@checkbox-color : #30313E;
@online-color : #BF8CF1;
@base-color : #94A4CB;
@shadow-color : rgba(0, 0, 0, 0.10);
@border-color : fade(@disable-color, 60%); // 设置颜色透明度
@link-color : #2D8cF0;
@white-color : #FFFFFF;
// Background color
@background-color-base : #FAFAFA;
@background-color-active: #F3F3F3;
@background-color-body : #F0F2F5;
@background-color-hover : @main-color;
@background-color : #FEFEFF;
@background-error : #FF5263 ;
@background-color-white : #FFFFFF;
@background-color-secondary : fade(@main-color, 10%); // 辅助背景颜色
@background-color-regular: #FFFFFF;
// Shadow
@shadow-common : 0 0 4px 0 @shadow-color;
@shadow-base : @shadow-down;
@shadow-card : 0 0 5px 1px @border-color;
@shadow-up : 0 -1px 6px @border-color;
@shadow-down : 0 1px 6px @border-color;
@shadow-left : -1px 0 6px @border-color;
@shadow-right : 1px 0 6px @border-color;
// border
@border-radius : 3px;
工具方法
/* 占位符 */
.zw10{height: .10px;}
.zw20{height: .20px;}
/*字体颜色*/
.font-white {color: white !important;}
.font-blue {color: @info-color !important;}
.font-black {color: @text-strong-color !important;}
.font-grey {color: @text-regular-color !important;}
.font-light-grey {color: @text-secondary-color !important;}
.font-light {color: @text-light-color !important;}
.font-base {color: @text-primary-color !important;}
.font-success {color: @success-color !important;}
.font-warning {color: @warning-color !important;}
.font-error {color: @error-color !important;}
.font-online {color: @online-color !important;}
.font-hover {color: @main-color !important;}
.font-disable {color: @disable-color;}
.font-purple {color: @main-color;}
/*背景颜色*/
.bg-white {background-color: white !important;}
.bg-grey {background-color: @text-regular-color !important;}
.bg-green {background-color: #99CC33;}
.bg-orange {background-color: #fd7c56;}
.bg-online {background-color: @online-color;}
.bg-light-purple {background-color: #EFF1F9;}
.bg-f8 {background-color: #f8f8f8;}
.bg-e {background-color: #eee;}
/*鼠标颜色*/
.cursor-pointer {cursor: pointer;}
.cursor-normal {cursor: default}
/*边框*/
.bor1 {border: .6px solid #eee !important;}
.bor0 {border: 0 !important;}
.nobor:after {width: 0 !important; height: 0 !important;}
.bl0 {border-left:0 !important;}
.bl1 {border-left:1px solid @border-color;;}
.br0 {border-right:0 !important;}
.br1 {border-right:1px solid @border-color;;}
.bt0 {border-top:0 !important;}
.bt1 {border-top:1px solid @border-color;;}
.bb0 {border-bottom:0 !important;}
.bb1 {border-bottom:1px solid @border-color;;}
.bordered {border: 1px solid @border-color;}
.bordered-top {border-top: 1px solid @border-color;}
.bordered-bottom {border-bottom: 1px solid @border-color;}
.last-no-border >div:last-of-type {border: 0};
.bradius4 {border-radius: 4px;}
.bradius50 {border-radius: 50px;}
.b-color {border-color: #ddd;}
/*****文字排版******/
.f10 {font-size: 10px;}
.f11 {font-size: 11px;}
.f12 {font-size: 12px;}
.f13 {font-size: 13px;}
.f14 {font-size: 14px !important;}
.f15 {font-size: 15px;}
.f16 {font-size: 16px;}
.f18 {font-size: 18px;}
.f20 {font-size: 20px !important;}
.f24 {font-size: 24px !important;}
.fb {font-weight: bold;}
.fn {font-weight: normal;}
.t2 {text-indent: 2em;}
.lh150 {line-height: 150%}
.lh180 {line-height: 180%}
.lh200 {line-height: 200%}
.unl {text-decoration: underline;}
.lth {text-decoration: line-through;}
.no_unl {text-decoration: none;}
.no_unl:hover {text-decoration: none;}
.wb {word-break:break-all;}
.ws {white-space:nowrap;}
/****定位****/
.tl {text-align: left;}
.tc {text-align: center;}
.tr {text-align: right;}
.bc {margin-left: auto; margin-right: auto;}
.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}
.cl {clear: left;}
.cr {clear: right;}
.clearfix:before {content:''; display:table;}
.clearfix:after {content:''; display:block; height:0; clear:both; visibility:hidden}
.pr {position: relative;}
.pa {position: absolute;}
.pf {position: fixed;}
.abs-right {position: absolute; right: 0;}
.zoom {zoom: 1;}
.hidden {visibility: hidden;}
.overflow-hidden {overflow: hidden;}
.overflow-y {overflow-y: auto;}
.overflow-x {overflow-x: auto;}
.touch {-webkit-overflow-scrolling: touch;}
.none {display: none;}
.flex {display: flex;}
.flex1 {flex: 1;}
.flex-align {align-items: center;}
.flex-justify {justify-content: center;}
.flex-justify-between {justify-content: space-between;}
.flex-column {display: flex;height:100%;flex-direction: column;overflow: hidden;}
/******长度 高度*******/
.w10 {width: 10px;}
.w20 {width: 20px;}
.w30 {width: 30px;}
.w40 {width: 40px;}
.w50 {width: 50px !important;}
.w60 {width: 60px !important;}
.w70 {width: 70px;}
.w80 {width: 80px !important;}
.w90 {width: 90px;}
.w95 {width: 95px !important;}
.w100 {width: 100px !important;}
.w150 {width: 150px !important;}
.w200 {width: 200px !important;}
.w300 {width: 300px !important;}
.w400 {width: 400px !important;}
.w500 {width: 500px;}
.w600 {width: 600px;}
.w700 {width: 700px;}
.w800 {width: 800px;}
.w {width: 100%;}
.w_5 {width: 5%;}
.w_20 {width: 20%;}
.w_25 {width: 25%}
.w_75 {width: 75%;}
.h50 {height: 50px;}
.h80 {height: 80px;}
.h100 {height: 100px;}
.h200 {height: 200px;}
.h400 {height: 400px;}
.h {height: 100%}
/******限制行数*******/
.rows-1 {overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.rows-2 {overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; line-height: normal; line-height: normal; max-height: 3em; position: relative;}
// .rows-2::after {content: '...'; position: absolute; right: 0; bottom: 0}
/******边距*******/
.m10 {margin: 10px;}
.m15 {margin: 15px;}
.m30 {margin: 30px;}
.mt0 {margin-top: 0;}
.mt5 {margin-top: 5px;}
.mt8 {margin-top: 8px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt50 {margin-top: 50px;}
.mt100 {margin-top: 100px;}
.mt150 {margin-top: 150px;}
.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb100 {margin-bottom: 100px !important;}
.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml25 {margin-left: 25px;}
.ml30 {margin-left: 30px;}
.ml50 {margin-left: 50px;}
.ml85 {margin-left: 85px;}
.ml100 {margin-left: 100px !important;}
.mr0 {margin-right: 0 !important;}
.mr5 {margin-right: 5px!important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr50 {margin-right: 50px;}
.mr100 {margin-right: 100px;}
.m0 {margin: 0!important;}
.p0 {padding: 0!important;}
.pl0 {padding-left: 0;}
.pr0 {padding-right: 0}
.p5 {padding: 5px;}
.p8 {padding: 8px;}
.p10 {padding: 10px;}
.p15 {padding: 15px;}
.p30 {padding: 30px;}
.pt0 {padding-top: 0px;}
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt50 {padding-top: 50px;}
.pt100 {padding-top: 100px;}
.pb0 {padding-bottom: 0 !important;}
.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb50 {padding-bottom: 50px;}
.pb100 {padding-bottom: 100px;}
.pb120 {padding-bottom: 120px;}
.pl5 {padding-left: 5px !important;}
.pl10 {padding-left: 10px;}
.pl15 {padding-left: 15px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}
.pl50 {padding-left: 50px;}
.pl85 {padding-left: 85px;}
.pl100 {padding-left: 100px !important;}
.pr5 {padding-right: 5px !important;}
.pr10 {padding-right: 10px;}
.pr15 {padding-right: 15px;}
.pr20 {padding-right: 20px;}
.pr30 {padding-right: 30px;}
.pr50 {padding-right: 50px;}
.pr100 {padding-right: 100px !important;}
.plr15 {padding: 0 15px}
.ptb10 {padding: 10px 0}
/*文本垂直对齐*/
.vt {vertical-align: top;}
.vm {vertical-align: middle;}
.vb {vertical-align: bottom;}
/*没有padding*/
.npl {padding-left: 0 !important;}
.npr {padding-right: 0;}
.npt {padding-top: 0}
.npb {padding-bottom: 0;}
.font-two { text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}
.font-one { white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}
pc端css样式初始化
/* normalize.css */
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
article,
aside,
footer,
header,
nav,
section {
display: block;
}
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
b,
strong {
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
audio,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
img {
border-style: none;
display: block;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
button,
input {
/* 1 */
overflow: visible;
}
button,
select {
/* 1 */
text-transform: none;
}
button,
html [type="button"],
/* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
canvas {
display: inline-block;
}
[hidden] {
display: none;
}
/* reset */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
