第13章 Vue工程项目实战

第13章Vue工程项目实战

课程目标本章讲解Vue在实战中的运用使用Vue完整地开发移动端App学会组件化、模块化的开发方式。掌握一定的前端开发技巧移动端1像素边框Flex弹性布局等移动端常用开发技巧。2课程内容项目分析工程化项目搭建图标字体使用模拟后台数据Flex弹性布局组件化开发Nginx服务器安装和配置项目打包3

项目分析4使用Vue.js开发一个手机单词本WebAPP。项目功能技术分析：使用axios

与后端数据交互；使用vue-router做前端路由；实现单页面应用，最大程度组件化；图标字体使用；移动端1像素边框；cssstickyfooter布局；flex弹性布局。

工程化项目搭建vue-cli一个脚手架工具能够搭建目录结构、本地调试、代码部署、热加载、单元测试等。是否选择使用ESLint管理代码(选择Y则默认开启)5两种登录方式，如图所示。6项目准备工作登录界面7resource目录Img标注目录中主要存放图片。img公式表示：window.devicePixelRatio=物理像素/dipsPSD标注SVG标注项目资源准备标注尺寸弹性布局Flex（FlexibleBox）用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。如下代码：#box{display:flex;width:500px;height:300px;border:10pxsolidred;}图标字体制作IcoMoon网站制作图标字体在线生成工具，可以将.svg文件生成字体图标,、矢量图。iconfont减少页面上图片的使用，减少了请求次数，提高了性能。IcoMoon网址：https://icomoon.io/app/#/select，打开网站后效果如图所示。9IcoMoon网站如果没有SVG图标，可以选择在线免费的图标，这里讲解导入本地文件，从本地导入SVG文件，如图所示步骤解压、运用。将fonts和style复制到项目，在页面引入style文件后，就可以使用。如图所示。使用图标字体项目目录设计src目录components目录存放组件文件，创建一个子目录，在子目录中创建组件。assets的目录，包含一些公共的资源main.js入口文件，App.vue文件是整个页面的vue实例的文件。12

项目目录结构13基于Vue的UI插件库ElementUI和AntDesignVueVue引入ElementUI插件库、AntDesignVue插件库两种方式，首先来学习，Vue引入ElementUI插件库的方法。CDN引入，在页面上引入JavaScript和CSS文件，即可开始使用。<!--引入样式--><linkrel="stylesheet"href="/element-ui/lib/theme-chalk/index.css"><!--引入组件库--><scriptsrc="/element-ui/lib/index.js"></script>14

引入ElementUInpm安装，推荐使用npm的方式安装，能更好地和webpack打包工具配合使用。如何引入完整的Element，并传入一个全局配置对象npmielement-ui-SimportVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';//Vue.use(ElementUI);Vue.use(Element,{size:'small',zIndex:3000});//入一个全局配置对象newVue({render:h=>h(App),}).$mount('#app')15

AntDesignVue再介绍另一个常用的UI插件库AntDesignVue。这里引入版本是

"ant-design-vue":

"^1.7.8"（注意版本要Vue的版本匹配，否则会报错）组件完整引入参考以下代码，需要注意的是，样式文件需要单独引入//

注意版本"ant-design-vue":

"^1.7.8"，在package.json中修改版本$npminstallant-design-vue@next–saveimportVuefrom'vue';importAppfrom'./App.vue';import{DatePicker}from"ant-design-vue";import"ant-design-vue/dist/antd.css";//or'ant-design-vue/dist/antd.less'Vue.use(DatePicker);newVue({render:h=>h(App),}).$mount('#app')组件化开发WebApp页面代码使用vue-router实现在static目录下创建css目录，并拷贝reset.css文件在css目录中。默认样式重置，使用官网提供标准的reset样式。最后在index.html中使用link标签引入reset.css文件。16下面就来开发Login.vue组件，代码如下：//省略部分代码<inputclass="input"type="text"v-model="userName"placeholder="请输入用户名"/></div><divclass="txtWrapper"><divclass="imgwrapper"><imgsrc="../../assets/password.png"width="100%"/></div><inputclass="input"type="password"v-model="password"placeholder="请输入6-16位密码"/></div><divclass="txtWrapper"><divclass="imgwrapper"><imgsrc="../../assets/code.png"width="100%"/></div><inputclass="input"type="text"width="40px"v-model="verifyCode"placeholder="请输入验证码"/><imgv-bind:src="verifyImg"v-on:click="sendSms()"/></div>如图所示是单词本APP接口文档部分内容，实现手机号码登录的后台接口说明。使用axios调用后台接口从文档中可以看出调用手机号码登录的接口名称，以及调用接口请求参数，应答格式，以及应答格式参数类型，调用接口相关错误编码。并提供接口调用示例。调用示例：/soya/apps/testdb/server/?action=user.loginByMobile&mobileverifyCodeSms=8975根据文档调用接口读懂接口文档后，实现手机号码登录功能。手机号码登录需要输入手机号码和手机验证码，那就需要调用两个接口一个根据手机号码发送验证码接口，一个使用手机号和验证码登录接口。先来调用手机验证码接口，编写sendMobileSms函数，使用axios插件调用后台接口。20//使用手机登录sendMobileSms(){varurl="/soya/apps/testdb/server/?action=user.sendVerifySms&mobile="+this.mobilethis.$axios({method:'post',url:url,}).then(res=>{console.log(res);})},loginMobile(){if(this.mobile==""||this.verifyCodeMobile==""){this.$message.success("请输入手机号码与校验码")}else{varurl='/soya/apps/testdb/server/?action=user.loginByMobile'this.$axios({method:'post',url:url,params:{mobile:this.mobile,verifyCodeSms:this.verifyCodeSms},}).then(res=>{//console.log(res.data.ret)//console.log(res.data.msg)if(res.data.ret==0){setCookie('userName',this.mobile,1000*60)this.$router.push('/WordList')}})}},具体业务逻辑开发编写sendSms函数调用图片验证码，参考接口文档调用user.createVerifyImg接口，并把返回的图片绑定到this.verifyImg上。21//验证码图片sendSms(){varurl="/soya/apps/testdb/server/?action=user.createVerifyImg";this.$axios({method:'post',url:url}).then(res=>{this.verifyImg=res.data.data.pic;//console.log(res.data.data.pic);})},具体业务逻辑开发其他功能模块参考教材22项目打包打包修改配置修改静态文件路径“/”设置生产环境项目打包vue.config.js配置完成，打开cmd运行的命令cnpmrunbuild打包，以及目录打包结构。安装nginx服务器及配置打包修改配置Vue项目打包后需要部署在服务器上，才可以使用。如何安装nginx服务器，以及在nginx中配置反向代理进行跨域。安装步骤参考教材nginx部署Vue项目打包好的dist目录下的所有文件，复制到安装nginx的服务器