mint ui 特性介绍

  • Mint UI 包括丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
  • 真正意义上的按需加载组件,可以只加载声明过的组件及其样式文件,无需在纠结文件体积过大。
  • 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
  • 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb(JS + CSS)gzip。

一,初始化 vue 项目

1,确保你安装了 node
2,安装 vue-cli 脚手架

  • npm install -g vue-cli

3,创建 vue 项目

  • vue init webpack 项目名称

4,安装依赖

  • 进入项目目录:cd 项目名称
  • 安装依赖:npm install
  • 运行项目:npm run dev

引入 mint ui

1,安装 mint ui

// 安装
// Vue 1.X
npm install mint-ui@1 -S

// vue 2.0
npm install mint-ui -S

2,引入组件

// 引入全部组件
import Vue from 'vue'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(mint)

// 按需引入部分组件
import { cell, checklist } from 'mint-ui';
Vue.component(cell.name, cell)
Vue.component(checklist.name, checklist)

安装第三方依赖

1,sass

  • npm install sass-loader node-sass –save-dev
  • .vue 文件的 style 标签修改为:
<style scoped lang='scss'></style>
Logo

前往低代码交流专区

更多推荐