1.我们在上面安装的vue-cli是2.9.6的版本,但是要想用vue ui必须是大于3.0版本的,所以在这里我们需要卸载之前的版本。
```
npm uninstall vue-cli -g
```
![](https://img.kancloud.cn/04/c7/04c7a114aeb78647e09a5c87508719bc_967x366.png)
2.重新安装vue-cli。
~~~
npm install -g @vue/cli
~~~
![](https://img.kancloud.cn/3f/d5/3fd580068c3d6089886f2c4ee3dd1499_977x496.png)
3.产看vue-cli帮助文档。
```
vue -h
```
![](https://img.kancloud.cn/01/cd/01cdc8bb23654070de5da4978b95020a_956x513.png)
4.执行vue ui创建项目。
```
vue ui
```
![](https://img.kancloud.cn/55/b9/55b9d110f97a8996e48bda164d989247_961x83.png)
![](https://img.kancloud.cn/45/a0/45a0c6aa7165cbff8f101a4b482f4ac9_1366x406.png)
5.选择项目存放路径
![](https://img.kancloud.cn/15/78/15784e0bbe0b35632b44fd58337797c4_1349x585.png)
![](https://img.kancloud.cn/81/60/81605650e8fd8006491dc7055e451613_1304x606.png)
6.填写项目名称和初始化git。
![](https://img.kancloud.cn/f6/e8/f6e872944f85183e2cf76292ae54bcae_693x639.png)
![](https://img.kancloud.cn/89/7d/897d1723ef7c4bc5fc39652c3054cd7d_712x600.png)
7.手动项目预设。
![](https://img.kancloud.cn/85/e6/85e6328473bb18d680f5917018022370_1207x628.png)
![](https://img.kancloud.cn/21/ec/21ec17818cc4f9b2d85fdc669f0621b5_1323x510.png)
![](https://img.kancloud.cn/18/3c/183c662a46ce0991fcf64d45ec6fce2a_1296x501.png)
![](https://img.kancloud.cn/76/da/76da2cb98ccd9b20f2b59980874d6d34_1290x457.png)
7.创建项目。
![](https://img.kancloud.cn/63/f4/63f4636a82b7ead2c0d55075d4b021e1_1341x620.png)
8.创建预设项目。
![](https://img.kancloud.cn/6c/25/6c25ef79ddb26bbe7a1698099c43909a_792x312.png)
9.等待项目创建(这个时间我用了5分钟,还是配置了淘宝镜像,希望大家耐心等待)。
![](https://img.kancloud.cn/94/ea/94eaad3d6801f02ac767bd6abf9ce581_1337x593.png)
![](https://img.kancloud.cn/08/c8/08c89fd1b5d7836be70d99df9970423b_1366x604.png)
10.安装Element UI。
![](https://img.kancloud.cn/50/7b/507b6b4c1a64fca988404ff012e41209_1362x526.png)
![](https://img.kancloud.cn/81/b0/81b07644e5990520febbc96ee2d94bf3_1363x626.png)
![](https://img.kancloud.cn/10/0b/100b08f4e64880033e2f3722ae4cd45a_1155x428.png)
![](https://img.kancloud.cn/5b/ed/5bedd697057756c73d0d429a67388854_1133x622.png)
11.安装axios。
![](https://img.kancloud.cn/cf/7d/cf7de92328e0614837232b32d1cf18b8_1366x582.png)
![](https://img.kancloud.cn/3d/5e/3d5ef3d8acb8f8ab00db4a65da868e41_1135x425.png)
![](https://img.kancloud.cn/bd/19/bd19c36fb5169c4913ce50a25a9516f7_1087x556.png)
- 空白目录
- 前言
- 状态码
- 后台页面
- nodejs安装
- vue-cli脚手架安装
- 使用vue ui创建项目
- 将本地代码托管到码云
- 绘制后台登录页面
- 安装less依赖
- uniapp热更新
- e2e自动化测试
- mock
- ant design pro 导出excel
- 后台接口
- laravel项目安装
- 创建数据库
- 创建数据填充
- 中间件
- 表单验证
- jwt-auth安装
- 处理跨域请求
- 安装swagger
- 接口
- 站点管理
- 后台登录
- 站点管理-首页
- 站点管理-刷新token
- 站点管理-退出登录
- 站点管理-获取左侧栏
- 首页-修改密码
- 单图上传
- 清除缓存
- 站点管理-权限管理
- 权限管理-权限组列表
- 权限组列表
- 权限组添加
- 权限组编辑页面
- 权限组编辑提交
- 权限组调整状态
- 权限组分配权限
- 权限组分配权限提交
- 权限管理-权限列表
- 权限列表
- 权限菜单状态
- 权限是否验证
- 权限排序
- 权限添加
- 权限编辑页面
- 权限编辑提交
- 权限添加子级
- 权限删除
- 权限管理-管理员列表
- 管理员列表
- 管理员列表-添加
- 管理员编辑页面
- 管理员编辑提交
- 管理员获取权限组
- 管理员调整状态
- 管理员初始化密码
- 站点管理-系统配置
- 系统配置-系统配置
- 系统配置
- 系统配置-提交
- 商城管理
- 商品管理
- 商品分类
- -商品分类
- 商品分类-状态
- 商品分类-排序
- 商品分类-添加
- 商品分类-添加子级
- 商品分类-编辑页面
- 商品分类-编辑提交
- 商品属性
- -商品属性
- 商品属性-商品分类
- 商品属性-添加
- 商品属性-编辑页面
- 商品属性-编辑提交
- 商品属性-状态
- 商品属性-排序
- 商品属性-删除
- 商品属性值
- -商品属性值
- 商品属性值-商品属性
- 商品属性值-添加
- 商品属性值-编辑页面
- 商品属性值-编辑提交
- 商品属性值-状态
- 商品属性值-排序
- 商品属性值-删除
- 商品列表
- --商品分类
- --获取属性
- 商品-删除
- 商品-排序
- 商品-状态
- 商品-是否精品推荐
- 商品-是否热卖单品
- -商品列表
- 商品-添加
- 商品编辑页面
- 商品-编辑提交
- 会员管理
- 用户列表
- -用户列表
- 图片管理
- 轮播图列表
- -轮播图列表
- 轮播图添加
- 轮播图编辑页面
- 轮播图编辑提交
- 轮播图状态
- 轮播图排序
- 轮播图删除
- wap接口
- 我的
- 小程序登录
- 获取用户信息
- 刷新token
- 获取设置信息
- 绑定手机号
- 退出登录
- 地址管理
- 获取省市区
- 添加地址
- 我的地址列表
- 获取编辑地址数据
- 编辑地址
- 删除收货地址
- 商品足迹
- 收藏商品
- 首页
- 轮播图
- --商品列表
- 商品收藏
- 分类
- 商品一级分类
- 商品二级分类
- 购物车
- 加入购物车
- 购物车数量
- 购物车列表
- 单选
- 全选全不选
- 购物车减或加
- 购物车删除
- Vue3总结
- 生命周期