Vue 移动端

一、vant

有赞前端团队出品：https://youzan.github.io/vant/#/zh-CN/intro

vant

vant 应该是 vantage （优势的简写）

快速上手：
Vue 官方提供的脚手架 Vue Cli 3 创建项目

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 安装vant
npm install --save-dev vant

直接 导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

为了提神开发速度这里我们需要找到 import 'vant/lib/index.css'; css 的路径提取出来，放到 index.html 里面引入。

<link rel="stylesheet" href="<%= BASE_URL %>index.css">

这时候就可以编写了：

<template>
    <div>
        <van-switch v-model="checked" />
    </div>
</template>

<script>

export default {
    data(){
        return {
            checked : true
        }
    }
}
</script>

<style>
</style>

展示一个按钮：

按钮

vant 案例：
案例用到 less ，因为没有装 less 预处理器，所以你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

npm install --save-dev less less-loader

然后就可以导入相应的文件类型，或在 *.vue 文件中这样来使用：

<style lang="scss">
$color: red;
</style>

接下来复制 https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue 案例代码到组件即可：

二、Mint-Ui

Mint-Ui

饿了么出品的。
快速上手：

# 安装
npm install --save-dev mint-ui

直接 导入所有组件

import Vue from 'vue'
import App from './App.vue'
import MintUI from 'mint-ui'

Vue.use(MintUI);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

为了提神开发速度这里在 index.html 里面引入 css。

<link rel="stylesheet" href="<%= BASE_URL %>style.min.css">

这时候就可以编写了：

<link rel="stylesheet" href="<%= BASE_URL %>style.min.css">

展示一个按钮：

<template>
    <div>
        <mt-switch v-model="value"></mt-switch>
    </div>
</template>

<script>
export default {
    data(){
        return {
            value:true
        }
    }
}
</script>

<style lang="scss" scoped>

</style>

三、VUX（个人）

VUX

VUX（读音 [v’ju:z]，同 views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

基于webpack + vue-loader + vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。

四、cube UI

cube UI

（虽然官网的样式不错，但 UI 的样式不好看）