上一篇：

vue实战入门基础篇九：从零开始仿门户网站实例-移动端界面适配https://mp.csdn.net/mp_blog/creation/editor/123045385一、目录

第一篇：前期准备工作

第二篇：开发框架搭建

第三篇：公共组件实现

第四篇：网站首页实现

第五篇：关于我们实现

第六篇：新闻资讯实现

第七篇：业务介绍及加入我们实现

第八篇：全局检索实现

第九篇：移动端界面适配

第十篇：代码重构并发布项目

二、代码重构

2.1演示视频

vue实战入门基础篇十：代码重构及发布

2.2css样式提取

一些公共样式可以提取到专门的css文件中，比如固定估计、颜色等，本实例中还未涉及。

2.3公共方法提取

将ismobel方法提取出来，并在组件中进行使用。

utiis文件：

/**
 * 一些工具方法
 */
export default{
	ismobel: function(){//判断是否是移动端
		return navigator.userAgent.match(
			/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
		);
	}
}
//后续的一些工具方法，如加载动画，api接口等都可以提取到外部，之后再具体组件中进行调用

组件中进行使用：

import utils from './utils/utils.js'//先导入文件
if (utils.ismobel()) {//直接使用即可
}

 可能这里还有另外的方法引入外部js，后续项目中继续探究。

2.4公共组件提取

1.团队介绍组件进行提取：

<template>
	<div class="flex " v-for="(item, index) in teamdatas" :key="item.id"
		:style="{width:(inner_width)/3+'px'}" v-if="!ismobel">
		<div v-if="index!=0" class="team_item_split"></div>
		<div class="team_item"
			:style="{width:((inner_width/3) - ((index==0||index==(teamdatas.length-1))?15:30))+'px'}">
			<div class="header">
				<img :src="item.logo" />
			</div>
			<div class="team_item_title">{{item.name}}</div>
			<div class="team_item_desc">
				<span>{{item.job}}</span>
			</div>
		</div>
		<div v-if="index!=teamdatas.length-1" class="team_item_split"></div>
	</div>
	<div class=" line" v-if="ismobel" style="padding-top:10px">
		<div class=" team_item" v-for="(item, index) in teamdatas" :key="item.id" style="padding-top: 10px;padding-bottom: 10px;">
			<div class="header">
				<img src="../assets/img016.png" />
			</div>
			<div class="team_item_title">军军君</div>
			<div class="team_item_desc">
				<span>创始人</span>
				<span>董事长</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				ismobel: navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				),
			}
		},
		props:{
			'inner_width':Number,
			'teamdatas':Array
		}
	}
</script>

<style>
	.team .pannel .line {
		padding-top: 50px;
	}
	
	.team .pannel .line .team_item_split {
		width: 50px;
		height: 100px;
	}
	
	.team .pannel .line .team_item {
		background: #f8f8f8;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	.team .pannel .line .team_item .header {
		text-align: center;
		vertical-align: middle;
	}
	
	.team .pannel .line .team_item .header img {
		text-align: center;
	}
	
	.team .pannel .line .team_item .team_item_title {
		text-align: center;
		height: 45px;
		line-height: 45px;
		font-size: 20px;
	}
	
	.team .pannel .line .team_item .team_item_desc {
		text-align: center;
		height: 35px;
		line-height: 35px;
		font-size: 18px;
		color: #816b53;
	}
</style>

首页和团队介绍界面进行直接使用：

import TeamItemfrom "../components/TeamItem.vue"
//记得导入一下
components: { //将组件注册一下才能使用
	TeamItem
},
//直接使用
<TeamItem :inner_width="inner_width" :teamdatas="teamdatas"></TeamItem>

2.成功案例组件进行提取：

<template>
	<div v-if="!ismobel" class="line  flex" v-for="(item, index) in cases" :key="item.id">
		<div class=" flex" v-for="(subitem, subindex) in item"
			:style="{ width: ((inner_width)/4) + 'px' }" :key="subitem.id">
			<div v-if="subindex!=0" class="case_item_split"></div>
			<div class="case_item"
				:style="{width: (((inner_width)/4)-((subindex==0||subindex==(item.length-1))?15:30)-10) + 'px',height: (inner_width-30*3)/4+'px'}">
				<div class="case_item_inner">
					<div class="case_item_logo"
						:style="{height: ((inner_width-30*3)/4 - 80)+'px',lineHeight: ((inner_width-30*3)/4 - 60)+'px'}">
						<img :src="subitem.logo">
					</div>
					<div class="desc">{{subitem.name}}</div>
				</div>
			</div>
			<div v-if="index!=item.length-1" class="case_item_split"></div>
		</div>
	</div>
	<div v-if="ismobel" class="line" v-for="(item, index) in cases" :key="item.id">
		<div class=" " v-for="(subitem, subindex) in item" :key="subitem.id">
			<div class="case_item" style="" :style="{height: (inner_width-30*3)/2+'px'}">
				<div class="case_item_inner">
					<div class="case_item_logo"
						:style="{height: ((inner_width-30*3)/2 - 80)+'px',lineHeight: ((inner_width-30*3)/2 - 60)+'px'}">
						<img :src="subitem.logo" style="width: 20%;margin-top: 20px;">
					</div>
					<div class="desc">{{subitem.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				ismobel: navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				),
			}
		},
		props:{
			'inner_width':Number,
			'cases':Array
		}
	}
</script>

<style>
</style>

 在首页和案例界面直接使用：

import CaseItem from "../components/CaseItem.vue"
//记得导入一下
components: { //将组件注册一下才能使用
	CaseItem
},
//直接使用
<CaseItem :inner_width="inner_width" :cases="cases"></CaseItem>

三、代码发布

使用npm run build打包命令打包项目，注意打包后有些图片文件是访问不到的，需要将路径修正一下，打包后的目录如下：

打包完成后需要把项目发布到web服务器中，这里我使用nginx作为web服务器，安装好nginx后，将打包后的文件配置到nginx中就可以访问了。

四、总结

代码重构过程可以将一些冗余的代码进行提炼，并且在这个过程中可以发现一些问题，也是一个技术提高的过程。

五：源码下载

vue实战入门基础篇：从零开始仿门户网站实例-Javascript文档类资源-CSDN下载

从零开始仿门户网站实例已完结，下一实例将使用vue+elementui实现网站管理后台相关界面。