你有没有做过一个远离你的项目? 从一个项目开始很容易, 却发现自己被新的技能和挑战所淹没. 原型有助于保持项目的小型化, 并帮助开发人员决定是否值得追求. 此外, 我们可以利用 vue 的灵活性来构建原型, 这样我们就可以快速迭代想法.
产品和原型
产品是用户看到的东西, 比如应用程序, 服务或设备. 原型与产品相似, 但旨在以较低的成本试验产品的特定功能.
作为 web 开发人员, 我们经常在原型之前开发产品. 如果你曾经把一个周末的项目变成一个月的工作, 考虑采用原型方法. 原型有一些有用的好处:
你可以在一个小时内完成一个原型, 而不是一天
原型不是以生产为中心的, 所以您不需要生产环境(测试, 部署等).
您可以一次原型化一个特性, 看看它是否适合您的产品(以及是否值得实现)
如果您想尝试一些新技术, 可以使用原型来探索它, 而不是在生产环境中进行试验
生产产品需要更多的时间, 需要研究和测试. 另一方面, 原型需要更少的时间和资源. 我们将探索如何使用现代 Web 工具 (包括 vue.js) 制作原型, 而不是产品.
一个例子
假设我们想做一个应用程序, 告诉用户太阳何时会在给定的位置升起和落下. 此外, 我们想要显示一个可视化的时间, 显示一天中太阳升起 / 落下的时间.
目标: 制作一款应用程序, 显示太阳将在指定地点升起和落下的时间. 时间应该显示在数据可视化中.
在整个示例中, 我们将为原型确定最小可行的解决方案. 当我们必须决定要建造什么时, 这些最小可行的解决方案就出现了. 我们将选择一个更适合构建原型而不是产品的选项.
这是最终产品的样子:
这是一个实际的例子, 我有一个想法, 应该是一个原型, 但最终是一个未完成的产品. 让我们看看能不能从我的错误中吸取教训!
选择环境
有许多优秀的发展资源. 例如, 我们可以使用命令行工具在本地工作. 这提供了一个功能齐全的开发环境, 但是, 对于一个简单的原型来说, 这是一个很大的开销.
然后是 Codesandbox, 它在浏览器中复制开发环境. 它没有设置, 如果我们想要转移到生产环境中, 这是一个很好的选择.
最后, 还有 CodePen, 它看起来很有前途, 因为它使我们的原型保持隔离和简单. 此外, 该网站还提供了许多与他人分享我们想法的好方法.
出于我们的目的, 我们将选择 CodePen, 因为它使我们考虑得更小. 只有一个 html,CSS 和 JS 文件迫使我们编写更少的代码, 所以我们不会添加更多的特性. 这使得 CodePen 成为一种快速组装东西的好方法, 这就是为什么它是我们开发环境中最小可行的解决方案.
注意: 如果您更愿意使用命令行工具, 我建议您使用 vue-cli. 参见本文, 其中有一节是关于快速原型的.
选择一个框架
用 JavaScript 开发应用程序有很多方法. 我们希望呈现一个具有一些用户交互的相对复杂的 UI, 所以像 Vue,React 或 Angular 这样的框架是最好的选择.
所有这些框架都是很好的选择, 但我们正在寻找一些可以立即添加到应用程序中的东西, 这样我们就可以立即开始工作.
在这种情况下, Vue 是一个很好的选择. 我们只需要在 < script > 标签中加载它, 然后将 Vue({el: "#app"})添加到 JS 文件中. 从这里, 我们可以加载 HTML 模板, 提供数据, 并快速呈现组件.
Vue 还为我们的数据提供了反应性. 这在小规模上很有帮助, 因为我们的状态非常简单, 所以我们可以无缝地合并用户输入. 此外, 如果我们陷入困境, 我们可以求助于优秀的文档, 它们有几种语言.
对于编写我们的原型, Vue 是最小可行的解决方案. 注意, Vue 使从原型到产品变得很容易, 稍后我们将简要讨论这一点.
获得数据
我们需要决定使用什么数据. 在我们的最终产品中, 我们可能会使用一个 API 来获取日落 / 日出时间. 使用 API 将需要以下条件:
找到一个数据源, 就像这个来自美国海军的数据源
解析数据, 这是一种不同寻常的格式
决定如何访问这些数据, 也许使用 Axios...... 如果我们不熟悉的话, 这实际上可能需要额外的学习
也许使用用户的位置自动获得日出 / 日落时间... 这可能需要更多的学习
对于一个简单的原型来说, 这似乎是很大的开销. 或者, 我们可以做一些假数据. 我们的虚拟数据应该是这样的:
- // when the sun will rise/set in different cities
- const DUMMY_DATA = [
- {
- city: 'Baltimore',
- sunrise: { hour: 4, minute: 50 },
- sunset: { hour: 19, minute: 16 }
- },
- {
- city: 'Havana',
- sunrise: { hour: 5, minute: 4 },
- sunset: { hour: 19, minute: 1 }
- }
- ];
注意: 虚拟数据只是指您生成的数据, 在我们创建原型时替代真实数据
记住, 我们正在构建一个原型. API 解决方案是产品的正确答案, 但是实现它将花费太长时间. 最小可行的解决方案是使用虚拟数据.
创建可视化
接下来, 我们需要决定如何创建日出 / 日落可视化. 我们想要显示每个事件发生的时间, 它们在一天中发生的位置, 以及太阳实际上是什么时候出来的.
由于我们希望我们的应用程序有一个特定的外观, 我们考虑为可视化定制一个组件. 制作我们自己的组件需要:
使用 SVG 正确呈现矩形和文本
找出如何正确定位这些 SVG 元素
选择合适的颜色
根据设备大小对其进行适当的定位, 因为我们在开始构建时就会关注这一点
有很多考虑因素, 我们可能必须学习很多知识才能使其投入生产...... 或者, 我们可以使用开源组件. 我们的设计看起来像一个滑块, 快速搜索即可找到 vue-slider-component. 我们甚至可以自定义它!
下面是我们如何在 Vue 中使用它:
- <vue-slider
- :value="[sunrise, sunset]"
- :min="startOfTheDay"
- :max="endOfTheDay"
- :processStyle="{
- backgroundColor: 'darkorange'
- }" :bgStyle="{
- backgroundColor: 'darkslateblue'
- }" :sliderStyle="{
- backgroundColor: 'darkorange',
- boxShadow: 'none'
- }">
- </vue-slider>
这产生了以下结果:
对于原型设计, 滑块非常合适. 最后, 我们将创建一个自定义组件, 但目前这需要更多的工作. 使用开源组件是最不可行的解决方案.
样式的应用
任何应用程序, 甚至原型, 都应该有一些样式. CSS 是 Web 开发的重要组成部分, 开发人员应该在设计应用程序时考虑到 CSS.
我们可以选择使用 CSS 专家, 或者自己学习更多的 CSS. 然而, 这增加了我们需要学习的更多技术. 我们可能会忘乎所以地想浏览器对各种功能的支持, 为移动设备设计, 以及如何同时使用 CSS 和 JS.
我们对 CSS 的了解已经足够了, 但是要使其投入生产还需要大量的工作. 或者, 我们可以使用开源解决方案. 我们有两种方法:
vue 库 (例如 Vuetify https://vuetifyjs.com/en/ 或 https://bootstrap-vue.js.org/ ) 使我们可以访问漂亮的组件
CSS 实用程序库, 例如 Tailwind CSS https://tailwindcss.com/ 或 Tachyons http://tachyons.io/
下面是一个如何使用顺风设计按钮的例子:
解决方案, 如顺风容易使用与我们目前的 CSS 知识. 此外, 我们注意到, 当时机成熟时, 上述所有选项都可以转换为产品. 因此, 这些 CSS 解决方案非常适合于原型设计.
对于样式化我们的原型, 最小可行的解决方案是使用预样式化组件或 CSS 实用程序库. 我们要用顺风.
构建原型
我们已经做了三个关键的决定, 这将帮助我们快速构建一个原型. 我们决定
使用 CodePen 开发, 以使我们的想法保持较小
使用 Vue 作为我们的框架, 因为它的易用性和反应性
创建虚拟数据, 而不使用 API
使用开源组件, 而不是设计自定义组件
使用 CSS 实用程序库, 以便我们可以高效地对应用程序进行样式设置
本文将不再花更多时间构建这个特殊的示例. 如果您想自己构建它, 请参阅 CodePen 上的示例. 这支笔装载了虚拟数据, 详细注释和实用程序.
从原型到产品
在建立我们的原型之后, 我们可以决定是否继续生产. 有几件事需要考虑, 比如
建造需要多少时间
你需要学习多少新技能
您计划如何开发 / 部署 / 分发应用程序
注意, 在选择最小可行解时, 我们确定了所有这些. 我们注意到设置 API 的困难, 以及编写自定义组件可能需要的时间. 下面是对原型和产品的决策总结(我用粗体标出了常见的解决方案):
原型 < br ztid="158" ow="0" oh="0"> | 产品 |
CodePen 开发 | 使用命令行工具在本地进行开发,或者在 Codesandbox 或 < a href="https://codepen.io/pro/projects" target="_blank" ztid="164" ow="325" oh="42">CodePen 项目 https://codepen.io/pro/projects 中开发更强大的原型 |
在 Vue 中编写应用 | 在 Vue 中编写应用 |
使用伪数据 | 从 API 获取数据 |
使用开源组件 | 制作自定义组件,或 < strong ztid="177" ow="48" oh="17">改进开源 组件 |
使用 < strong ztid="180" ow="82" oh="17">CSS 实用程序库 | 使用 < strong ztid="182" ow="70" oh="17">CSS 实用程序 或组件库 |
如果这些挑战听起来令人兴奋, 那就去做吧 -- 你花了一些时间来预先推敲你的想法. 如果你认为你不能承诺, 那也没关系 -- 你只花了一个小时.
总的来说, 你编写的代码越多, 你学到的就越多. 随着您实践原型, 您将能够更快地实现新特性. 原型让你在一个项目上工作和学习!
如果你有一个产品的想法, 最好从原型开始. 在开发原型时, 要注意那些将引导您走向正确方向的决策. 在制作原型时, 重要的是要在整个过程中从小处着眼, 并在头脑中有一个目标. 原型开发过程将在开发产品时帮助您, Vue 非常适合开发这两种产品.
来源: http://www.css88.com/web/vue-js/12498.html