vue + mint ui 开发webapp项目

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>