基于VueCli创建项目

 

 

 

 

 

 调整目录，新增两个目录

 

修改路由和App.vue

 路由中规则清空

新建文件夹api和utils

api文件夹：发请求的一些文件

utils文件夹：工具函数方法

vant组件库：第三方vue组件库 vant-ui

 

找到vant官网，进入vant2版本 

 

element-plus 和 ant-design-vue都是既支持vue2有支持vue3的

 

vant2安装：npm i vant@latest-v2 -S

引入 :

• 自动按需引入（推荐）
• 手动按需引入
• 导入所有组件

 

 全部导入

1.安装vant-ui  : npm i vant@latest-v2 -S

2.main.js中注册 

import Vant from 'vant'
import 'vant/lib/index.css'
// 把vant中所有组件都导入了

//插件安装初始化：内部会将所有vant组件导入注册
Vue.use(Vant)

3.使用测试 

    <vant-button type="primary">主要按钮</vant-button>
    <vant-button type="info">信息按钮</vant-button>

 按需导入

 1.安装vant-ui（已安装）

2.安装插件：npm i babel-plugin-import -D [--force] ,D是将该插件安装为开发依赖

 

3.babel.config.js中配置 （官网直接复制）

4.main.js按需导入注册 

5.测试使用 

若是需要的组件越来越多，放置在main.js中太过复杂，所以可以将其抽离放到 utils文件夹下的 vant-ui.js文件中 。然后在main.js中引入该文件

 

导入打分组件