vue - mintui + elementUI vux（三）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

参考文献：
—— VUE 导航网站 全
—— VUE 2.0各大前端移动端ui框架组件展示
mintui 安装插件
mintUI 导航效果
阿里icon图片使用方法

1、Mint UI - 基于 Vue.js 的移动端组件库，可以按需加载组件，Mint UI 采用css3处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。依托Vue.js高效的组件化方案，Mint UI做到了轻量化。—— 安装链接

mint 对于改变组件中的样式很友好，在class前加 /deep/ 即可改变类的样式；

2、 iView UI组件库iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

3、vux 是基于Weui 和 Vue（2.x）开发的移动端UI组件，主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。—— 安装链接

4、 Muse UI 基于 Vue2.0 开发，Vue2.0是当下最快的前端框架之一，小巧，api友好，可用于开发的复杂单页应用。

Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库：

1、安装 Mint UI：
1.0、全局安装： npm i mint-ui --save这种方式是全部引入，比较方便操作，但同时占的内存也就变大了
2.0、main.js 进行配置：

配置：

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

2、按需安装mint UI
1.0、安装插件 npm i babel-plugin-component css-loader style-loader less-loader less -D————
2.0、main.js 进行样式的引入配置等
3.0、最后在 .babelrc 文件中配置它

main.js 中 组件按需 配置：

 import { Tabbar, TabItem, TabContainer } from 'mint-ui';
 Vue.component(Tabbar.name, Tabbar);
 Vue.component(TabItem.name, TabItem);
 window.TabContainer= TabContainer; //全局的

.babelrc 文件配置（更改plugins这段）：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",["component",[
          {"libraryName":"mint-ui","style":true}
      ]]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

1、安装CSS解释器： npm i css-loader style-loader -D

2、然后在build文件夹下面的webpack.base.conf.js文件里面配置如下代码：

{
        test: /\.css$/,
        include: [
          /src/,
          '/node_modules/mint-ui/lib/'   
        ],
        use:[
          {loader:"style-loader"},
          {loader:"css-loader"},
        ]
}

1、阿里icon图片使用方法：


阿里 icon 教程地址

在vue模板中 全局引入

<template>
  <div id="app">
    <i class="iconfont">&#xe649;</i>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
};
</script>
<!-- 全局引入 也可以在main.js入口文件中引入更方便 -->
<style src="./assets/index.less">

以上是 vue - mintui + elementUI vux（三） 的全部内容， 来源链接： utcz.com/z/377699.html

回到顶部