vue-cli3.0与vant的引入
2020/3/31 8:02:25
本文主要是介绍vue-cli3.0与vant的引入,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
因为我们项目就是在
vue-cli3.x
的基础上进行的一个能力的补充,新的脚手架生成的项目如何引入vant
,简单的说一下。
项目相关:
panda-vue-template
手把手搭建vue小商城2.0
1、安装
- 如果你是老的脚手架搭建的
vue
项目,如何引入使用vant
可以看看这个–>有赞vant组件库的引入; - 新的
@vue/cli3.x
脚手架引入vant也很简单,我们先安装一下:
$ npm install vant --save
- 因为我们的项目中本来是使用
sass
来作为css的一个预编译器的,但是vant是用的less
语法,所以我们还需要安装下less
,不然会报错。
$ npm isntall less less-loader --save-dev
2、配置
- 配置安装参考官网的引入组件教程就可以了。
- 我们就按照教程的来,在我们的babel.config.js中配置一下:
module.exports = { presets: ['@vue/cli-plugin-babel/preset'], // vant引入: plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: name => `${name}/style/less` }, 'vant' ] ] }
4、使用
- 按照官网的说明,按需引入一下即可,比如我们在main.js中引入一下:
// main.js import { Button } from 'vant' Vue.use(Button)
- 如果你使用
postcss-px-to-viewport
来配置vw解决移动端适配解决方案,将viewportWidth
设置为了750
,那么你还需要在postcss.config.js文件中将其selectorBlackList
名单中把vant
加进去,因为vant的样式是按325px
来设计的,不然vant的组件都会缩小一半。
module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', viewportWidth: 750, unitPrecision: 3, propList: ['*'], viewportUnit: 'vw', fontViewportUnit: 'vw', + selectorBlackList: ['.ignore', 'van'], minPixelValue: 1, mediaQuery: false, replace: true, exclude: [], landscape: false, landscapeUnit: 'vw', landscapeWidth: 568 } } }
5、其它
- 如何修改
vant
的主题色?在@vue/cli3.x
的项目中,修改主题色变的是件简单的事情。 - 我们可以在
vue.config.js
配置文件中向向预处理器Loader传递选项,就可以替换的vant
的默认样式:
module.exports = { // ... css: { loaderOptions: { less: { modifyVars: { 'font-size-sm': '100px', 'font-size-md': '200px', 'font-size-lg': '300px', } } } } };
vant
也给我们提供了一份它的样式表:vant样式表
6、小结
- 大概就是这么多,具体可以去看看项目中的使用。
点击查看更多内容
这篇关于vue-cli3.0与vant的引入的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南