vue 移动端签字_Vue 移动端

一、vant

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 里面引入。

这时候就可以编写了：

export default {

data(){

return {

checked : true

}

}

}

展示一个按钮：

按钮

vant 案例：

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

npm install --save-dev less less-loader

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

$color: red;

二、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。

这时候就可以编写了：

展示一个按钮：

export default {

data(){

return {

value:true

}

}

}

三、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 的样式不好看)