攻城狮·建哥
全栈开发工程师以及IT教育从业者。
展开
-
【VUE】微商城(十一)----购物车下订单,选择收货地址,商品详情页立即购买,取消订单,查看订单详情
1、store-->modules-->shopcart.js中添加如下代码2、ShopcartView.vue中找到去结算按钮,添加点击事件 3、创建下订单页面,并且配置路由 1、在pages目录下创建order目录 ,并在order目录中创建 OrderCreateView.vue 2、router--->index.js中导入刚才创建的下订单页面 3、配置路由 4、下订单页面数据的获取 1、store ---> modules--->shopc原创 2022-06-29 12:14:27 · 3051 阅读 · 4 评论 -
【VUE】微商城(十)----收货地址
收货地址增删改查原创 2022-06-14 14:41:43 · 2237 阅读 · 2 评论 -
【VUE】微商城(九)----购物车
1、在vuex中准备购物车数据,进入src-->store-->modules文件夹 新建文件shopcart.js2、打开store文件夹下的index.js导入shopcart模块3、加入购物车功能实现 1)、shopcart.js中相关代码 2)、商品详情页中的加入购物车按钮添加事件 3)、测试点击添加购物车 查看vuex中的数据以及localStorage中的数据.........原创 2022-04-20 21:52:05 · 2960 阅读 · 8 评论 -
【VUE】微商城(八)----商品列表,商品详情页
1、分类页跳转商品列表1)、在pages文件夹下创建一个goods文件夹,并且在goods文件夹创建一个GoodsListView.vue2)、打开router文件夹下的index.js配置GoodsListView.vue路由 3)、进入CategoryView.vue修改二级分类中的a标签为 router-link并添加 to属性跳转到商品列表页 4)、通过路由传参的方式传递分类编号 5)、.........原创 2022-04-11 23:20:36 · 9456 阅读 · 2 评论 -
【VUE】微商城(七)----实现分类页面功能
1、分类页面的基本布局1)、分类页面左侧一级分类布局1、找到CategoryView.vue页面,编写js代码,发送请求获取分类数据2、左侧一级菜单页面结构3、左侧一级菜单CSS样式代码<style lang="scss" scoped>ul { margin: 0; padding: 0;}li { list-style: none;}.........原创 2022-04-09 20:07:03 · 4403 阅读 · 9 评论 -
【VUE】微商城(六)----我的页面布局,登录,退出登录,注册
1、完成我的页面布局1)、打开pages目录下的UserView.vue,编写页面基本结构代码: <div class="member"> <div class="header-con"> <router-link to="/user/login" class="mui-navigate-right"> <div class="user-info"> <div clas.........原创 2022-04-08 21:07:50 · 4274 阅读 · 4 评论 -
【VUE】微商城(五)----快速导航按钮布局实现
1、打开mui文档 找到九宫格 点击进入2、复制九宫格代码<ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-home"></span> <di原创 2022-04-06 22:01:56 · 1440 阅读 · 2 评论 -
【VUE】微商城(四)----封装轮播图组件,axios安装使用
1、在components文件夹下新建SwiperView.vue文件,并添加基本结构 如图所示:2、打开mint-ui文档 找到轮播图组件mint-ui documentation并且复制轮播图基础用法<mt-swipe :auto="4000"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item&g..原创 2022-04-06 19:51:49 · 2465 阅读 · 3 评论 -
【VUE】微商城(三)----添加顶部标题栏返回按钮功能实现
1、顶部导航栏添加返回按钮1)、打开mint-ui官网找到如下代码<router-link to="/" slot="left"> <mt-button icon="back">返回</mt-button></router-link>2)、将以上复制的代码,放入到App.vue中3)、将 <router-link></router-link> 标签修改成&.........原创 2022-04-05 19:49:09 · 1748 阅读 · 0 评论 -
【VUE】微商城(二)----顶部标题栏,底部导航栏
1、顶部标题栏1)、梳理初始项目代码App.vue 梳理 : router文件夹下的index.js梳理: views文件夹下的 HomeView.vue梳理:原创 2022-04-05 18:38:35 · 4128 阅读 · 0 评论 -
【VUE】微商城(一)----安装mint-ui,mui,sass
1、安装mint-ui 1)、进入项目根目录,按住 shift键 然后鼠标右键点击 在此处打开powershell 打开命令行窗口2)、运行命令 cnpm install mint-ui --save 下载安装mint-ui,不报红正常都没问题 3)、使用vscode打开项目,点击文件 打开文件夹 4)、选中创建好的项目文件夹 5)、项目 src下的 main.js 增加以下代码,结果如图所示.........原创 2022-04-03 20:24:24 · 3208 阅读 · 13 评论 -
VUE-使用vue脚手架创建项目
1、创建存放项目的目录2、进入目录 按住shift键 鼠标右击,打开powershell3、在命令行窗口执行 vue ui 打开vue项目管理器4、创建项目1、选择项目存放位置2、输入项目名,选择包管理器3、选择预设,这边选择手动配置4、勾选相关插件5、选择vue.js版本,路由模式,eslint配置模式6、创建项目,不保存预设。 也可以输入预设名保存预设并创建项目7 、等待项目创建完成8、项目创建完成9、启动...原创 2022-04-02 22:09:17 · 712 阅读 · 0 评论