Vue.js+Koa2移动电商实战2

Posted 2020-11-08 小凡的耿

引入Vant组件库

　　在工作中，有很多自己的组件库，但是在开发这些前都会选择一套稳定的开源的作为轮子作为基础（大公司是有能力造自己轮子的）。因为我们要作电商系统，所以选择有赞的Vant作为Vue的基本组件和样式组件。

　安装Vant

npm i vant -S

　　安装好后，看一下我们的package.json文件，并确认一下版本。

　引入Vant的第一种方法（不推荐）

　　安装好vant后，可以使用以前常用的方法进行引入-这是一种全局引入的方式。
　　直接在src/main.js进行全局引入。

import Vant from ‘vant‘
import ‘vant/lib/vant-css/index.css‘
Vue.use(vant)

　　简单的三行代码已经可以把Vant引入进来了，但是这并不够优雅，也使得最后打包发布时会增加包的大小，Vue的SPA首屏打开时本来就有些慢，所以不建议使用这种方法进行引入。

　优雅的引入Vant

　　vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。
　　安装babel-plugin-import

npm i babel-plugin-import -D

　　在.babelrc中配置plugins（插件）

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import",{"libraryName":"vant","style":true}]
  ]

　按需使用Vant组件

　　我们设置好.babelrc后，就可以按需引入Vant框架了。比如现在我们引入一个Button组件.
　　在src/main.js里加入下面的代码：

import { Button } from ‘vant‘
Vue.use(Button) 

　　有了这段代码之后，我们就可以在需要的组件页面中加入Button了.

<van-button type="primary">主要按钮</van-button>