Vue + vant + HBuilder X app打包 实现商城

项目详细设计和实现 重要技术分享

基于vue-cli和vant来搭建开发环境

1.安装vue-cli

2.用vue-cli指令来构建项目(需要先全局安装vue-cli)
vue create tea-item

3.安装vant
npm i vant -S

-S 和 -D的区别：
-S是生产环境中用到的，程序运行的时候也会使用，如element，jQuery等
-D是开发环境用到的，程序运行时不需要，如webpack，gulp等打包和压缩工具

4.vant按需引入
npm i babel-plugin-import -D

并且将babel.config. js改为
（这里是 我把我项目中的截图出来）

5.接着在main.js中引用需要导入的组件就可以了
（这里是 我把我项目中的截图出来）

6.可以在Home.vue中加入测试
如果出现了红色的按钮，说明已经 成功引入了vant

van-sticky粘性布局

这里我是用了van-sticky粘性布局 让搜索栏什么的 可以吸顶
效果：

代码我就截图一部分：

van-swipe轮播图

Vuex

引入Vuex（前提是已经用Vue脚手架工具构建好项目）
1.利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

2.引入

3.添加购物车的 保存到本地存储

card卡片组件的商品购物车实现

还有一些js文件 就不截图了 太多了 看看目录吧

项目整体运行效果