新建SpringCloud电商前端Vant项目

新建前端Vant项目（用户终端）

1、新建Vant

因为是给用户使用的，怎么说呢，现在大部分用户使用这些用的终端应该就是手机了，所以我们做手机端的就比较好，因此新建一个项目用Vant来做就好

Vant是一个和Element差不多的组件只不过Vant是给手机上适配的
Vant 3

通过Win+R打开运行窗口，输入cmd进入命令窗口，在D盘的project2101文件夹下，新建vue项目vue create user2101新建Vant项目
在这里插入图片描述
然后我们选择预设功能，第一个是默认选项，我们选第二个手动选择功能

然后就根据实际需求按空格进行选择一般需要Babel、Router、Vuex、CSS Pre-processors、Linter

按回车键进入Linter中，在路由器是否使用历史记录模式？后输入Yes
在这里插入图片描述
然后在接下来的选择CSS预处理器中选择Less

在选择linter/formatter配置中选择ESLint with error prevention only（仅带错误预防的ESLint）

在拾取其他lint特征中选择Lint on save

在询问Babel、PostSS、ESLint等的配置文件放在哪里时选择In dedicated config files（放在专用配置文件中）
在这里插入图片描述
最后在是否将此保存为将来项目的预设？选择Yes，保存的名字为Template

在创建完后，进入user2101文件，添加Vant组件vue add vant

在将插件安装完后，会问你是否将所有组件引入？我们选择Impot on demand（按需引入），开发者怕如果你全部引入导致你项目过大，所以推荐按需引入，按需引入只是会麻烦点罢了，就是在用任何组件前都需要先引入
在这里插入图片描述
选择要加载的区域设置选择中国

添加前后端交互axios组件vue add axios，然后就结束了

然后在HbudilX中，点左上角文件，打开一个目录找到你刚刚新建的user2101文件就好，然后我们使用组件就得按需一个个引入使用
在这里插入图片描述
将之前项目写的axios.js复制过来替换当前文件下的axios,js，记得要把element的组件删掉

然后在package.json下修改端口号位81

此时右键该项目，选择使用命令行窗口打开所在目录，然后通过npm run serve运行文件就好
在这里插入图片描述
通过浏览器进行访问，可以在按下f12后的调试模式下模拟各种手机型号进行调整