vue实战入门基础篇十：从零开始仿门户网站实例-代码重构并发布项目

上一篇：

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.团队介绍组件进行提取：

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

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

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

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

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

三、代码发布

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

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

四、总结

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

五：源码下载

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

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