在Vue2项目中使用Vant组件库

Vant 2 - Mobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/v2/#/zh-CN/home1. 安装vant包 

# Vue2项目下必须这么写，不能直接写npm i vant -S
npm i vant@latest-v2 -S

2. 安装按需引入插件

# 安装按需引入插件
npm i babel-plugin-import -D

3. 在 babel.config.js 中配置：

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4. 在/src/main.js文件中按需引用vant组件

// /src/main.js
import Vue from 'vue'
import App from './App.vue'

// 使用babel-plugin-import引入vant后，可以直接按需使用vant组件
import {Button} from 'vant';
Vue.use(Button)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

 可能的踩坑：报错  Uncaught ReferenceError: Vant is not defined

白店小二：管理项目时的错误——Uncaught ReferenceError: Vant is not defined_白店小二的博客-CSDN博客场景对项目新增加了一个UI框架Vant，按照官方文档进行安装和配置，官方文档推荐按需加载，于是我就做了按需加载的配置。babel.config.jsmodule.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true .https://blog.csdn.net/liyangyang1998/article/details/108360291

 

---

1. Vue小插件：Vue VSCode Snippets 自动生成Vue基本框架

        快捷命令有：vbase、vdata等

2. 在线模拟后端接口

fastmock 在线接口 Mock 平台fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求，你可以用fatmock实现项目初期纯前端的效果演示，也可以用fastmock实现开发中的数据模拟从而实现前后端分离https://www.fastmock.site/#/3. Vue+Koa商城教程

技术胖-Vue2.x+Koa2实战移动电商(共61集)https://www.jspang.com/article/61#toc4