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

Flink_China 发布于2019-08-26 12:13 / 3447人阅读

摘要：使用脚手架生成项目骨架，略。相关配置适配加入以下代码，并在中加入以下按照的官网对按需引用进行配置，文件安装相关的包相关配置安装进入文件在页面中按需引入即可

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!!!

GPU云服务器云服务器移动端适配移动端适配方案移动端适配 js 移动适配

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108273.html

Vue.js 移动端适配之 vw 解决方案

摘要：安装并配置插件还需要安装对进行配置找到在根目录中的，对插件进行配置视窗的宽度，对应的是我们设计稿的宽度，一般是视窗的高度，根据设备的宽度来指定，一般指定，也可以不配置指定转换为视窗单位 1. 安装并配置PostCss插件 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cs...

golden_hamster 2019-08-29 16:36 评论0 收藏0
Vue+mint-ui+flexible仿移动端App(网易云课堂)

摘要：仿网易云课堂在线预览手机浏览或切换谷歌浏览器移动调试预览描述前端部分快速构建前端界面轮播图，滑块管理现非父子组件之间的通信移动设备兼容使用实现预编译实现所有小图标的加载，减少请求路由懒加载结合异步组件和的做请求存储用 Vue-wyclass 仿网易云课堂App 在线预览：手机浏览或切换谷歌浏览器移动调试 Gif预览 showImg(https://segmentfault.com/i...

iOS122 2019-08-22 15:12 评论0 收藏0
基于Vue2全家桶的移动端AppDEMO实现

好久没更新过Vue的小文章，上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能，然后通过cordova打包生成apk，移动端表现还不错，今天把这个小东西分享出来，希望有更多的小伙伴能够用Vue去做一些有意思的东西，本人才疏学浅，有说的不对的地方，还请大家多多指教。下面按照惯例放上demo地址和源码地址,希望大家能给我点下star：Demo(进去需要先注册才能登录,用的lo...

Jiavan 2019-08-20 13:58 评论0 收藏0
记 vue 移动端开发中的经验(2)

摘要：官网还不断的访问不了。在此推荐一个移动端库按需引入二次封装组件列表的下拉刷新和上拉加载更多是移动端必须的组件。不用写死高度了，并且兼容对外提供了更加简明易用的刷新，回到顶部，获得和设置滚动条位置的方法统一的提示，免去重复代码。按需引入mint-ui 本项目用了 mint-ui 作为基础ui框架，在使用中遇到不少问题。官网doc 还不断的访问不了。不过还是很感谢 mint-ui 团队。...

Flands 2019-08-23 15:42 评论0 收藏0
基于vue-cli3.0构建功能完善的移动端架子

摘要：对应每一个环境可能都会有所差异，比如说服务器地址接口地址地址等等。具体的值取决于应用运行的模式。会和中的选项相符，即你的应用会部署到的基础路径。基于vue-cli3.0构建功能完善的移动端架子，主要功能包括 webpack 打包扩展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域设置 eslint设置...

Loong_T 2019-08-23 17:05 评论0 收藏0