官网项目完成总结
目錄
前言：
1.總結（個人感受）
2.rem適配[1920*1080設計圖]
2.1 在static目錄下新建js文件 page:flexble
2.2? 在assets文件夾下新建css文件
2.3 在nuxt.config.js設置配置
2.4 頁面中使用
3. 登錄注冊頁
4.seo優化
需求：
?實現：
?在頁面里面：
?nuxt官網地址：
5.nuxt 使用VueAwesomeSwiper插件，展示輪播及縮略圖
6.IntersectionObserver API 使用教程
7.IE11的CSS兼容性問題
8.pc端網頁屏幕自適應適配方案（rem）
9.后臺返回圖形驗證碼 前端如何處理
10.nuxt中文官網
11.好用的日期處理插件day.js
前言：
開發完成的這個項目是基于nuxt.js框架和typescript語法的服務端渲染項目，具有良好的SEO體驗。目前項目處于預發布階段。開發用時約30天，測試約15天，共約26個頁面，接口約50個，封裝了一些公共組件，也用到一些三方組件，如seiper輪播圖插件，加密插件、day.js插件。
兼容：項目兼容幾乎所有瀏覽器，IE兼容到11
重點功能：SEO搜索引擎優化、直播功能、直播回顧功能、權限驗證
?
1.總結（個人感受）
1.對于UI頁面的精確度已經達到了慘絕人寰的程度，UI人員精確到1px就罷了，今天跑過來說調整一下這個地方，明天又跑來說這個地方再改下…（絕對是巨坑，最坑沒有之一，浪費LZ大量的時間和精力，無力吐槽…）
2.nuxt.js框架的使用，是有坑的，比如說獲取window對象，比如獲取vue對象，還有個大坑就是，因為是服務端渲染。一般基地址就是兩個，一個開發地址一個線上地址，但是在這里至少需要3個地址，一個開發的，一個客戶端請求的，一個服務器請求的，要做判斷區分。
3.項目中的首頁大量使用seiper輪播圖插件，高版本比如7兼容性不好，項目用的4，但是也存在問題，一個巨坑是縮略圖輪播，thumbs老是報錯（初始化正常，切換tab欄回去的時候報錯，刷新頁面就好），說找不到addclass，位置在init 7700多行，死活排查不出來，最后我是通過在錯誤頁面強行使用this.$router.go(0)刷新頁面。
4.關于三方插件，如時間格式轉換的，推薦day.js插件，非常好用。再比如加密插件,使用的是crypto.js加密插件，使用也是非常簡單，存的是時候加密一下，取出來的時候再解密一下
5.使用如elementUI組件庫的時候，要修改它們樣式，記得使用：：v-deep?
2.rem適配[1920*1080設計圖]
2.1 在static目錄下新建js文件 page:flexble
(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {// var rem = docEl.clientWidth / 10// docEl.style.fontSize = rem + 'px'var width = docEl.getBoundingClientRect().width// 當屏幕超過1920px以后就不在隨著屏幕的變大而變大了if (width / dpr > 1920) {width = 1920 * dpr}// 當屏幕小于1300px以后就不再隨著屏幕的變小而變小了// if (width / dpr < 1300) {// width = 1300 * dpr// }var rem = width / 19.2docEl.style.fontSize = rem + 'px'window.rem = rem}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)} }(window, document))2.2? 在assets文件夾下新建css文件
@use "sass:math";$base-width: 1920; $base-font_size: math.div(1920 , 19.2);@function rem($px){@return math.div($px , $base-font_size) * 1rem;// @return $px * 1px }/** 字體 **/ $large-font_size: 16px ; $medium-font_size: 14px; $small-font_size: 12px;$title-size: rem(44);/** 顏色 **/ $primary-color: #C90000; $bottom-color: #D10000;$oss_url:'//oss-guanwang.yuceyingjia.com/'; $base-oss_url: '//oss-guanwang.yuceyingjia.com/newGWWeb/';:export {ossUrl: $base-oss_url; }2.3 在nuxt.config.js設置配置
// 引入全局scss 變量styleResources: {// your settings herescss: ['./assets/css/variables.scss'],hoistUseStatements: true // Hoists the "@use" imports. Applies only to "sass", "scss" and "less". Default: false.}, script: [{ src: '/js/page-flexible.js'}]2.4 頁面中使用
font-size:rem(15)3. 登錄注冊頁
登錄、注冊、忘記密碼（重置）均在一個頁面上，有密碼校驗、本地持久化，記住密碼、短信驗證碼、加密、路由跳轉等功能
?
?
?
?封裝成一個組件（使用cookie）：
<template><div><div class="container1">{{$route.query.zc}}<!-- 左側注冊區域 --><div class="left"><div class="zhuce"><!-- logo title --><div class="logo"><img src="~/assets/img/login/LOGO.png" alt="" /></div><!-- 注冊表單區域 --><div class="formTable"><el-form :rules="rules" ref="formData" :model="formData"><el-form-item prop="mobile" v-show="wangji || !forGet"><el-inputv-model="formData.mobile"placeholder="請輸入您的手機號"></el-input></el-form-item><el-form-itemprop="email"class="article"v-if="cLogin || forGet "v-show="wangji|| !forGet"><el-inputv-model="formData.email"maxlength="40"placeholder="手機驗證碼"class="input"></el-input><span class="span" @click="getCMS" v-if="cLogin "><span v-show="isC == false">獲取驗證碼</span><span v-show="isC == true">{{isActive ? "重新獲取" : count + "s"}}</span></span></el-form-item><!-- <el-form-item prop="Yzm" v-if="cLogin || forGet" v-show="wangji|| !forGet"> --><el-form-item prop="Yzm" v-if="imgUrl"><el-inputv-model="formData.Yzm"maxlength="40"placeholder="圖形驗證碼"class="input"></el-input><img :src="imgUrl" alt="" class="img"/></el-form-item><el-form-item prop="miMa" v-if="!forGet"><el-inputv-model="formData.miMa"placeholder="您的賬號密碼"></el-input></el-form-item><!-- 修改密碼區域 forGet控制 --><el-form-item prop="newPassword" v-if="!wangji && forGet"><el-input type="password" placeholder="請輸入新密碼" v-model="formData.newPassword"></el-input></el-form-item><el-form-item prop="repPassword" v-if="!wangji&& forGet"><el-input type="password" placeholder="請輸入確認密碼" v-model="formData.repPassword"></el-input></el-form-item><!-- 記住密碼、忘記密碼區域 --><div class="middle" v-if="!cLogin"><div class="left"><el-checkbox v-model="checked">記住密碼</el-checkbox></div><div class="right" v-if="!forGet"><span @click="missCode">忘記密碼</span></div></div><!-- 提交表單按鈕 --><el-form-item align="center" class="div" v-if="!wangji"><el-buttonsize="mini"type="primary":loading="loading"@click="submitForm('formData')">{{buttonText}}</el-button></el-form-item><el-form-item align="center" class="div" v-else><el-buttonsize="mini"type="primary":loading="loading"@click="next">下一步</el-button></el-form-item><!-- 底部 還沒有賬號？ 立即注冊區域 --><div class="bottom" v-if="!wangji" ><span class="left">{{cLogin ? '已有賬號？':'還沒有賬號？'}}</span><span class="right" @click="clickLogin">{{cLogin ? '立即登錄':'立即注冊'}}</span></div></el-form></div></div></div><!-- 右側圖片區域 --><div class="right"><img src="~/assets/img/login/bg.png" alt="" /><div class="img"><img src="~/assets/img/login/login_slogin.png" alt=""></div><div class="zhezhao"></div><!-- <div class="textIMG"><h3>讓投資更簡單更理性</h3><p>Make investment simpler and</p><p>more rational</p></div> --></div></div></div> </template><script> import CryptoJS from "crypto-js";//加密import { isvalidUsername, isvalidMobile, isvalidEmail, code, password } from '@/utils/validate' import axios from 'axios' // import { Alert } from 'element-ui'const TIME_COUNT = 60 export default {props: {loading: { // 是否點擊確定按鈕type: Boolean,default: false}},methods: {//提交表單submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {// 校驗通過，提交數據this.getIMGCode()//調圖形驗證碼，默認為空if(this.forGet){// 重置密碼this.getReset()}else{if(this.cLogin===false){// 做登錄this.getLogin ()}else{// 做注冊this.getZhuCe ()}}} else {// 驗證不通過return false}})},// 封裝的倒計時效果getCMS () {this.isC = trueif (!this.timer) {this.count = TIME_COUNTthis.isActive = falsethis.getCMSCode() //獲取驗證碼（ip）----60秒內不能重復發送--this.timer = setInterval(() => {if (this.count > 0 && this.count <= TIME_COUNT) {this.count--} else {this.isActive = trueclearInterval(this.timer)this.timer = null}}, 1000)}},// 做登錄async getLogin () {let data1 = await axios.post("https://app-gw-test.365ycyj.com/UserApi/50000/UserLogin", {username: this.formData.mobile,password: this.formData.miMa,})console.log(data1, 'login--------------11111111111111111')if(data1.data.Msg == 'success'){this.$message({message: '恭喜登錄成功！',type: 'success'});console.log(data1.data,'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww');// 如果記住密碼的話if(this.checked){localStorage.setItem("rememberPsw",true)let cipherText = CryptoJS.AES.encrypt(this.formData.miMa, "secretkey123").toString();this.$store.commit('UPDATE_ALL_STATE',{accessToken:data1.data.Data.Token,userInfo:this.formData.mobile,pwd:this.formData.miMa})this.$cookies.set("accessToken",data1.data.Data.Token,{maxAge:60*60*24*3}) //保存3天this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*24*3}) //保存3天this.$cookies.set("pwd",cipherText,{maxAge:60*60*24*3}) //保存3天}else{// 不記住密碼，不保存密碼localStorage.setItem("rememberPsw",false)let cipherText = CryptoJS.AES.encrypt(this.formData.miMa, "secretkey123").toString();this.$store.commit('UPDATE_ALL_STATE',{accessToken:data1.data.Data.Token,userInfo:this.formData.mobile})// this.$cookies.set("pwd",'') //// this.$cookies.set("accessToken",'') //this.$cookies.set("accessToken",data1.data.Data.Token,{maxAge:60*60*4}) //保存4小時this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*4}) //保存4小時this.$cookies.set("pwd",cipherText,{maxAge:60*60*4}) //保存4小時// this.$cookies.set("accessToken",data1.data.Data.Token,{maxAge:60*60*4}) //保存4小時// this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*4}) //保存4小時}this.$router.push(this.$route.query.return_url || '/') //登錄后跳轉到原位置或者首頁// this.$store.commit('UPDATE_ALL_STATE',{accessToken:data1.data.Data.Token2,userInfo:this.formData.mobile})// this.$cookies.set("accessToken",data1.data.Data.Token2,{maxAge:60*60*24*3}) //保存3天// this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*24*3}) //保存3天// this.$router.go(0); //刷新頁面}else {this.$message.error(data1.data.Msg);// this.$router.push({path: '/', query:{id: 3}});}},// 做注冊async getZhuCe () {let data1 = await axios.post("https://app-gw-test.365ycyj.com/UserApi/50000/MReg", {tel: this.formData.mobile,pwd: this.formData.miMa,smscode:this.formData.email,app: '官網',issendmsg: '1',qudaotype: '2',clienttype: '0',mac: '',clientagent: 'pc_ycyj',qudaoma: '',})console.log(data1, 'login--------------11111111111111111')if(data1.data.Msg == 'success'){this.$message({message: '恭喜您注冊成功！請登錄',type: 'success'});this.cLogin = false //去登陸// 如果是注冊的話，那么登錄后應該下載軟件this.isDownPC = true// this.$store.commit('UPDATE_ALL_STATE',{accessToken:data1.data.Data.Token2,userInfo:this.formData.mobile})// this.$cookies.set("accessToken",data1.data.Data.Token2,{maxAge:60*60*24*3}) //保存3天// this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*24*3}) //保存3天// this.formData.mobile = '' // 關閉彈框// this.$router.go(0); //刷新頁面}else {this.$message.error(data1.data.Msg);}},// 接口--獲取短信驗證碼--ip限制--默認為空GetSMSCodeByWebasync getCMSCode(){let data1 = await axios.post("https://app-gw-test.365ycyj.com/UserApi/50000/GetSMSCodeByWeb", {tel: this.formData.mobile || '15805494663',imgcode:this.formData.Yzm ||'',yingjiatype:'0',type:'0'})console.log(data1,'ceshi 短信驗證碼……………………………………………………');},// 接口--獲取圖形驗證碼--ip限制async getIMGCode(){let data1 = await axios.post("https://app-gw-test.365ycyj.com/UserApi/50000/GetImgCodeByWeb")if(data1.Data){this.imgUrl = data1.Data.ImgSrc}},// 做忘記密碼--密碼重置async getReset () {let data1 = await axios.post("https://app-gw-test.365ycyj.com/UserApi/50000/ResetPassword", {tel: this.formData.mobile,password: this.formData.newPassword,smscode:this.formData.email,clienttype: '0',})console.log(data1, 'getReset--------------11111111111111111')if(data1.data.Msg == 'success'){this.$message({ message: '恭喜您重置成功！',type: 'success'});// 如果記住密碼的話if(this.checked){this.$store.commit('UPDATE_ALL_STATE',{accessToken:data1.data.Data.Token,userInfo:this.formData.mobile})this.$cookies.set("accessToken",data1.data.Data.Token,{maxAge:60*60*24*3}) //保存3天this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*24*3}) //保存3天}else{this.$store.commit('UPDATE_ALL_STATE',{accessToken:data1.data.Data.Token,userInfo:this.formData.mobile})this.$cookies.set("accessToken",data1.data.Data.Token,{maxAge:60*60*4}) //保存4小時this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*4}) //保存4小時}this.$router.push(this.$route.query.return_url || '/') //登錄后跳轉到原位置或者首頁// this.cLogin = false //去登陸// this.$store.commit('UPDATE_ALL_STATE',{accessToken:data1.data.Data.Token2,userInfo:this.formData.mobile})// this.$cookies.set("accessToken",data1.data.Data.Token2,{maxAge:60*60*24*3}) //保存3天// this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*24*3}) //保存3天// this.formData.mobile = '' // 關閉彈框// this.$router.go(0); //刷新頁面}else {this.$message.error(data1.data.Msg);}},// missCode+clickLogin做忘記密碼、注冊、登錄切換效果missCode(){this.wangji = truethis.forGet=!this.forGetthis.cLogin = true},clickLogin(){this.cLogin=!this.cLoginthis.forGet = false},// 點擊下一步next(){this.wangji = false}},data () {var checkNickName = (rule, value, callback) => {if (!value) {callback(new Error('姓名不能為空'))} else if (value.length > 30) {callback(new Error('最多30個字符'))} else {callback()}}var checkMobile = (rule, value, callback) => {if (!value) {callback(new Error('手機號不能為空'))} else if (!isvalidMobile(value)) {callback(new Error('手機號不合法'))} else {callback()}}var checkCode = (rule, value, callback) => {if (!value) {callback(new Error('驗證碼不能為空'))} else if (!code(value)) {callback(new Error('驗證碼不合法'))} else {callback()}}var checkPass = (rule, value, callback) => {if (value === '') {callback(new Error('密碼不能為空'))}else if (!password(value)) {callback(new Error('密碼不合法'))}else {callback()}}var checkYZM = (rule, value, callback) => {if (!value) {callback(new Error('圖形驗證碼不能為空'))} else if (!code(value)) {callback(new Error('圖形驗證碼不合法'))} else {callback()}}// 校驗新密碼const validatePassword = (rule, value, callback) => {// console.log('value', value)if(value.length < 6) {callback(new Error('新密碼不能少于6位'))}else {callback()}};// 校驗確認密碼是否一致const validateRepPassword = (rule, value, callback) => {if(value !== this.formData.newPassword) {callback(new Error('兩次輸入的密碼不一致'))}else {callback()}};return {rules: {mobile: [{ required: true, validator: checkMobile, trigger: 'blur' }],email: [{ required: true, validator: checkCode, trigger: 'blur' }],miMa: [{ required: true, validator: checkPass, trigger: 'blur' }],Yzm: [{ required: true, validator: checkYZM, trigger: 'blur' }],newPassword: [{ required: true, message: '新密碼不能為空', trigger: 'blur' },{ validator: validatePassword, trigger: 'blur' }],repPassword: [{ required: true, message: '確認密碼不能為空', trigger: 'blur' },{ validator: validateRepPassword, trigger: ['change', 'blur'] }]},ip: '1.1.1.1',area: '北京市',brower: 'chrome',os: 'windows7',// mobile:this.formData.mobile,imgUrl: "",formData: {mobile:this.$cookies.get('userInfo')? CryptoJS.AES.decrypt(this.$cookies.get('userInfo'), "secretkey123").toString(CryptoJS.enc.Utf8):'',email: '',miMa:this.$cookies.get('pwd')? CryptoJS.AES.decrypt(this.$cookies.get('pwd'), "secretkey123").toString(CryptoJS.enc.Utf8):'',//解密code: "",Yzm: '',newPassword:'',repPassword:''},isActive: false,count: 0,timer: null,isC: false,cLogin:false,//切換登錄和注冊checked:false,//是否記住密碼forGet:false,//是否點擊忘記密碼wangji:false,//忘記密碼密碼isDownPC:false,//是不是下載pc軟件borHeight:1000,//瀏覽器可視區域的高度}},async created() {// 如果是點擊注冊，那么頁面顯示注冊if(this.$route.query.zc == 1){this.cLogin = true}// 這里測試同一ip超過5次哪個 ，有數據就會顯示圖形驗證碼// const data1 = await this.$api.UserApi.GetImageVeriFicationCode();// this.imgUrl = data1.ImgSrc// this.getIMGCode() //這個是獲取圖形驗證碼、ip限制的},mounted () {if(localStorage.getItem("rememberPsw") == 'true'){this.checked = true}else if(localStorage.getItem("rememberPsw") == 'false'){this.checked = false}},// 登錄按鈕的文字顯示computed: {buttonText() {if(this.forGet === true){return "確定"}else{if(this.cLogin){return "快速注冊領取3天VIP"}else if(!this.cLogin){return "立即登錄"}}}}} </script><style lang="scss" scoped>.span {position: absolute;top: 16.2%;right: 8%;color: #c90000;font-family: PingFang SC;font-size: rem(18); } // 修改提交按鈕的樣式 .el-button{outline: 0 none;border: 0 none;width: rem(600);height: rem(60);background: #C90000;margin-top: rem(50);font-size: rem(30);font-family: PingFang SC; font-weight: 600; color: #FFFFFF; } // 修改輸入框的顏色 ::v-deep .el-input__inner{background-color: #f6f6f6; } // 修改輸入框的邊框樣式 ::v-deep .el-input__inner{border: 1px solid rgba(255,255,255,0);border-bottom: 2px solid #f6f6f6;font-size: rem(20);color: #1E1E1E;margin: rem(20) 0;border-radius: 0; } // 修改校驗錯誤時的樣式 ::v-deep .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {border-color: #f6f6f6;border-bottom: 2px solid #C90000; } // 修改校驗錯誤時彈出字體 ::v-deep .el-form-item__error {color: #C90000;font-size: rem(16);} // 修改選中記住密碼樣式 ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {background-color: #C90000;border-color: #C90000; } ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {width: rem(94);height: rem(23);font-size: rem(16);font-family: PingFang SC;font-weight: 400;color: #1E1E1E; } ::v-deep .el-checkbox{width: rem(94);height: rem(23);font-size: rem(16);font-family: PingFang SC;font-weight: 400;color: #1E1E1E; } ::v-deep .el-checkbox__label {font-size: rem(16); }.container1 {height:100%;width:100%;display: flex;box-sizing: border-box;.left {flex: 3;overflow: hidden;width: 70%;background-color: #f6f6f6;.logo {width: rem(296);height: rem(70);margin: rem(90) rem(422) rem(60);}.formTable{width: rem(600);height: 100%;margin: 0 rem(270);.middle{display: flex;justify-content: space-between;.right{text-align: right;width: 93px;height: rem(23);font-size: rem(16);font-family: PingFang SC;font-weight: 400;color: #C90000;}.left{width: rem(94);height: rem(23);font-size: rem(16);font-family: PingFang SC;font-weight: 400;color: #1E1E1E;}}.bottom{width: rem(238);height: rem(23);margin:rem(30) auto;line-height: rem(23);text-align: center;.left{color: #1F1F1F;font-size: rem(14);}.right:hover{cursor: pointer;}.right{color: #C90000;font-size: rem(16);font-family: PingFang SC;font-weight: 700;}}}}.right {position: relative;width: 100%;flex: 2;overflow: hidden;height: 100%;.textIMG{position: absolute;top: 20%;left: 0;h3{margin-left: rem(30);font-size: rem(26);font-family: PingFang SC;font-weight: 600;color: #C90000;}p{margin-left: rem(30);margin-top: rem(10);font-size: rem(20);font-family: D-DIN;font-weight: bold;color: #3B3B3B;}}.img{position: absolute;top: rem(200);left: rem(60);width: rem(448);height: rem(138);z-index: 2;img{width: 100%;height: 100%;}}.zhezhao{position: absolute;height: 100%;top: 0;left: 0;width: rem(140);background-color: #f2f2f2;opacity: 0.7;z-index: 1;}img {width: 100%;height: 100%;}}.img {overflow: hidden;width: rem(200);height: rem(50);position: absolute;bottom: 23%;right: 0%;} } </style>4.seo優化
需求：
?實現：
其實就是設置nuxt.config.js里面的config中設置全局head對象，也可在每個頁面的head中設置
?在頁面里面：
<template><h1>{{ title }}</h1> </template> <script>export default {data() {return {title: 'Home page'}},head() {return {title: this.title,meta: [{hid: 'description',name: 'description',content: 'Home page description'}]}}} </script>?
?nuxt官網地址：
Nuxt - Meta Tags and SEOhttps://nuxtjs.org/docs/features/meta-tags-seo
5.nuxt 使用VueAwesomeSwiper插件，展示輪播及縮略圖
nuxt 使用VueAwesomeSwiper插件，展示輪播及縮略圖 - 小白&小菜 - 博客園參考地址：https://github.com/surmon-china/vue-awesome-swiper vue-cli 腳手架使用swiper的步驟：參考地址：https://www.cnblhttps://www.cnblogs.com/duanzhenzhen/p/12362129.html
6.IntersectionObserver API 使用教程
IntersectionObserver API 使用教程 - 阮一峰的網絡日志https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
7.IE11的CSS兼容性問題
IE11的CSS兼容性問題 - 云+社區 - 騰訊云 最近測試給了我一大堆BUG，一瞅發現全是IE11的。吐槽一下這個瀏覽器真的比較特立獨行。很多默認的樣式跟別的瀏覽器不同，而且最明顯的一點應該是padding左...https://cloud.tencent.com/developer/article/1843613
?
8.pc端網頁屏幕自適應適配方案（rem）
pc端網頁屏幕自適應適配方案（rem） - 簡書1 、安裝flexible和postcss-px2rem 2、 在main.js 引入lib-flexible *3、刪除public/index.html 中的meta標記...https://www.jianshu.com/p/96b4ae1dc5cf?from=message
?
9.后臺返回圖形驗證碼 前端如何處理
后臺返回圖形驗證碼 前端如何處理_IT_iosers的博客-CSDN博客_驗證碼返回前端測試后端返回圖形驗證碼console 打印的結果此時前端用axios請求如果直接去拿返回值，就會發現…額…亂碼了啊（數據流）前端處理用原生 轉化 getImg() { var that = this; var windowUrl = window.URL || window.webkitURL; //處理瀏覽器兼容性 var xhr = new XMLHttpRequest(); var url = `${window.API_BASE_URIhttps://blog.csdn.net/IT_iosers/article/details/120668037?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163548460316780269877007%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163548460316780269877007&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3-120668037.first_rank_v2_pc_rank_v29&utm_term=%E5%9B%BE%E5%BD%A2%E9%AA%8C%E8%AF%81%E7%A0%81+%E5%89%8D%E7%AB%AF&spm=1018.2226.3001.4187
?
10.nuxt中文官網
安裝設置 - Nuxt TypeScript
?
11.好用的日期處理插件day.js
下載安裝全局安裝后
在頁面中就可隨意使用
{{$dayjs(item.StartTime).format("YYYY/MM/DD")}}總結
- 上一篇： 印象派绘画在现代艺术发展中的地位和作用
- 下一篇： [转载]你手里期权值多少钱？写给上市公司