使用cli3创建一个vue项目,可以使用命令行、或者vue ui可视化界面创建,这里就不再阐述了。

下面记录一下vant在vue项目中的按需引入:

1、npm安装vant(网络有问题的可以使用 cnpm):
npm i vant@latest-v2 -S

2、按需引入,还需要安装babel-plugin-import插件:
npm i babel-plugin-import -D

3、配置babel-plugin-import插件,这里需要说明一下,以前的学习都是通过cli2.x创建项目,升级3.x后,发现生成的项目中没有.babelrc文件。不过没事,修改babel.config.js文件即可。

初始内容如下:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

改为:

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

4、在main.js中按需引入所需的组件
import { Button } from 'vant'
Vue.use(Button)

5、在template中使用组件即可

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
Logo

前往低代码交流专区

更多推荐