第13章 Vue工程項(xiàng)目實(shí)戰(zhàn)

第13章Vue工程項(xiàng)目實(shí)戰(zhàn)

課程目標(biāo)本章講解Vue在實(shí)戰(zhàn)中的運(yùn)用使用Vue完整地開發(fā)移動端App學(xué)會組件化、模塊化的開發(fā)方式。掌握一定的前端開發(fā)技巧移動端1像素邊框Flex彈性布局等移動端常用開發(fā)技巧。2課程內(nèi)容項(xiàng)目分析工程化項(xiàng)目搭建圖標(biāo)字體使用模擬后臺數(shù)據(jù)Flex彈性布局組件化開發(fā)Nginx服務(wù)器安裝和配置項(xiàng)目打包3

項(xiàng)目分析4使用Vue.js開發(fā)一個(gè)手機(jī)單詞本W(wǎng)ebAPP。項(xiàng)目功能技術(shù)分析：使用axios

與后端數(shù)據(jù)交互；使用vue-router做前端路由；實(shí)現(xiàn)單頁面應(yīng)用，最大程度組件化；圖標(biāo)字體使用；移動端1像素邊框；cssstickyfooter布局；flex彈性布局。

工程化項(xiàng)目搭建vue-cli一個(gè)腳手架工具能夠搭建目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測試等。是否選擇使用ESLint管理代碼(選擇Y則默認(rèn)開啟)5兩種登錄方式，如圖所示。6項(xiàng)目準(zhǔn)備工作登錄界面7resource目錄Img標(biāo)注目錄中主要存放圖片。img公式表示：window.devicePixelRatio=物理像素/dipsPSD標(biāo)注SVG標(biāo)注項(xiàng)目資源準(zhǔn)備標(biāo)注尺寸彈性布局Flex（FlexibleBox）用來為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。任何一個(gè)容器都可以指定為Flex布局。如下代碼：#box{display:flex;width:500px;height:300px;border:10pxsolidred;}圖標(biāo)字體制作IcoMoon網(wǎng)站制作圖標(biāo)字體在線生成工具，可以將.svg文件生成字體圖標(biāo),、矢量圖。iconfont減少頁面上圖片的使用，減少了請求次數(shù)，提高了性能。IcoMoon網(wǎng)址：https://icomoon.io/app/#/select，打開網(wǎng)站后效果如圖所示。9IcoMoon網(wǎng)站如果沒有SVG圖標(biāo)，可以選擇在線免費(fèi)的圖標(biāo)，這里講解導(dǎo)入本地文件，從本地導(dǎo)入SVG文件，如圖所示步驟解壓、運(yùn)用。將fonts和style復(fù)制到項(xiàng)目，在頁面引入style文件后，就可以使用。如圖所示。使用圖標(biāo)字體項(xiàng)目目錄設(shè)計(jì)src目錄components目錄存放組件文件，創(chuàng)建一個(gè)子目錄，在子目錄中創(chuàng)建組件。assets的目錄，包含一些公共的資源main.js入口文件，App.vue文件是整個(gè)頁面的vue實(shí)例的文件。12

項(xiàng)目目錄結(jié)構(gòu)13基于Vue的UI插件庫ElementUI和AntDesignVueVue引入ElementUI插件庫、AntDesignVue插件庫兩種方式，首先來學(xué)習(xí)，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，并傳入一個(gè)全局配置對象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});//入一個(gè)全局配置對象newVue({render:h=>h(App),}).$mount('#app')15

AntDesignVue再介紹另一個(gè)常用的UI插件庫AntDesignVue。這里引入版本是

"ant-design-vue":

"^1.7.8"（注意版本要Vue的版本匹配，否則會報(bào)錯(cuò)）組件完整引入?yún)⒖家韵麓a，需要注意的是，樣式文件需要單獨(dú)引入//

注意版本"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')組件化開發(fā)WebApp頁面代碼使用vue-router實(shí)現(xiàn)在static目錄下創(chuàng)建css目錄，并拷貝reset.css文件在css目錄中。默認(rèn)樣式重置，使用官網(wǎng)提供標(biāo)準(zhǔn)的reset樣式。最后在index.html中使用link標(biāo)簽引入reset.css文件。16下面就來開發(fā)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="請輸入驗(yàn)證碼"/><imgv-bind:src="verifyImg"v-on:click="sendSms()"/></div>如圖所示是單詞本APP接口文檔部分內(nèi)容，實(shí)現(xiàn)手機(jī)號碼登錄的后臺接口說明。使用axios調(diào)用后臺接口從文檔中可以看出調(diào)用手機(jī)號碼登錄的接口名稱，以及調(diào)用接口請求參數(shù)，應(yīng)答格式，以及應(yīng)答格式參數(shù)類型，調(diào)用接口相關(guān)錯(cuò)誤編碼。并提供接口調(diào)用示例。調(diào)用示例：/soya/apps/testdb/server/?action=user.loginByMobile&mobileverifyCodeSms=8975根據(jù)文檔調(diào)用接口讀懂接口文檔后，實(shí)現(xiàn)手機(jī)號碼登錄功能。手機(jī)號碼登錄需要輸入手機(jī)號碼和手機(jī)驗(yàn)證碼，那就需要調(diào)用兩個(gè)接口一個(gè)根據(jù)手機(jī)號碼發(fā)送驗(yàn)證碼接口，一個(gè)使用手機(jī)號和驗(yàn)證碼登錄接口。先來調(diào)用手機(jī)驗(yàn)證碼接口，編寫sendMobileSms函數(shù)，使用axios插件調(diào)用后臺接口。20//使用手機(jī)登錄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("請輸入手機(jī)號碼與校驗(yàn)碼")}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')}})}},具體業(yè)務(wù)邏輯開發(fā)編寫sendSms函數(shù)調(diào)用圖片驗(yàn)證碼，參考接口文檔調(diào)用user.createVerifyImg接口，并把返回的圖片綁定到this.verifyImg上。21//驗(yàn)證碼圖片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);})},具體業(yè)務(wù)邏輯開發(fā)其他功能模塊參考教材22項(xiàng)目打包打包修改配置修改靜態(tài)文件路徑“/”設(shè)置生產(chǎn)環(huán)境項(xiàng)目打包vue.config.js配置完成，打開cmd運(yùn)行的命令cnpmrunbuild打包，以及目錄打包結(jié)構(gòu)。安裝nginx服務(wù)器及配置打包修改配置Vue項(xiàng)目打包后需要部署在服務(wù)器上，才可以使用。如何安裝nginx服務(wù)器，以及在nginx中配置反向代理進(jìn)行跨域。安裝步驟參考教材nginx部署Vue項(xiàng)目打包好的dist目錄下的所有文件，復(fù)制到安裝nginx的服務(wù)器