vant部署_vant-ui开发环境搭建

脚手架

推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目

# 安装 Vue Cli

npm install -g @vue/cli

# 创建一个项目 我想要在D:\WWW下创建siliao项目

vue create siliao

# 之后需要进入siliao目录进行插件组件安装操作

cd siliao

安装

# 通过 npm 安装

npm i vant -S

引入组件

采用官方推荐按需引入组件(未使用Typescript)

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

# 安装插件

npm i babel-plugin-import -D

// 在项目根目录下的 babel.config.js 中配置

module.exports = {

plugins: [

['import', {

libraryName: 'vant',

libraryDirectory: 'es',

style: true

}, 'vant']

]

};

// 接着你可以在代码中直接引入 Vant 组件

// 插件会自动将代码转化为方式二中的按需引入形式

import { Button } from 'vant';

Rem适配

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

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值

1、下载lib-flexible

npm i lib-flexible --save

2、引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3、设置meta标签

通过meta标签，设置设备宽度以及缩放比例

# 项目根目录/public/index.html里更改默认meta

# old:

4、安装postcss-pxtorem

一款 postcss 插件，用于将单位转化为 rem

npm install postcss-pxtorem -D

5、配置postcss-pxtorem

项目根目录下vue.config.js

const autoprefixer = require('autoprefixer');

const pxtorem = require('postcss-pxtorem');

module.exports = {

outputDir: './dist',

publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

css: {

loaderOptions: {

postcss: {

plugins: [

autoprefixer(),

pxtorem({

rootValue: 37.5,

propList: ['*']

})

]

}

}

}

};