### 导入和使用组件
> main.js
```js
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// vant组件导入和使用 https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
import 'vant/lib/index.css'
// vant 组件
import {
PullRefresh,
List,
Popup,
Grid, GridItem,
AddressEdit, AddressList,
Icon,
SubmitBar,
CheckboxGroup,
SwipeCell,
Stepper,
Checkbox,
Field,
Form,
Tag,
Button,
Image as VanImage,
Card,
Tab, Tabs,
Swipe, SwipeItem,
Lazyload,
Badge,
Sidebar, SidebarItem,
Collapse, CollapseItem,
Empty,
Divider,
Uploader,
Cell, CellGroup,
NavBar,
Search,
Tabbar, TabbarItem,
ContactCard,
Area
} from 'vant'
const vm = createApp(App)
.use(Swipe).use(SwipeItem)
.use(Lazyload, {
lazyComponent: true,
loading: require('assets/logo.png')
}).use(Badge).use(Sidebar).use(SidebarItem).use(Collapse).use(CollapseItem)
.use(Tab).use(Tabs).use(Card).use(VanImage).use(Tag).use(Button).use(Form).use(Field)
.use(Checkbox).use(Stepper).use(SwipeCell).use(CheckboxGroup).use(SubmitBar).use(Icon).use(AddressList).use(AddressEdit)
.use(GridItem).use(Grid).use(Popup).use(List).use(PullRefresh).use(Empty).use(Divider).use(Uploader)
.use(Cell).use(CellGroup)
.use(NavBar).use(Search).use(Tabbar).use(TabbarItem)
.use(ContactCard).use(Area)
.use(store).use(router).mount('#app')
```
- 项目介绍
- 项目初始化
- 安装脚手架
- 创建项目安装组件
- 导入和使用组件
- 配置选项
- 配置别名
- 自动导入
- 接口封装
- 接口地址
- axios 二次封装
- 封装网络请求
- 首页接口
- 商品接口
- 授权接口
- 用户接口
- 购物车接口
- 订单/支付接口
- 收藏接口
- 地址管理接口
- 初始化页面
- 创建初始页面
- 状态管理
- 注册路由
- 静态资源
- 项目开发
- 公用组件
- 商品列表
- 支付轮询
- 回到顶部
- 顶部 NavBar
- 轮播图
- 底部 TabBar
- 入口页
- 首页
- 分类
- 商品详情
- 个人中心
- 我的
- 登录
- 注册
- 账号管理
- 购物车
- 订单
- 我的订单
- 订单预览
- 订单详情
- 我的收藏
- 地址
- 地址管理
- 地址编辑
- 关于我们
- 注意事项
- Tabs 上拉加载
- 下拉上拉重复请求
- 地址管理选中默认迟延
- 地址编辑地区码回显
- 结束