记第一次做网站

最新推荐文章于 2022-03-01 11:26:18 发布

bin_time

最新推荐文章于 2022-03-01 11:26:18 发布

阅读量578

点赞数

文章标签：前端 web前端 vue 多页面

本文链接：https://blog.csdn.net/bin_time/article/details/88188902

版权

记第一次做网站在第一次制作网站之前我完全处于一蒙蔽状态，希望通过这次记录可以收获一些东西。

开门见山
*官网中的注意事项：
1.强制谷歌内核（百度）

	<meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

2.引入公众号图片使用
<meta name=”referrer” content=”never”>
3.在meta中使用关键词和关键描述

<meta name="keywords" content="标签，标签，标签，标签"/> <meta name="description" content="这是描述，这是描述，这是描述，这是描述，这是描述，这是描述。"/>
4.顶部小图标

/*head中写*/
<head>
	<link rel="icon" href="https://file.open.banchengyun.com/1/2019/02/14/895641c880233e0f040789090c9848b0.jpg" type="image/x-icon"/>
</head>

5.移动端适配
5.1 https://www.cnblogs.com/zr123/p/8178740.html移动端适配
5.2https://blog.csdn.net/a419419/article/details/79295799 dpr像素的解释
5.3https://www.zhangxinxu.com/study/201209/vw-vh-to-pixel.html浏览器/显示器宽度
5.4https://www.cnblogs.com/yanayana/p/7066948.html 5大布局的区别和联系
5.2媒体查询来引入不同移动端屏幕的样式或者引入rem.js响应式布局
6.使用框架，网页可以使用蚂蚁金服，后台可以使用iview
7.一般不需要引入字体因为加载的时候大会影响加载时间*

项目中使用了Vue（因为比较熟）
框架使用了ant-design-vue（支持IE9及以上）
安装完框架的时候开发才发现了原来框架里以及设置了字体还有行间距等等东西，哈哈哈哈。字体颜色按照重要程度依次是#333 #666 #999 ，行高一般为字体的1.5倍，但是很奇怪的是在开发的时候发现line-height：1.5和设置line-height为字体的1.5倍px是不一样宽的？

框架说实话在这个项目中没什么使用，只使用到了分页器，因为大部分样式都是设计好的，没有直接使用到
第一步
首先我拿到原型，第一步是先看一下全部的原型心里有个底，知道大概要怎样设置自己的布局，例如哪些东西是很多页面通用的，如果完全一样可以把他打包成一个组件（例如导航，底部，还有相同的轮播图类型等等），然后开始写一些公用的CSS和JS方法。
less

@baseColor:#FFB101;
@baseColor2:#F0A703;
@baseColor3:#28CD66;
@bgColor:#f8f8f8;
@red:#F64031;
/* Display Flex */
.disFlex{display:-ms-flexbox;display:-webkit-flex;display:flex;}
.vertical{display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:column;-ms-flex-direction:column;-webkit-flex-direction:column;}
.vcenterFlex{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;justify-content: center;}
.Flex{-ms-flex:1;-webkit-flex:1;flex:1;}
.Flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.Flex-top{-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;}
.Flex-middle{-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.Flex-bottom{-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end;}
.Flex-center{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
.Flex-right{-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}
.Flex-between{-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.Flex-around{-ms-flex-pack:distribute;-webkit-justify-content:space-around;justify-content:space-around;}

/*行数省略*/
.clamp-1{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1; line-height: 1.5;}
.clamp-2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; line-height: 1.5;}
.clamp-3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3; line-height: 1.5;}
.clamp-4{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4; line-height: 1.5;}

[v-cloak]{display: none;}
img{display:block;max-width: 100%;}
.hide{display:none!important;}

#app{
//字体颜色
}
.f999{
	color: #999
}
.f666{
	color: #666
}
.f555{
	color: #555;
}
.f333{
	color: #333;
}
// 品牌色
.ffbBg{
	background:#ffb101!important;
}
.ffaBg{
	background:#ffa203!important
}


.fffBg{
	background:#fff !important;
}

/*缩放框固定中间两边改变*/
.box{
	width:100%;
	background:#fff;
	.box-con{
		position:relative;
		width:75rem;
		margin:0 auto;
	}
}

JS
js文件一般写获取当前网页路径，获取网址参数，页面跳转方法，请求方法以及必须参数，倒计时，弹出窗口等等等等。。。

//  读取网址参数值
    getUrlParameter : (_parameterName) => {
        var r = window.location.search.substr(1).match(new RegExp("(^|&)" + _parameterName + "=([^&]*)(&|$)", "i"));
        if (r != null) return unescape(r[2]);
        return null;
    },

/*获取根路径*/
window.Host = window.location.href.replace(/(.*)\/(.*)/, '$1/');

//请求方法(一般就封装成一个函数，需要的四个参数一般是static_api:function(_url,_data,success,fail))
window.static_api = (_url, _data, _success, _error) => {
    if (_url.indexOf("http") === 0) _url = _url;
    else _url = douleCom.Host + _url;
    V.loading('请求中...');
    Vue.http.post(_url, Object.assign({token:douleCom.userToken},_data), { emulateJSON: true ,timeout:5000,onTimeout:function(request){
        console.info('超时处理');
    }}).then(function(_res) {
        V.close();
        if(typeof _res.body == 'string') _res.body = JSON.parse(_res.body);
        // 登陆失效
        if(_res.body.info == 'vaildLogin') vaildLogin();
        // 无权限
        if(_res.body.info == 'validAuth') V.error('无权限进入当前页面');
        _success(_res.body);
    }).catch(function(_res) {
        if(_res.status == 0 || !_res.ok) {
            Vue.prototype.$Message.info({
                content: '服务繁忙,请刷新页面...',
                duration: 60,
                closable: true,
                onClose:function(){
                    window.location.reload(true)
                }
            });
        }
        if (_error) _error(_res)
    })
}

组件
导航栏
在这里插入图片描述

Vue.component('doule-header',{
	template:`
			<div class="header box disFlex Flex-middle">
				<div class="box-con vcenterFlex">
					<img src="${require('../image/logo.png')}" class="logo"></img>
					<ul class="nav disFlex Flex-middle">
						<li class="vcenterFlex" @click="Jump('index')">
							<div :class= "{'current':navType == 'index'}" >首页</div>
						</li>
						<li class="vcenterFlex" @click="Jump('about')">
							<div :class= "{'current':navType == 'about'}" >关于XX</div>
						</li>
						<li class="vcenterFlex"" @click="Jump('story')">
							<div :class= "{'current':navType == 'story'}">XXXX</div>
						</li>
						<li class="vcenterFlex"@click="Jump('center')">
							<div :class= "{'current':navType == 'center'}" >XX中心</div>
						</li>
						<li class="vcenterFlex" @click="Jump('news')">
							<div :class= "{'current':navType == 'news'}">新闻资讯</div>
						</li>
						<li class="vcenterFlex" @click="Jump('invest')">
							<div :class= "{'current':navType == 'invest'}">战略投资</div>
						</li>
						<li class="vcenterFlex" @click="Jump('contact')">
							<div :class= "{'current':navType == 'contact'}">联系我们</div>
						</li>
					</ul>
				</div>
			</div>`,
	methods:{
		Jump:function(res){
			// 多页面Vue所以跳转是用window.location.href
			if(res == 'contact'||res =='honour'||res =='advantage'){
				window.location.href = Host + 'about' +'.html?id='+ res
			}else{
				this.navType = res
			    window.location.href = Host + this.navType +'.html'				
			}
		}
	},
	data(){
		return {
			navType:''
		}
	},
	mounted(){
		this.$nextTick(()=>{
			this.navType = window.vm.navType/*获取使用改逐渐页面的navType*/
		})
	},
	props:{
		nav: String
	},
	watch:{
		nav(res){
			/*about页面比较复杂需要监听*/
			this.navType = res
		}
	}
})

在这里插入图片描述
在使用组件的时候必须在页面引入这个组件！然后再HTML中《doule-header》《/doule-header》引入插件。
组件中引入图片使用了 src="${require(’…/image/logo.png’)}"是因为我设置了webpack压缩，在压缩后本地图片名字和路径会发生改变，所以需要在压缩前就获取到这个图片。这样压缩后的路径也会发生改变。同时多页面的组件和Vue-cli中的组件差别不大。
第二步开始制作啦
毫无疑问直接怼。首页遇到的小难点全部都是轮播图
轮播图使用了Vue-awesome-swiper插件（真的爆炸好用）

vue-awesome-swiper的使用
10.使用awesome-swiper的步骤
（1）安装并引入 npm run vue-awesome-swiper --save
import ‘swiper/dist/css/swiper.css’
//这里注意具体看使用的版本是否需要引入样式，以及具体位置。2.54不用引入样式
import { swiper, swiperSlide } from ‘vue-awesome-swiper’//导入组件
（2）加载组件

（3）书写修改标签，区分swiper

（4）Js部分

Window.vm。如果要获取父组件的对象，需要为父组件的标签添加ref属性，然后再获取

交互
项目中的异步交互使用vue-resource插件，有两种使用方式
先引入《script src=“js/vue.js”》《/script》《script src=“js/vue-resource.js”》《/script》
①全局使用
1.基本的使用方法：Vue.http.post(url , data,[option],successcallback,failcallback)
②组件内使用
1.基本的使用方法：this.$http.post(url , data,[option],successcallback,failcallback)
一般为了跨域和限制访问事件 option需要为{emulateJSON：ture，timeout：3000}详见：
https://www.cnblogs.com/chenhuichao/p/8308993.html

在进行交互或者设置缓存的时候，当出现[object , object]错误的时候需要先转为字符串然后再转为JSON格式。转的方法有JSON.stringify(),JSON.parse().

bin_time

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记第一次做网站

记第一次做网站在第一次制作网站之前我完全处于一蒙蔽状态，希望通过这次记录可以收获一些东西。开门见山*官网中的注意事项：1.强制谷歌内核（百度） &lt;meta name="renderer" content="webkit"/&gt; &lt;meta name="force-rendering" content="webkit"/&gt; &lt;meta h
复制链接

扫一扫