多页面网站制作 第1篇
12 月中旬，我发现 DesignAgency 把所有事情都停了：他们不再约我一起开会审查工作，我对他们设计提出的意见也被忽视了好几个星期。
我把这一切归咎于假期，12 月份确实很多人都在休假，所以我以为新年后会慢慢恢复正常。
然而新年伊始，不仅项目进度缓慢，DesignAgency 的工作质量也下降了，我们在项目初期那种轻松、清晰的沟通不见了，取而代之的是一个小小的背景颜色问题就要来回沟通三次。
多页面网站制作 第2篇
到了四月份，又出现了一个新问题。
TinyPilot 网站使用的是 Bootstrap CSS 框架，且它的 Bootstrap 主题与我第一次发布网站时的主题相同。DesignAgency 指出，在完全不同的主题上叠加新的设计会很混乱，他们建议用定制的 TinyPilot Bootstrap 主题来替换原本的主题和临时 CSS。他们的开发人员估计，这只需要几天时间就能完成，并且还能加快项目的其他部分。
我同意了，毕竟这听起来很不错。
可是他们说的“几天”过去了，甚至几个星期都过去了，新主题却没有任何更新。我当时猜想：难道工作时间比他们预期的要长？还是三月份的情况重演了，他们又把所有工作都挤到了这个月的最后几天？
下个月的发票给了我答案。更换 Bootstrap 主题的“一周”任务最终耗时五周，计费工时 38 小时，总成本 6100 美元。
（耗费五周时间和 6100 美元的网站，开发前后对比）
多页面网站制作 第3篇
如果我再次接手这个项目，以下是我将采取的不同做法，按重要性从大到小排列。
（1）雇用个人自由职业者，而不是代理机构
我不是根据这一次经历就对代理公司产生偏见，只是我觉得个人自由职业者可能更适合我这样规模的企业。在这次的项目中，产生的许多问题都与管理、资源分配和沟通有关，我极大低估了这些问题在一个团队而非一个自由职业者身上的难度。
代理公司每月与我合作 40-60 个小时，与 TinyPilot 的其他自由开发者一样。我原以为代理公司需要的监督时间与一名自由职业者差不多，但一个项目中的人员越多，需要的管理也就越多，即使他们每月的工作时间加起来也只有 40 个小时。
（2）为了连续产出结果，设置一个合适的结构
起初，让代理公司尽可能并行开展工作似乎是一个不费吹灰之力的办法，想着这样他们就能有效利用资源，我也就能以更低的成本获得更快的成果。但你可以这样想：如果一个项目涉及八个任务，每个任务大约需要一个月的时间，你会选择哪种做法？
每个月完成一项任务，持续八个月；
前七个月什么都不做，然后在第八个月结束时交付所有任务。
对于客户来说，一次实现一个任务更物有所值：在第一个月结束时，你就拥有一个成果能在接下来七个月的业务提供价值，到第二个月你会拥有更多成果，以此类推。
相较之下，让所有任务并行也许会使你在谈判中处于弱势：如果代理公司把八项任务都完成了 80%，那么你此时想缩小项目范围或更换供应商的成本就会很高；如果你限制代理公司一次只能完成两到三项任务，那么一旦项目出现问题，你就可以及时止损。
最后，同时监督 8 个任务也很耗费精力，每一项未完成的任务都会占据你的脑海。与其在整个项目中都拖拖拉拉，不如分批次快速完成。
（3）缩小项目范围
在设计阶段，代理公司本应只专注于徽标、配色方案和字体，但我错误同意让他们过多地重新设计了网站；在实施阶段，我应该更积极地阻止他们，不让他们在完成新设计之前耗费时间去修复小 Bug。
（4）确定时间表
在与 DesignAgency 团队的第一次会议上，我问他们预计我的项目需要多长时间。他们的首席设计师跟我说，这取决于我：我可能会喜欢他们的第一份方案，也可能在几个星期内拒绝所有方案。
当时我认为他说的没错，因此没有要求更精确的时间表，后来我更是错误地把这种松懈的态度带到了开发工作中。我应该要求开发人员给出对每项任务的完成时间，如果工作远远超出了我的预期，也应该要求他们重新审视工作范围。这样就能避免出现像本来只需几天的重构任务最终耗时五周的情况。
（5）要求共享计费工时界面
回想起来，这次项目范围扩大的许多问题都是由于 DesignAgency 的报告反馈太慢造成的。
DesignAgency 的流程是每月报告两次工时：每个月 15 号，他们会共享已使用的总工时，但不会详细说明做了哪些任务，到了月底，他们会发送一份按任务划分的明细表。
（DesignAgency 在每月 15 号会简单报告工时总数，然后在月底报告详细内容。）
相比之下，TinyPilot 的内部开发人员在每次工作结束后都会报告他们的工作时间，因此我对他们的工作进度能更好地了解。如果一项计划耗时 10 小时的任务看起来像是要耗时 25 小时，我们就会重新评估是否要取消或缩小这项任务的范围。
（TinyPilot 的内部开发人员会在工作过程中报告他们的工作时间。）
如果将来我与一家设计公司合作，我会坚持使用一种能让我们共享计费工时界面的工具，就像我与 TinyPilot 开发人员使用的工具一样。
（6）避免成为供应商的最小客户
当我们开始这个项目时，DesignAgency 就告诉我，他们大多数客户的规模都比我公司大，但他们还是希望能服务到我。听起来好像很划算：尽管我的预算有限，但我依旧可以享受到通常只有大公司才能享受到的服务。
可实际上，我并没有得到和他们大客户一样的服务，因为我只是按小时计费的客户。后来当我升级为预付款的长期客户时，他们也很难在我的预算范围内有效地工作。
多页面网站制作 第4篇
我们在实际开发过程中，一个页面展示的内容布局是不变的，只是页面的数据不同而已，比如：
关于详情页这种只是数据变化的页面，我们的实现方法一般是拿到数据之后将数据展示到对应的位置上。至于数据可以是在页面跳转前将数据传入，常见于我们说的MVC架构中；也可以是从网页请求中获取对应的数据参数，然后进行数据请求得到数据，常见于前后端分离的架构。
如果我们是从网页请求中获取的数据参数，则我们可以常见到如下两种请求方式：
如果要实现http://localhost:8080/user/1这种方式，我们可以可以使用vue-router的动态路由参数，将router的配置修改如下：
除此之外，还有一些其他的常见用法：
不同路径指向相同页面：
嵌套路由：
多页面网站制作 第5篇
我不太想指名道姓地骂这家设计公司，所以我们就暂且叫它 DesignAgency 吧。这家公司位于美国，我是通过 HackerNews 找到他们的。相较之下，DesignAgency 的报价是我接触过的所有公司中最高的，但不得不说他们的作品风格最符合我的要求，其内部也人才济济，负责设计、定制插图和 3D 成像的人都有。
DesignAgency 的首席执行官 Isaac 在初次与我通话时，就建议我缩小项目范围，这个想法与我不谋而合，因此赢得了我的信任。显然，提出这个想法意味着他赚的钱会变少，但他还是建议进行品牌重塑，而不是全面的重新设计。总体而言，DesignAgency 将负责基本工作，如新 Logo、配色方案和字体。
品牌重塑后，我可以衡量结果，看看是否值得继续重新设计。如果不出意外，品牌重塑将为我与数字营销公司合作开展营销活动奠定坚实的基础——这听起来很不错！
DesignAgency 预计，品牌重塑需要在两到四周内花费 30-40 个小时的计费时间，而他们的时薪是 175 美元，因此我们需要 5-7 千美元来制作新 Logo 和品牌。这只是我预算的一半，所以我很快就同意了。
DesignAgency 的首席执行官 Isaac 跟我说，他们大多数客户都与其签订了价值不菲的长期聘用协议，而我公司的规模比其他客户的规模要小，项目内容也较为狭窄，因此可以按小时来计费。但如果有长期客户的工作需要花费更多时间，他们可能会偶尔暂停我这边的设计工作。
对于这一点我也不太在意，对方如果很忙，项目暂停一两周也不是什么大问题：我原本就计划这个项目需要两三个月的时间，所以多花几个星期并不算什么。
多页面网站制作 第6篇
Isaac 说，真正的问题在于我是他们唯一按小时计费的客户，只要有长期客户过来提需求，我的项目就会一直被推后。那么，如果我要签署一份聘用协议来保证完工时间呢？DesignAgency 的预付费是每月 40 小时，每小时 160 美元。
事情发展到这里，我觉得自己上当受骗了。当时的情况是，DesignAgency 已经差不多完成了我项目要求的 80%，但都不能直接使用，如果我把工作交给其他供应商，就会出现大量返工——而现在，他们拿最后的 20% 来要挟我，让我签署一份昂贵的聘用协议？
我尽可能委婉地告诉 Isaac，这种情况是 DesignAgency 的错：如果长期聘用协议很好，那为什么不早说？这个项目本来早就可以完成了。
面对我的质疑，Isaac 承认这种情况对我不公平，所以他答应我调整 12 月和 1 月的账单。虽然我当时没有签订协议，但他同意以签订长期协议的价格退还我差价。
但是每个月 40 个小时，我们该怎么办呢？项目只剩下 20 个小时了。
紧接着，Isaac 提议 DesignAgency 把开发工作也接手了。虽然 DesignAgency 的收费标准比 TinyPilot 内部开发人员要高，但 Isaac 预测他们会降低总体成本。TinyPilot 的开发人员擅长 Python 和 JavaScript 等编程语言，而 DesignAgency 的开发人员在设计繁重的 CSS 工作方面经验更丰富。
于是，我还是签了长期聘用合同，60 个高质量工时计划将从三月份开始。
多页面网站制作 第7篇
我相信，DesignAgency 在这个项目上已经尽了最大努力，他们并不是有意欺骗我或想从我这骗钱，只是我们真的不太合适。我习惯与个人自由职业者合作，DesignAgency 则习惯于与大客户合作——如果让我重来一次，我应该不会再这么做了。
但是，尽管有这么多的失误和压力，结果证明所有的痛苦好像都是值得的。
我本以为新网站能将销售额提高 10%-20%，但结果却接近 40%，甚至七月份，TinyPilot 网站的销售额达到了 万美元的历史新高，比重新设计前增加了 66%。虽然现在下结论还为时过早，但我还是希望，我支付给 DesignAgency 的 万美元将获得积极的回报。
多页面网站制作 第8篇
在我们最初的几次会议中，DesignAgency 向我展示了带有不同颜色选项的网站模型：
随着项目不断发展，模型图变得越来越精细，DesignAgency 开始向我展示网站的自定义图片和图标：
在此之前，我们从未讨论过定制插图的问题，不过我猜这似乎是个小工程，也就没有过多追究。
几周后，DesignAgency 又召开了一次会议来分享最新进展，但他们没有拿出任何新的 Logo 和品牌，反而将重点放在了网站的设计理念上。
我有些疑惑，于是问道：“先说清楚，这还是个品牌重塑的项目，而不是重新设计，对吗？”
首席设计师向我保证：“哦，是的是的！在旧设计的基础上，有些品牌的选择并不合理，所以这些只是简单的草图。”
多页面网站制作 第9篇
企业或公司做网站引流永远不会过时，互联网时代到处都是流量，但是企业永远都会缺流量，而流量的来源有多种，传统的网站流量你都不去了解获取，那么新的流量方式你更加掌握不了，所以你还等什么呢？赶紧做个企业网站吧！
中小企业自建网站的好处：
1、增加中小企业自身的曝光度，这个时代，不做介绍，有谁认识你呢？网站建设主要能起到一个塑造企业形象、让用户能够更加了解我们的企业，网站制作从而增加客户对我们企业的信任度。
2、获得更多的流量渠道，在互联网上推广也是要有一个载体，只要你有了网站就有希望。
3、更加便捷的提供客户服务，可以及时了解客户的需求，并快速解决，给用户最实际的帮助。
4、展示自己的产品，让自己的产品给更多的用户看到，用户在网站上就可以了解到产品的所有信息，客户可以尽心咨询和下单操作等等。
多页面网站制作 第10篇
到这里，我们可以做一个回顾，我们在给一个网站_安装路由器_的时候都做了哪些事情？
至此我们接触了vue路由相关的概念：
就是在页面渲染的时候，通过地址栏的path在我们指定的路径 -> 代码的关联关系中找到需要渲染的代码，然后将代码的内容替换到的位置上。通过这一点我们可以进一步理解我们目前看到的页面内容：
除了标签之外，如果去看官网文档或者其他资料，一般会提到另一个标签叫做。
其实就是替代原生的HTML超链接标签存在的，写法如下：
所以它的好处就是能够使得vue-router可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。减少页面的重新加载就可以提高网站的性能和用户在浏览和跳转过程中的体验，这才是我们去用代替所希望得到的。
多页面网站制作 第11篇
到五月份，我们网站的品牌重塑工作已经进行了七个月，耗资 万美元——按计划本应在四周内完成，耗资 7000 美元。这七个月，每个月我们似乎都离终点线只差几周的距离，但 DesignAgency 总会突然出现一些事情，使其无法完成我所关心的所有事情。
我觉得是时候叫停了，于是我提前 28 天通知 DesignAgency 终止合同。
DesignAgency 要求预付我每个月的款项，因此他们已经拿到了我最后一个月的所有款项。我本以为，既然我解雇了他们，那他们应该更没动力完成我的项目了。出乎意料的是，在我终止合同后，DesignAgency 的开发工作突然顺利得不可思议。
项目终于按照我从一开始就期望的速度进行了，DesignAgency 在 7-10 天内完成了每个页面的编码工作。虽然还是有问题，但这次我已经做好了准备。DesignAgency 不断提出新的设计建议，我全部拒绝了，并反复告诉他们请专注于我要求的设计工作。我庆幸我这样说了，不然他们今天可能还在为网站工作。
到了这个月的最后一天，最终页面还是没有完成，DesignAgency 也没有就退出项目一事与我沟通。到了 6 月 1 日，在我们的合同正式结束的第二天，他们的开发人员告诉我，Isaac 要他免费完成未完成的工作，因此他在两天内完成了最后一个网页。
终于完成了！实际上，这个项目早已远远超出了我最初的预期，对我的时间和经济造成了巨大的消耗。但我还是释怀了，并深感如释重负。
多页面网站制作 第12篇
我们也可以通过在组件中调用Router API来实现路由的跳转、回退等功能。
跳转到其他页面：
带参数跳转：
获取参数：this.$ // 得到值：vue
带锚点hash(#)跳转：
使用params跳转
获取params：this.$ // 得到值: aki
返回上一页：this.$(-1)
后退两页：this.$(-2)
掌握了以上内容基本就可以解决实际业务开发中的大部分场景，第四部分的API不需要记忆，只需要记住可以通过编写代码逻辑的形式来控制路由即可。
快去试试搭建自己的多页面网站吧~
多页面网站制作 第13篇
在前文介绍如何快速开始一个项目时，我们已经探索到了页面渲染的逻辑，即：
就完成了从代码到浏览器内容的关联和渲染展示。
当我们要跳转到一个新的页面的时候，一般地址栏的地址会跟随着变化，会有一个新的地址，即会有一个新的path。 所以，当我们要增加一个新的页面的时候，其实就是新增一个从代码到浏览器地址的关联关系。即，在src/router/中 将
这里我们在routes的值中增加了一个元素，即增加了一个从浏览器地址后缀/about关联到代码HelloWorld的关联关系，只不过我们这里关联的代码没有额外写，而是直接再次用了HelloWorld页面的代码。
现在我们的项目就有两个页面了，可以分别通过浏览器地址栏输入http://localhost:8080/#/和http://localhost:8080/#/about来访问两个页面。
由于我们使用了同样的代码来展示两个页面，所以看到的页面内容其实是一样的。打个比方说，如果我们的项目现在是一本两页的书，那么这两页的内容是一样的。
可以确定的是，我们现在确实是两个页面，而不是一个页面。如果需要验证这一点，可以把我们刚才的代码改动先注释掉或者删掉，然后直接访问http://localhost:8080/#/about，可以看到页面的内容其实跟HelloWorld页面内容不一样，而是下面的仅有一个logo图片的页面：
现在我们需要编写一个新的代码来对应路径/about，使得浏览器展示我们想展示的内容。因为我们的代码是由框架生成的标准化代码，所以这件事变得很简单，我们可以这样操作：
这样我们就完成了两个路径对应两个页面，两个页面用的是不同代码。然后我们修改里面的内容，让我们可以直观地从浏览器展示的内容观察到这一点。 进入，然后修改底下msg变量的值 将
保存后，重新打开浏览器可以看到我们/about对应的页面内容已经发生变化：
至此，我们就完成了网站页面从单页面网站升级成多页面网站的过程~ (●ˇ∀ˇ●)
我们可以看到我们的两个页面的地址栏输入是http://localhost:8080/#/和http://localhost:8080/#/about，所以我们目前的地址栏格式是http://localhost:8080/#/XXXXX。
这种格式其实我们在日常浏览其他网站的时候并不常见，更常见的格式是http://localhost:8080/about，也就是我们可以优化一下地址格式，尝试将#/从地址中移除。
要实现这一点我们只需要在src/router/中，在创建router实例的时候，指定一个mode参数，如下：
重新打开浏览器，就可以看到地址格式已经是我们希望的样子了：
多页面网站制作 第14篇
我们在进行网站开发的时候，大多数都是需要有多个页面展示不同内容或者提供不同功能。每个页面单独启动一个项目的做法不太现实，实际业务中是一个项目中，一个页面对应项目代码中一个代码文件，然后通过浏览器地址的不同后缀（比如/home, /about, /prodcut, /center等等）来对应到不同的代码文件，进而在浏览器上展示不同的内容和提供不同的功能。
多页面网站制作 第15篇
项目结束后，我跟 Isaac 通了电话，想要谈谈我们每个人可以做些什么来改进项目成果。我解释说，我正在写一篇博文，介绍我们合作的收获。
Isaac 坦诚地告诉我，这个项目并不像他希望的那样顺利。他认为，根本问题在于 DesignAgency 难以按照 TinyPilot 的预算缩减工作流程：一般他们的客户每月预付费在 2-4 万美元之间，而 TinyPilot 每月只需花费 40-60 个小时，这个时长对于他们来说可能只够维护而不是新开发。
我告诉 Isaac，我希望我们能早点安排好工作，尽早给我可用的成果。例如，我希望先有新 Logo，然后是新导航条设计，接着是登录页面设计等等。而 Isaac 表示，DesignAgency 的客户通常只对最终结果感兴趣，而不是中间环节，但他也能理解为什么我很注重工作的循序渐进。
对我来说，我也很意外 DesignAgency 竟如此缺乏项目管理。我本以为 DesignAgency 的项目经理会定期提供最新状态并推进项目时间表，但没有人这么做。Isaac 说这是他的失误，原本 DesignAgency 会将项目管理控制在计费工时的 5% 以下，但这个比例放在我的项目规模上，无法带来任何实际效益，所以他完全取消了项目管理工作。Isaac 承认，现在回想起来，为了确保我想要的项目效果，应该让我也参与进这个决策的。
之后，我们还谈到了DesignAgency 不透明的工作时间。由于他们不经常分享工时，而且工作时间也不固定，所以我根本无法判断任务的拓展程度是否超出了我的预期。我真希望能早点提出这个问题，因为事实证明，我确实只要问一下就可以了：DesignAgency 用 toggl 跟踪计费时间，Isaac 说我完全可以去查看详细情况。
多页面网站制作 第16篇
项目开始的第一个月非常顺利。
DesignAgency 邀请我每两周与他们的首席设计师、高级设计师、项目经理和 Isaac 开一次会，他们会向我展示新 Logo 和品牌的样本，我也会给出反馈意见。在一次次的接触中，我们的想法越来越接近。
不到六周，我们就确定了一个大家都喜欢的概念。
（DesignAgency 提供的几版新 Logo 和品牌）