100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Ant-design-vue框架学习。

Ant-design-vue框架学习。

时间:2020-12-23 12:18:31

相关推荐

Ant-design-vue框架学习。

1.安装教程: npm install ant-design-vue --save

2.运用vue-cli3.0版本搭建脚手架

3.样式布局layout插件布局快速实现整体布局

4.lib-flexible实现屏幕适配 安装:npm install lib-flexible --save

5.引入 import ‘lib-flexible’ (可以在全局引入main.js)全局使用适配

样式:下载

npm install sass-loader node-sass webpack --save-dev

需注意项:

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

删除安装依赖包的方法

例如:npm uninstall webpack等.....npm uninstall 删除的依赖项name

遇到问题点?

无法import VueRouter from ‘vue-router’会报错.

解决方法:

在项目目录下查看package.json,发现没有vue-router这个依赖

cnpm install -g vue-router或者npm i vue-router

官网学习链接:/components/table-cn/v

继续努力!!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。