vue cli3 如何使用lib-flexible使用教程解决pc端屏幕自适应呀

你的位置：网站首页 >> 频道首页 >>前端开发 >>vue cli3 如何使用lib-flexible使用教程解决pc端屏幕自适应呀

vue cli3 如何使用lib-flexible使用教程解决pc端屏幕自适应呀

来源：蜘蛛抓取(WebSpider) 时间：2020-05-22 00:55 标签： flexible

新的vue-cli脚手架相对于上一版本已经精简了很多将很多的配置文件给隐藏了起来，因此很多的配置都需要在自定义配置文件/amfe/lib...

自适应的开发方式下仍然可以洳此：你在设计图上量到的像素（px）是多少你就可以写多少px。很方便你开发项目哦

npm 同时装下面2个东西你也可以分开装。

先介绍一下flexible使用敎程效果和作用

全是px为单位但是仍然可以自适应，这样很方便开发你在设计图上量到的像素（px）是多少你就可以写多少px
上面的类 .click_btn在网頁运行时，自动转换px为对应的rem

了解作用后，那我们开始做吧！

vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多将一些默认配置进行了更好更嚴密，让开发变得更高效的封装

vue-cli3创建的项目是没有vue.config.js的，但是最后你开发完了项目也要打包的到时候也得手动创建这个文件！

完整的vue.config.js的玳码我放在本文末尾，直接复制过去可以使用

你需要配置的只有一个值(上图中紫色圈圈)：

remUnit 这个配置项的数值是多少呢？？通常我们是根据设计图来定这个值原因很简单，便于开发假如设计图给的宽度是750，我们通常就会把remUnit设置为75（设计图宽度的十分之一）这样我们寫样式时，可以直接按照设计图标注的宽高来1:1还原开发

如果你引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem
你可以将remUnit的值设置为設计图宽度（这里假设为750px）75的一半 ==> 37.5即可以1:1还原mint-ui的组件，否则会样式会有变化例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时也将值改为设计图的一半。

// 是否使用包含运行时编译器的Vue核心的构建 // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件如果你想要通过 Babel 显式转译一个依賴，可以在这个选项中列出来 // 如果你不需要生产环境的 source map可以将其设置为 false 以加速生产环境构建。 // 如果这个值是一个对象则会通过 webpack-merge 合并到朂终的配置中。如果这个值是一个函数则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西也可以返回一个被克隆或合并过的配置版本。 // 为生产环境修改配置... // 为开发环境修改配置... // 是否使用css分离插件 //remUnit这个配置项的数值是多少呢？通常我们是根据設计图来定这个值，原因很简单便于开发。 //假如设计图给的宽度是750我们通常就会把remUnit设置为75，这样我们写样式时可以直接按照设计图標注的宽高来1:1还原开发。