☝点击蓝色字体关注，轻松获取最新推送

前言

项目开发中，不是所有的项目都可以让你排期、估时。有些项目可能今天才确认了需求，明天就让你出一版进行测试

怎么办？

我们可以使用UI库帮助我们快速进行项目开发

在这里主要介绍两个UI库，分别适用于移动端和电脑端，这也是我平时项目开发中经常使用的

移动端

移动端开发使用vant

文档地址https://vant-contrib.gitee.io/vant/#/zh-CN/

前面我介绍了vue如何搭建移动端项目，感兴趣的小伙伴可以点击下方链接进行阅读☟

vue手把手教你搭建移动端项目

vant安装

npm i vant -S //安装vantnpm i babel-plugin-import -D //按需引入

修改babel.config.js文件

module.exports = {  presets: ["@vue/cli-plugin-babel/preset"],  // 新增的部分  plugins: [    [      "import",      {        libraryName: "vant",        libraryDirectory: "es",        style: true      },      "vant"    ]  ]};

main.js对所需组件进行全局引入(以Button组件为例)

import {  Button} from "vant";Vue.use(Button);

组件引入

<van-button type="primary">主要按钮van-button>

坑来了！！！

为什么引入的组件样式缩小了

胸有惊雷而面如平湖者,可拜上将军

实际

在我一通面向百度编程操作

发现

原来我之前文章介绍的适配移动端插件，会把第三方库的尺寸单位也转为了rem

找到了问题所在，那就解决

卸载掉postcss-px2rem插件

npm uninstall postcss-px2rem --s

安装postcss-px2rem-exclude，因为可以忽略不需要转成rem的文件

npm install postcss-px2rem-exclude --save

修改postcss.config.js文件

module.exports = {    plugins: {        autoprefixer: {},        "postcss-px2rem-exclude": {            remUnit: 75,            remPrecision: 2,            exclude: /node_modules|folder_name/i        }    }};

电脑端

电脑端开发使用element

文档地址https://element.eleme.cn/#/zh-CN/component/installation

element安装

 npm i element-ui -S

main.js进行组件导入(这里介绍完整引入)

import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

引入button组件查看效果

 <el-button>默认按钮el-button>

点赞 收藏 转发

你们的鼓励是我创作的最大动力