在vue项目中使用vant(全局引入,按需引入,页面中引入)
安装:npm i vant -S(简写)npm install vant --save(完整写法)引入:1、全局引入main.js:import Vant from 'vant'import 'vant/lib/vant-css/index.css'Vue.use(Vant)2、按需引入(推荐)首先,安装babel-plugin-importnpm i babel-plugin-import -D
·
安装:
npm i vant -S(简写)
npm install vant --save(完整写法)
引入:
1、全局引入
main.js:import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)
2、按需引入(推荐)
首先,安装babel-plugin-import
npm i babel-plugin-import -D(简写)
npm install babel-plugin-import --save-dev(完整写法)
然后,在.babelrc文件中
"plugins": [
"transform-vue-jsx",
"transform-runtime",
<!--这个是添加的-->
["import",{"libraryName":"vant","style":true}]
]
最后,在main.js中
import {Button} from 'vant'
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)
3、如果想在页面中单独使用组件
import { Button, Row, Col } from 'vant'
export default{
components: {
[Button.name]:Button // 有的组件有专门的引入方式,比如Dialog,可以看看
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)