详解vue移动端项目的适配(以mint-ui为例)

这篇文章主要介绍了详解vue移动端项目的适配(以mint-ui为例),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、使用vue-cli脚手架生成项目骨架,略。

2、相关配置:

rem适配:

index.html加入以下代码,并在head中加入以下meta;

 

复制代码 代码如下:

3、按照mint-ui的官网对按需引用进行配置,.babelrc文件(安装相关的包)

 { "presets": [ ["env", { "modules": false }] ], "plugins": ["transform-vue-jsx", "transform-runtime",["component", [ { "libraryName": "mint-ui", "style": true } ]]] }

4、相关loader配置

安装npm i postcss-px2rem-exclude --save-dev

进入build/vue-loader.conf.js文件

5、在页面中按需引入即可


6、That's all!!!

以上就是详解vue移动端项目的适配(以mint-ui为例)的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程