vue-cli3.0 + Vant UI搭建移动端基础框架

主要记录Vant的一些配置，关于vue怎么安装、更新、创建项目等问题可以直接看官方文档，而且3.0是有UI控制台的，创建项目都是可视化的，很方便。

安装Vant

Vant – 轻量、可靠的移动端 Vue 组件库

npm i vant -S

主要说下
按需引用、
REM适配、
定制主题，因为官网的描述感觉还是太简单了，对于刚开始用还是需要一点时间的。

按需引用

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

//安装 babel-plugin-import 插件npm i babel-plugin-import -D

然后打开项目，对 babel.config.js 进行修改

module.exports = { plugins: [ [‘import’, { libraryName: ‘vant’, libraryDirectory: ‘es’, style: true //上图中我是配置了定制主题的 }, ‘vant’] ]};

然后就可以在组件中使用了

import { Button, Cell, NavBar } from “vant”;export default { components: { [Button.name]: Button, [Cell.name]: Cell, [NavBar.name]: NavBar }};

Rem 适配

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值

安装插件

//postcss-pxtoremnpm install postcss-pxtorem –save-dev//lib-flexiblenpm i -S amfe-flexible

修改babel.config.js文件

module.exports = { presets: [“@vue/APP”], plugins: [ [ “import”, { libraryName: “vant”, libraryDirectory: “es”, style: name => `${name}/style/less` }, “vant” ] ]};

修改vue.config.js文件，
没有这个文件就新建一个

const autoprefixer = require(“autoprefixer”);const pxtorem = require(“postcss-pxtorem”);module.exports = { // outputDir: “docs”, // publicPath: process.env.NODE_ENV === “production” ? “/vant-demo/” : “/”, css: { loaderOptions: { postcss: { plugins: [ autoprefixer(), pxtorem({ rootValue: 37.5, propList: [“*”] }) ] } } }};

修改main.js文件

import “amfe-flexible”;

查看效果，页面中都变成了rem

定制主题

modifyVars: { red: ‘#03a9f4’, blue: ‘#3eaf7c’, orange: ‘#f08d49’, ‘text-color’: ‘#111’ }

所有可用的颜色变量请参考官方的配置文件 配置文件。

这里我是把modifyVars的值放在了单独的文件中，这里随便你怎么做都可以,下面是我的van-custom-theme.js文件内容，这样方便点，要改什么直接改就好了。

module.exports.theme = { // Color variables “@black”: “#000”, “@white”: “#fff”, “@red”: “#f44”, “@blue”: “#1989fa”, “@orange”: “#ff976a”, “@orange-dark”: “#ed6a0c”, “@orange-light”: “#fffbe8”, “@green”: “#20C3D7”, “@gray”: “#c8c9cc”, “@gray-light”: “#e5e5e5”, “@gray-darker”: “#7d7e80”, “@gray-dark”: “#969799”, // Default colors “@text-color”: “#323233”, “@border-color”: “#ebedf0”, “@active-color”: “#f2f3f5”, “@background-color”: “#f8f8f8”, “@background-color-light”: “#fafafa”, // ActionSheet “@action-sheet-max-height”: “90%”, “@action-sheet-header-height”: “44px”, “@action-sheet-header-font-size”: “16px”, “@action-sheet-item-height”: “50px”, “@action-sheet-item-background”: “@white”, “@action-sheet-item-font-size”: “16px”, “@action-sheet-item-text-color”: “@text-color”, “@action-sheet-subname-color”: “@gray-darker”, “@action-sheet-subname-font-size”: “12px”, “@action-sheet-close-icon-size”: “18px”, “@action-sheet-close-icon-color”: “@gray-dark”, // Badge “@badge-font-size”: “14px”, “@badge-line-height”: “1.4”, “@badge-text-color”: “@gray-darker”, “@badge-padding”: “20px 12px 20px 9px”, “@badge-active-color”: “@active-color”, “@badge-background-color”: “@background-color”, “@badge-selected-font-weight”: “500”, “@badge-selected-text-color”: “@text-color”, “@badge-selected-border-color”: “@red”, “@badge-selected-background-color”: “@white”, // BadgeGroup “@badge-group-width”: “85px”, // Button “@button-mini-height”: “22px”, “@button-mini-min-width”: “50px”, “@button-mini-font-size”: “10px”, “@button-mini-line-height”: “20px”, “@button-small-height”: “30px”, “@button-small-font-size”: “12px”, “@button-small-min-width”: “60px”, “@button-small-line-height”: “28px”, “@button-normal-font-size”: “14px”, “@button-large-height”: “50px”, “@button-large-line-height”: “48px”, “@button-default-height”: “44px”, “@button-default-line-height”: “42px”, “@button-default-font-size”: “16px”, “@button-default-color”: “@text-color”, “@button-default-background-color”: “@white”, “@button-default-border-color”: “@border-color”, “@button-primary-color”: “@white”, “@button-primary-background-color”: “@green”, “@button-primary-border-color”: “@green”, “@button-info-color”: “@white”, “@button-info-background-color”: “@blue”, “@button-info-border-color”: “@blue”, “@button-danger-color”: “@white”, “@button-danger-background-color”: “@red”, “@button-danger-border-color”: “@red”, “@button-warning-color”: “@white”, “@button-warning-background-color”: “@orange”, “@button-warning-border-color”: “@orange”, “@button-bottom-action-default-color”: “@white”, “@button-bottom-action-default-background-color”: “@orange”, “@button-bottom-action-primary-color”: “@white”, “@button-bottom-action-primary-background-color”: “@red”, “@button-border-width”: “1px”, “@button-border-radius”: “2px”, “@button-round-border-radius”: “10em”, “@button-plain-background-color”: “@white”, “@button-disabled-opacity”: “.5”, // Cell “@cell-font-size”: “14px”, “@cell-line-height”: “24px”, “@cell-vertical-padding”: “10px”, “@cell-horizontal-padding”: “15px”, “@cell-text-color”: “@text-color”, “@cell-background-color”: “@white”, “@cell-border-color”: “@border-color”, “@cell-active-color”: “@active-color”, “@cell-required-color”: “@red”, “@cell-label-color”: “@gray-dark”, “@cell-label-font-size”: “12px”, “@cell-label-line-height”: “18px”, “@cell-label-margin-top”: “3px”, “@cell-value-color”: “@gray-dark”, “@cell-icon-size”: “16px”, “@cell-right-icon-color”: “@gray-dark”, “@cell-large-vertical-padding”: “12px”, “@cell-large-title-font-size”: “16px”, “@cell-large-label-font-size”: “14px”, // CellGroup “@cell-group-background-color”: “@white”, “@cell-group-title-color”: “@gray-dark”, “@cell-group-title-padding”: “15px 15px 5px”, “@cell-group-title-font-size”: “14px”, “@cell-group-title-line-height”: “16px”, // Checkbox “@checkbox-size”: “20px”, “@checkbox-border-color”: “@gray-light”, “@checkbox-transition-duration”: “.2s”, “@checkbox-label-margin”: “10px”, “@checkbox-label-color”: “@text-color”, “@checkbox-checked-icon-color”: “@blue”, “@checkbox-disabled-icon-color”: “@gray”, “@checkbox-disabled-label-color”: “@gray”, “@checkbox-disabled-background-color”: “@border-color”, // Collapse “@collapse-item-transition-duration”: “.3s”, “@collapse-item-content-padding”: “15px”, “@collapse-item-content-font-size”: “13px”, “@collapse-item-content-line-height”: “1.5”, “@collapse-item-content-text-color”: “@gray-dark”, “@collapse-item-content-background-color”: “@white”, “@collapse-item-title-disabled-color”: “@gray”, // Dialog “@dialog-width”: “85%”, “@dialog-font-size”: “16px”, “@dialog-transition”: “.3s”, “@dialog-border-radius”: “4px”, “@dialog-background-color”: “@white”, “@dialog-header-font-weight”: “500”, “@dialog-header-padding-top”: “25px”, “@dialog-header-isolated-padding”: “25px 0”, “@dialog-message-padding”: “25px”, “@dialog-message-font-size”: “14px”, “@dialog-message-line-height”: “1.5”, “@dialog-message-max-height”: “60vh”, “@dialog-has-title-message-text-color”: “@gray-darker”, “@dialog-has-title-message-padding-top”: “12px”, “@dialog-confirm-button-text-color”: “@blue”, // Info “@info-size”: “16px”, “@info-color”: “@white”, “@info-padding”: “0 3px”, “@info-font-size”: “12px”, “@info-font-weight”: “500”, “@info-border-width”: “1px”, “@info-background-color”: “@red”, “@info-font-family”: “PingFang SC, Helvetica Neue, Arial, sans-serif”, // List “@list-icon-size”: “16px”, “@list-icon-margin-right”: “5px”, “@list-text-color”: “@gray-dark”, “@list-text-font-size”: “13px”, “@list-text-line-height”: “50px”, // NavBar “@nav-bar-height”: “46px”, “@nav-bar-background-color”: “@white”, “@nav-bar-arrow-size”: “16px”, “@nav-bar-icon-color”: “@blue”, “@nav-bar-text-color”: “@blue”, “@nav-bar-title-font-size”: “16px”, “@nav-bar-title-text-color”: “@text-color”, // Notify “@notify-padding”: “6px 15px”, “@notify-font-size”: “14px”, “@notify-line-height”: “20px”, // NumberKeyboard “@number-keyboard-key-height”: “54px”, “@number-keyboard-key-background”: “#ebedf0”, // Overlay “@overlay-background-color”: “rgba(0, 0, 0, 0.7)”, // Panel “@panel-background-color”: “@white”, “@panel-header-value-color”: “@red”, “@panel-footer-padding”: “10px 15px”, // Radio “@radio-size”: “20px”, “@radio-border-color”: “@gray-light”, “@radio-transition-duration”: “.2s”, “@radio-label-margin”: “10px”, “@radio-label-color”: “@text-color”, “@radio-checked-icon-color”: “@blue”, “@radio-disabled-icon-color”: “@gray”, “@radio-disabled-label-color”: “@gray”, “@radio-disabled-background-color”: “@border-color”, // Rate “@rate-horizontal-padding”: “2px”, // Slider “@slider-active-background-color”: “@blue”, “@slider-inactive-background-color”: “@gray-light”, “@slider-disabled-opacity”: “.3”, “@slider-button-width”: “20px”, “@slider-button-height”: “20px”, “@slider-button-border-radius”: “50%”, “@slider-button-background-color”: “@white”, “@slider-button-box-shadow”: “0 1px 2px rgba(0, 0, 0, .5)”, // Swipe “@swipe-indicator”: “6px”, // Switch “@switch-width”: “2em”, “@switch-height”: “1em”, “@switch-node-size”: “1em”, “@switch-node-z-index”: “1”, “@switch-node-background-color”: “@white”, “@switch-node-box-shadow”: “0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05)”, “@switch-background-color”: “@white”, “@switch-on-background-color”: “@blue”, “@switch-transition-duration”: “.3s”, “@switch-disabled-opacity”: “.4”, “@switch-border”: “1px solid rgba(0, 0, 0, .1)”, // SwitchCell “@switch-cell-padding-top”: “9px”, “@switch-cell-padding-bottom”: “9px”, // Tab “@tabs-line-height”: “44px”, “@tabs-card-height”: “30px”, // Tabbar “@tabbar-height”: “50px”, “@tabbar-background-color”: “@white”, // TabbarItem “@tabbar-item-font-size”: “12px”, “@tabbar-item-text-color”: “@gray-darker”, “@tabbar-item-active-color”: “@blue”, “@tabbar-item-line-height”: “1”, “@tabbar-item-icon-size”: “18px”, “@tabbar-item-margin-bottom”: “5px”, // Tag “@tag-padding”: “.2em .5em”, “@tag-font-size”: “10px”, “@tag-medium-font-size”: “12px”, “@tag-large-font-size”: “14px”, “@tag-text-color”: “@white”, “@tag-border-radius”: “.2em”, “@tag-round-border-radius”: “.8em”, // Toast “@toast-max-width”: “70%”, “@toast-font-size”: “14px”, “@toast-text-color”: “@white”, “@toast-line-height”: “20px”, “@toast-border-radius”: “4px”, “@toast-background-color”: “rgba(@text-color, .88)”, “@toast-icon-size”: “48px”, “@toast-text-min-width”: “96px”, “@toast-text-padding”: “8px 12px”, “@toast-default-padding”: “15px”, “@toast-default-width”: “90px”, “@toast-default-min-height”: “90px”, “@toast-position-top-distance”: “50px”, “@toast-position-bottom-distance”: “50px”, // Search “@search-background-color”: “#f7f8fA”, // Stepper “@stepper-active-color”: “#e8e8e8”, “@stepper-background-color”: “@active-color”, “@stepper-button-disabled-color”: “#f7f8fa”, “@stepper-input-disabled-color”: “@active-color”, “@stepper-border-radius”: “4px”};