大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

《vue+vant+node+mongoDB+koa2》电商项目实战连载(2)


第二节,引入vant组件库


其实vue的组件库很多,

之前咱们讲过一个饿了么团队出的一个组件库 elementUI;

今次咱们用有赞团队出的组件库,Vant

<!-- 轻量、可靠的移动端 Vue 组件库 -->

https://youzan.github.io/vant/#/zh-CN/intro,

使用组件库,节省开发时间、成本,

特性

50+ 个经过有赞线上业务检验的组件

单元测试覆盖率超过 90%

完善的文档和示例

支持 babel-plugin-import

支持 TypeScript

支持 SSR

安装,

npm install vant --save

简写,

npm i vant -S

<!-- 优雅引入 vant -->

安装,babel-plugin-import

npm i babel-plugin-import -D

or

npm i babel-plugin-import --save-dev

打开 项目根目录的 .babelrc 文件,

可以按需要引入 组件模块,现在是很主流的引入 方式,

"plugins": [

"transform-vue-jsx",

"transform-runtime",

["import",{

"libraryName":"vant",

"style":true

}]

]