使用vue-cli4创建vue工程//vue-cli@4.2.3vuecreatevant-demo根据你的选择相应的配置需要，此处略过。..PS：因为vantUI使用的preprocessor较少，所以配置的时候建议选择这个processor。安装vantUI，按需导入installvantUInpmivant-Simportondemandbabel-plugin-import是一个babel插件，在编译过程中会自动将import的写法转换为按需导入npmibabel-plugin-时import-D通过vue-cli4创建项目，由于babel内部集成，在项目根目录下有一个babel.config.js文件，在这个文件中添加配置。module.exports={presets:['@vue/cli-plugin-babel/preset'],plugins:[['import',{libraryName:'vant',libraryDirectory:'es',style:true},'vant']]}main.js引入vantUI组件是因为每个组件都需要用Vue.use()注册，可以直接使用Array遍历，因为babel-plugin-import插件是按需使用和引入的，所以没必要写每个组件的样式。import{Button,RadioGroup,Radio}from'vant'[Button,RadioGroup,Radio].forEach(e=>{Vue.use(e)})在项目中直接使用相应的组件。效果：适配RemVant默认中的样式以px为单位，移动端使用Rem为佳。官方文档推荐使用以下两个工具：postcss-pxtorem是一个postcss插件，用于将单位转换为remlib-flexible，用于设置rem基准值安装npminstallpostcss-pxtorem-Dnpmiamfe-flexible安装完成后，导入amfe-flexibleimportmain.js中的'amfe-flexible/index.js'如果项目根目录下有postcss.config.js文件，直接打开，如果没有，直接打开，在根目录下创建一个，不要误入歧途（哈哈）！//postcss.config.jsmodule.exports={plugins:{'autoprefixer':{overrideBrowserslist:['Android4.1','iOS7.1','Chrome>31','ff>31','ie>=8']},'postcss-pxtorem':{rootValue:37.5,propList:['*']}}}PS:375px是100%宽度，写px会被rem自动处理，如果不想被处理通过rem，你可以使用PX来编写.测试一下：显示自定义主题Vant使用Less对样式进行预处理，并内置了一些样式变量。通过替换样式变量，您可以自定义您需要的主题。以下是一些基本的样式变体，请参阅配置文件以了解所有可用的颜色变体。//组件颜色@text-color:#323233;@border-color：#ebedf0；@active-color：#f2f3f5；@背景色：#f7f8fa；@background-color-light:#fafafa;按需导入时，自定义主题并更改babel.config.js文件。既然上面的步骤引入了，这里稍微改动一下module.exports={presets:['@vue/cli-plugin-babel/preset'],plugins:[['import',{libraryName:'vant',libraryDirectory:'es',//style:truestyle:name=>`${name}/style/less`},'vant']]}根目录创建vue.config.js文件，内容如下:module.exports={css:{loaderOptions:{less:{modifyVars:{'radio-checked-icon-color':'#f20000',}}}}};所有可用的颜色变量请参考配置文件重新启动项目。npmrunserve也可以单独导入一个图片文件，配置主题颜色，新建一个theme.less文件，内容如下：@radio-checked-icon-color:#00f228;修改vue.config.js文件重启项目npmrunserve导入全部和单独导入样式时，自定义主题导入样式时，需要将css改成less//importallstylesimport'vant/lib/index.less';//导入单个组件样式import'vant/lib/button/style/less';
