Mvi-web NPM | npm.io

MVI

一个较为凑合的移动端vue框架

mvi是一款专门为了移动端所设计的vue框架，除了包含50+组件以外，还对移动端采用rem单位进行了适配，同时提供了其他额外的东西

1.安装与下载

如果你的项目是vue-cli项目，那么你可以使用npm进行安装

npm install mvi-web

如果你的项目是传统项目，需要先下载mvi，然后你可以通过引入css和js的方法来使用下载地址

<link rel="stylesheet" type="text/css" href="mvi/mvi.css"/>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="mvi/mvi.umd.min.js" type="text/javascript" charset="utf-8"></script>

2.快速上手

vue-cli项目需要在main.js文件中做如下配置：

import "mvi-web/lib/mvi.css" //引入css样式文件
import mvi from "mvi-web" // 引入组件库
Vue.use(mvi) //使用组件库

传统项目直接在页面中使用

3.mvi的移动端适配

针对屏幕的dpr对metaname='viewport'标签进行视图缩放
根据缩放后的屏幕总宽度，设置根节点的字体大小，这里我们的计算公式如下：

  HTML根节点字体大小 = 设备屏幕宽度 / 7.5
  //所以在mvi适配的屏幕下，所以屏幕宽度都为7.5rem

mvi适配下，屏幕的逻辑像素宽度等于设备的物理像素宽度，故而可以实现1px的效果，在此情况下，你设置的1px即是真正的1px

  //例如
  div{
      border:1px solid #ff3300;//1px效果，无需额外设置其他代码
  }

请注意，mvi只针对手机移动端进行适配，本身也是一个移动端的组件库，所以并不适用于大屏幕或者电脑端，包括大点的平板

4.mvi内置提供的工具类$vitl与数据请求对象$viax

mvi中定义了一个$vitl工具类，包含了大量的工具方法，并添加到了window对象中，在使用mvi的时候可以直接通过$vitl调用其内部的方法，具体封装方法有哪些，你可以在控制台打印出$vitl对象来查看。

    //在控制台里打印其内部方法，请注意所有的方法都是原型方法，在prototype内查看
    console.log($vitl);

    //示例
    let pxValue = $vitl.rem2px(10);//将10rem的值转为px为单位的值
    let remValue = $vitl.px2rem(100);//将100px的值转为rem为单位的值

mvi中提供了一个较为简单的异步数据请求方法，通过对XmlHttpRequest对象的封装，供开发者使用（$viax的请求方法返回Promise对象，所以是通过then/catch方法进行回调的）

5.辅助类Support

mvi内定义了一套以供开发者使用、方便开发的CSS样式辅助类

.mvi-scrolling-touch：Y轴滚动回弹效果

//文本样式
.mvi-text-error：错误文本样式
.mvi-text-warn：警告文本样式
.mvi-text-info：信息文本样式
.mvi-text-success：成功样式文本
.mvi-text-primary：主要样式文本
.mvi-text-link：链接样式文本
.mvi-text-muted：柔和灰色样式文本

//背景样式
.mvi-bg-success：成功样式背景色
.mvi-bg-warn：警告样式背景色
.mvi-bg-info：信息样式背景色
.mvi-bg-primary：首要样式背景色
.mvi-bg-error：错误样式背景色
.mvi-bg-muted：柔和灰色背景色

//文本对齐方式
.mvi-text-right：右对齐
.mvi-text-left：左对齐
.mvi-text-center：居中对齐
.mvi-text-justify：两端对齐

.mvi-flex-center：块元素水平垂直居中
.mvi-inline-center：行内元素水平垂直居中

//圆角
.mvi-radius-default：默认小圆角
.mvi-radius-round：大圆角
.mvi-radius-circle：圆形

//文本粗细
.mvi-text-bold：加粗
.mvi-text-normal：默认粗细
.mvi-text-light：变细

6.组件Components

mvi提供了50+组件，以及小部分的自定义指令，可以直接使用，组件的标签前缀均为'mvi-'

//示例
<mvi-button form-control radius="round" type="default">按钮</mvi-button>

具体关于组件、$viax和$vitl的使用请查看 mvi文档

如果你觉得mvi还凑合的话，麻烦点个star，作者在这里万分感谢~ 如果发现有任何问题，请联系作者QQ：1012208985，备注言明来意，作者定当虚心接受意见，及时改进。作者想写一个自己的网站，用来作为mvi的文档官网，但是觉得又太麻烦了，暂且置后吧，日后再想。

dap-util

@everything-registry/sub-chunk-2221 @infinitebrahmanuniverse/nolb-mv

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago