第九章 实战项目

实战项目实战项目准备工作搜索页面技术方案和流程首页项目创建和配置分类页面底部导航栏个人信息页面顶部工具栏购买流程实战项目准备工作从本章开始，就要进行真正的Vue.js实战学习了。本章重点是学习Vue.js的一些基本应用和开发环境，希望读者能够了解一些常用的Web开发工具、基本的调试和运行环境，以及JavaScript的最新进展和开发方式。nodejs环境,node版本不低于14.x.x版,npm版本不低于6.x.x版本chrome浏览器，chrome浏览器版本不低于87.x.x版本Vue.js的调试神器一vue-devtools编辑器IDE一VSCODE(不限于webstorm,sublime,HBuilder)实战项目技术方案和流程前面讲到可以直接在一个html页面里通过引入Vue.js来直接写Vue代码，但是这样的方式并不常用。因为如果我们的项目比较大，项目中会存在很多页面，一旦每个页面都引入一个Vue.js或者声明一个Vue实例，这样非常不利于后期的维护和代码的公用，也会存在实例名冲突的情况，所以我们需要用到Vue提供的技术栈来构建强大的前端项目。vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。vue-router：Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。vuex：Vue提供的状态管理工具，用于同一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。实战项目技术方案和流程NPM：node.js的包管理工具，用于同一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。iconfont：国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具ant-design-vue：这是AntDesign的Vue实现,提炼自企业级中后台产品的交互语言和视觉风格,开箱即用的高质量Vue组件。利用以上等技术，我们便可以开始构建我们的Vue项目了。实战项目项目创建和配置安装vue-cli打开电脑上的终端命令行程序(CMD，后面我们简称CMD)从CMD中，进入想要放置项目的目录中 cdxxx/xxx/xxx(路径)如cdD:/project使用npm安装vue-cli可以参考官方文档：/zh/guide/installation.html实战项目项目创建和配置创建项目从CMD中，进入想要放置项目的目录中 cdxxx/xxx/xxx(路径)如cdD:/project使用vue-cli的命令创建项目可以参考官方文档：/zh/guide/creating-a-project.html#vue-create使用vue-cli的命令创建项目选择配置策略为手动配置实战项目项目创建和配置创建项目选择vueversion和babel，其他可以先不选选择vue2.x版本选择将配置文件分割创建最终问是否将上面这些选项保存为一个默认配置，确定输入y，不保存输入n实战项目项目创建和配置创建项目看到下面的输出说明项目创建成功实战项目项目创建和配置使用IDE编辑器VSCODE打开创建后的项目在项目根目录创建vue全局配置文件vue.config.js在新文件中添加publicPath（基本URL）删除初始项目的例子代码，src文件中只保留main.js和App.vue，同时App.vue中删除之前无关的引用代码实战项目项目创建和配置在assets目录创建css文件夹，并创建common.css文件在App.vue文件的style标签中，引用common.css文件实战项目在VSCODE中打开终端，并在终端窗口中输入vue-router的安装命令npminstall--savevue-router执行完命令后，查看package.json文件是否有vue-router内容项目创建和配置实战项目制作底部导航栏在components创建tabbar文件夹在tabbar文件夹下创建TabBar.vue底部导航栏组件实战项目制作底部导航栏在App.vue组件中引用TarBar.vue并在vscode终端中输入npmrunserve，将项目启动查看效果实战项目制作底部导航栏创建底部导航栏中导航卡片，在components/tabbar文件夹下创建TabBarItem.vue组件并将TabBarItem组件当成TabBar插槽，放置在TabBar组件中实战项目引用IconFont的icon字体访问/，并注册用户在网站搜索功能，搜索四个适合底部选项卡的icon图标，点击图标上购物车按钮点击网站右上角购物车按钮，在右侧弹出的面板中点击“下载代码”按钮将下载后的压缩包解压到项目中assets/icon文件中实战项目完善底部导航栏使用命名插槽将iconfont传入组件中查看效果实战项目底部导航栏加入路由功能分别创建4个选项卡页面在components/pages目录中创建tabs文件夹在components/pages/tabs目录中创建Home.vue、Category.vue、Order.vue、Account.vue四个文件其中Home组件的内容如下，其他页面类似实战项目底部导航栏加入路由功能创建路由的配置文件在src目录中创建router文件夹在src/router目录中创建index.js文件用vue-router配置router内容实战项目底部导航栏加入路由功能将/router/index.js导入到main.js入口文件中在App.vue中用vue-router的标签声明路由查看页面效果实战项目底部导航栏增加事件绑定修改compons/tabbar/TabBarItem.vue文件增加点击的绑定事件通过当前$route路径判断是否需要将本选项卡置为激活样式实战项目底部导航栏增加事件绑定修改App.vue文件在每个tab-bar-item组件上增加path属性增加的path属性应对应着router的配置策略查看页面效果实战项目优化路由配置将路由配置文件改造为支持二级路由在src/components/pages目录中创建Main.vue文件将App.vue内容移至Main.vue中,同时修改App.vue增加一级路由声明，那么Main.vue自动降为二级路由实战项目优化路由配置将路由配置文件改造为支持二级路由修改router/index.js路由配置文件，增加二级路由内容二级路由的另一个目的是当页面进入二级页面时，页面会自动隐藏底部导航栏实战项目项目导入ant-design-vueUI库在VSCODE编辑器中终端窗口执行安装命令在项目根目录package.json文件中查看是否安装成功在src/路径下创建antd文件夹，以及index.js文件如果引入了antd下所有的模块，这会影响应用的网络性能。所以可以通过按需加载组件方式进行引用，图片中的代码是常用的样式组件。以上代码便完成了Antd的引入。需要注意的是，样式文件需要单独引入。我们已经将样式文件在src/antd/index.js配置文件中引用了。将andt/index.js引入到main.js入口文件中实战项目制作顶部工具组件需要制作一个显示在页面顶部的公用组件组件显示在一级页面时，具有标题显示或者搜索入口的功能显示在非一级页面时，具有返回上一页功能，和标题显示或者搜索入口的功能组件应分为左中右三个部分显示，可以使用命名插槽实现按需显示不同内容在components路径下创建topbar文件夹在components/topbar目录下创建Tabbar.vue组件在组件中使用antd输入框组件在组件中使用命名插槽增加默认命名插槽中的事件绑定实战项目首页添加顶部工具栏将TopBar组件引入到Home.vue页面中实战项目顶部工具栏添加购物车按钮在home页面使用命名插槽增加购物车按钮使用iconfont显示购物车图标实战项目实现搜索功能首页在观察众多流量入口的App软件后，总结搜索功能的解决方案一般软件首页顶部的搜索输入框并不是真的输入框，而是绑定跳转事件的按钮点击首页顶部搜索框后，页面跳转到二级搜索入口页面在搜索入口页面顶部工具栏中搜索框是可以编辑内容的顶部工具栏最右侧有搜索按钮搜索入口页面应实现展现搜索历史功能点击二级搜索入口页面的搜索按钮，页面跳转到三级搜索结果页面二级页面跳转到三级页面应支持带参数跳转路由顶部导航栏组件应支持父组件向子组件传参数顶部导航栏组件应支持子组件触发父组件方法实战项目实现搜索功能实现由顶部工具栏输入框跳转到二级搜索入口页面在src/components目录中创建Search.vue页面使用命名插槽实现左边返回按钮和右边搜索按钮增加返回按钮的事件绑定增加搜索按钮的事件绑定(暂时只做打印输出不做跳转)修改router/index.js配置文件，增加Search搜索入口页面路由实战项目实现搜索功能实现由顶部工具栏输入框跳转到二级搜索入口页面在home页面topbar顶部工具栏中绑定跳转二级页面方法focusFunc修改topbar/TopBar.vue组件，增加props属性focusFunc实战项目实现搜索功能实现由顶部工具栏输入框跳转到二级搜索入口页面查看页面效果实战项目实现搜索功能实现二级搜索入口页面跳转到搜索结果页面在src/components目录中创建SearchResult.vue页面使用命名插槽实现左边返回按钮和右边搜索按钮增加返回按钮的事件绑定增加搜索按钮的事件绑定(暂时只做打印输出不做跳转)修改router/index.js配置文件，增加SearchResult搜索入口页面路由实战项目实现搜索功能实现二级搜索入口页面跳转到搜索结果页面通过子组件触发父组件方法的方式，实现搜索入口页面修改搜索框内的值修改TopBar组件，增加子传父事件修改Search页面，增加searchInputChangeHandle方法绑定实战项目实现搜索功能实现二级搜索入口页面跳转到搜索结果页面实现Search.vue页面搜索按钮事件方法判断如果不输入内容则通过antd的通知组件($message)提示用户请输入搜索内容如果输入框内有内容，则将内容作为参数进行页面跳转实战项目实现搜索功能实现二级搜索入口页面跳转到搜索结果页面实现SearchResult.vue页面接收路由参数方法在SearchResult页面中声明searchInput变量用vue生命周期created钩子函数，接收上一页面传来的值将传来的参数赋值给searchInput，同时将该值显示在页面上并且将searchInput的值显示在顶部搜索栏中实战项目实现搜索功能实现二级搜索入口页面跳转到搜索结果页面页面显示效果实战项目安装vuex在VSCODE中打开终端，并在终端窗口中输入vuex的安装命令npminstall--savevuex执行完命令后，查看package.json文件是否有vuex内容实战项目项目引入Vuex在src目录下创建store文件夹在src/store路径下创建index.js配置文件并将vuex导入到main.js入口文件中实战项目使用Vuex替换命名路由传参改变传值策略改变原因：用命名路由会导致三级页面以及更深层页面返回时，原始参数传不回去新策略：使用vuex全局变量进行页面之间的传递修改src/store/index.js全局状态配置文件声明全局变量searchInput增加全局同步方法setSearchInput，目的是设置searchinput的值实战项目使用Vuex替换命名路由传参修改src/components/pages/Search.vue页面中搜索绑定事件替换原先命名路由传参数方式，改变成全局同步方法修改src/components/pages/SearchResult.vue页面中接收参数方式替换原先通过$route.params获取参数，改成用全局变量方式获取实战项目本地缓存LocalStorage实现历史搜索功能src路径下创建kits工具文件夹，kits代表公用工具文件夹创建src/kits/LocalStorage.js文件，实现本地缓存公用方法实现getArray方法，根据key获取本地缓存并转成数组对象实现setArray方法，将新值push到数组对象后，在转成字符串格式设置到本地缓存中实现clearItem方法，按key值清除该key值的内容

实战项目本地缓存LocalStorage实现历史搜索功能在components/pages/Search.vue页面增加本地缓存的功能导入kits/LocalStorage.js文件设置historySearch变量，并通过kits/LocalStorage.js中的getArray方法赋值点击搜索按钮时，通过kits/LocalStorage.js中的setArray方法进行赋值

实战项目本地缓存LocalStorage实现历史搜索功能在components/pages/Search.vue页面显示搜索历史记录在页面上显示搜索历史记录并用弹性盒子布局显示搜索记录增加删除搜索记录功能点击某个历史记录实现跳转到搜索结果页面

实战项目本地缓存LocalStorage实现历史搜索功能展示页面效果

实战项目封装内容显示区content组件创建components/content/MyContent.vue内容显示区组件设置公用样式

实战项目搜索功能增加MyContent组件修改components/pages/Search.vue,增加MyContent组件修改components/pages/SearchResult.vue,增加MyContent组件查看页面显示效果

实战项目首页将MyContent组件加入到components/pages/tabs/Home.vue页面中实战项目首页-轮播图将轮播图的素材加入到项目assets/imgs/目录下将素材导入到home页面，并在页面定义homeImgs变量使用antd样式库a-carousel组件展示轮播图实战项目首页-轮播图使用计算属性，声明轮播图标签的动态样式增加轮播图的官方固定样式实战项目首页-商品类别卡片将商品图片素材导入到项目assets/imgs目录中在home页面声明商品类别数据结构实战项目首页-商品类别卡片创建一个横向滚动组件在src/components目录下创建scroll文件夹在src/components/scroll目录下创建HScroll.vue组件实战项目首页-商品类别卡片创建类别卡片组件在src/components目录下创建product文件夹在src/components/product目录下创建ProductCard.vue组件使用父传子方式，在该组件接收商品概要信息使用计算属性声明price，imgStyle方法

实战项目首页-商品类别卡片在home页面调用ProductCard和HScroll组件，展现商品类别

实战项目用原生方式实现下拉刷新效果优化components/content/MyContent.vue组件在MyContent组件增加标志位，判断是否普通组件还是带下拉效果组件增加下拉效果使用$refs获取v-dom元素使用双向绑定变量和v-if标签以及css3属性transform显示下拉距离区间显示的文字或图标

实战项目实战项目用原生方式实现下拉刷新效果优化components/content/MyContent.vue组件增加下拉效果增加监听事件（addEventListener）,监听手指下拉事件配合scrollTop属性，计算移动的距离使用setTimeout异步方法，iconfont和第8章动画内容，实现加载动态效果

实战项目用原生方式实现下拉刷新效果在home页面调用MyContent组件时，增加下拉刷新效果的状态位pull查看网页效果

实战项目实战项目用原生方式实现下拉刷新效果优化MyContent下拉刷新效果增加异步方法实现，通过父组件传值方式，实现异步获取数据在MyContent组件中定义参数属性refreshFunc

在加载状态时，用promise异步处理方式调用refreshFunc方法实战项目用原生方式实现下拉刷新效果优化MyContent下拉刷新效果在home页面my-content标签上传入refreshFunc的绑定方法使用promise异步处理方式实现refresh方法实战项目分类页面实现分类页面初始化该页面的数据结构实战项目分类页面实现分类页面导入MyContent组件使用v-for将数据显示在页面实战项目实战项目分类页面实现分类页面使用flex弹性盒子布局美化页面使用计算属性，动态渲染样式查看网页效果实战项目实战项目个人页面顶部消息通知栏利用antd样式库中铃铛icon图标代表消息使用css绝对定位控制布局实战项目个人页面头像部分初始化个人信息数据利用antd样式库中a-avatar承载头像使用flex弹性布局盒子让用户信息居中实战项目个人页面菜单部分初始化菜单数据用v-for和antd样式库中a-list以及a-list-item组件修饰菜单实战项目实战项目个人页面菜单部分增加css3的menus样式查看页面效果实战项目实战项目商品详情页面在src/components/pages目录下创建商品详情页面GoodDetail.vue在GoodDetail.vue页面，创建vue组件默认模板代码实战项目实战项目商品详情页面配置商品详情页面路由修改src/router/index.js路由配置文件实战项目商品详情页面在首页的商品卡片组件上增加事件绑定绑定的事件方法不是在home页面上实现，而是在商品卡片组件（ProductCard）上实现实现绑定事件：通过命名路由跳转到商品详情页面参数通过vuex全局方式传递在src/store/index.js全局变量配置文件上进行修改增加商品详情也参数变量selectedGood增加配置的全局方法(mutation)setSelectedGood实战项目实战项目商品详情页面实现绑定事件：通过命名路由跳转到商品详情页面修改src/router/index.js路由配置，在商品详情路由增加参数其目的是为了通过url的变化，让每次访问商品详情页面没有缓存问题在ProductCard组件上增加跳转方法实战项目实战项目商品详情页面增加顶部工具栏组件引用组件通过插槽自定义左中右组件分布实现返回按钮因为全局变量的参数是数组，所以返回上一页时需要从数组移出该页商品信息实战项目实战项目商品详情页面引入MyContent组件初始化商品详情的数据结构实战项目商品详情页面用轮播图效果显示商品图片使用计算属性添加动态样式使用antd样式库中a-carousel展现轮播图实战项目实战项目商品详情页面用轮播图效果显示商品图片使用css3美化样式增加轮播图中右上角“喜爱”和“分享”按钮实战项目实战项目商品详情页面显示商品文字明细使用antd骨架屏展现评论部分使用css3优化样式实战项目商品详情页面显示商品文字明细初始化相似商品数据结构使用h-scroll和product-card显示横向滚动的相似商品实战项目商品详情页面显示商品文字明细使用css3样式将相似商品恢复原始尺寸查看页面效果实战项目实战项目制作底部公用组件在src/components创建footerbar文件夹在src/components/footerbar创建FooterBar.vue使用默认slot插槽和命名插槽实现自定义组件该组件命名插槽分左右布局使用css3绝对定位让组件固定在页面底部实战项目实战项目制作底部公用组件在src/components/footerbar创建FooterBarButton.vue底部按钮使用antd样式库中按钮组件绑定clickHandle事件通过子传父调用父组件的funcHandle事件实战项目商品详情页将footerbar组件和footerbarbutton组件引入到页面在页面声明该组件，加入“加入购物车”和“马上购买”按钮查看页面效果实战项目购物车页面在src/components/pages创建Cart.Vue购物车页面将TopBar，MyContent，FooterBar引入到该页面中实战项目实战项目购物车页面使用公用组件制作页面实现返回按钮实战项目购物车页面将购物车页面配置的路由中实战项目实战项目购物车页面在home首页，商品详情页面中的购物车按钮增加跳转事件实现goto跳转方法在顶部工具栏中插槽中绑定goto方法，并传入“cart”路由路径实战项目购物车页面在home首页中的购物车按钮增加跳转事件实现goto跳转方法在顶部工具栏中插槽中绑定goto方法，并传入“cart”路由路径在GoodDetail商品详情页中的购物车按钮增加跳转事件实现goto跳转方法在顶部工具栏中插槽中绑定goto方法，并传入“cart”路由路径实战项目实战项目购物车页面购物车页面的数据应来源于vuex全局变量在src/store/index.js全局配置文件中定义购物车的数据结构state定义数据结构实现全局变量同步方法初始化购物车initCart增加购物车单品数量increaseCart实战项目实战项目购物车页面在src