Ant-desigin-vue框架学习。
程序员文章站
2022-06-07 12:12:10
...
1.安装教程: npm install ant-desigin-vue --save
2.运用vue-cli3.0版本搭建脚手架
3.样式布局layout插件布局快速实现整体布局
4.lib-flexible实现屏幕适配 安装:npm install lib-flexible --save
5.引入 import ‘lib-flexible’ (可以在全局引入main.js)全局使用适配
需注意项:
1.lib-flexible生效适配,需要把public下的index.html第一行的:
注释掉
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.node-modules目录下 lib-flexible.js
function refreshRem(){
var width=docel.getBoundingClientRect().width();
if(width /dpr >540){
width=540*dpr;//此处的540修改 可以根据项目的设计参数进行修改,也可以改为width
}
var rem=width/10;
docEl.style.fontSize=rem+'px'
flexible.rem=win.rem=rem;
}
dpr是屏幕倍数,默认是1,所以如果不修改540 ,那么当你的屏幕大于540的时候,
计算参数就一直都是参照540的宽度计算 得出的rem数值存在错误。
安装postcss-px2rem-exclude自动将css中的px转换为rem
cnpm install postcss-px2rem-exclude --save
配置项postcss.config.js
module.exports={
plugins:{
autoprefixer:{},
"postcss-px2rem-exclude":{
remUnit:75,
exclude:/node_modules|folder_name/i
}
}
}
注意:remUnit这个参数可以修改,如果项目ui设计稿是1920,那么久需要修改192,应当除以10,remUnit是设计稿尺寸/10的计算结果
component:() =>import('引入'):如果是父组件的子项,
路径就是children :[
component:()=>import(/* webpackChunkName: "Home" */ '引入')
]
运行代码命令npm run serve
官网学习链接:https://antdv.com/components/
继续努力!!!