Because sometimes we have to add logic to our concepts, and Vue makes it a whole lot easier.

因为有时我们必须在概念中添加逻辑，而Vue使其变得更加容易。

FULL DISCLOSURE: THIS IS NOT A COMPLETE JAVASCRIPT OR VUE COURSE. There’s no way I could cover all that in one article.If you’re looking for a full crash course or tutorial, you can find some solid ones for JavaScript here, and for Vue.js here.

完全公开：这不是完整的Java脚本或VUE课程。 我不可能在一篇文章中介绍所有内容。如果您正在寻找完整的速成课程或教程，则可以 在此处 找到有关 JavaScript的 可靠知识，也可以 在此处 找到 有关 Vue.js的知识 。

Finally, if you are a designer who is JUST GETTING STARTED with web coding and you have very little to no experience, I would highly recommend you begin your journey at freecodecamp.org or with courses on YouTube or Udemy on web coding and/or front-end development.

最后，如果您是一位刚开始使用Web编码的设计师，并且几乎没有经验，我强烈建议您从freecodecamp.org或YouTube或Udemy开设Web编码和/或前端课程开始您的旅程开发。

With that out of the way, let’s get into it.

有了这些，让我们开始吧。

在本文中，我将向您介绍Vue.js，如何在设计Web时使您的生活更轻松，以及为什么要学习它。 (In this article, I’m going to introduce you to Vue.js, how it can make your life easier when designing for the web, and why you may want to learn it.)

But first, a brief and salty introduction.

但是首先是简短而又咸的介绍。

我不敢相信我在写这个 (I can’t believe I’m writing this)

I’ve been designing since Flash was still owned by Macromedia and a floating layout was about as “responsive” as the web ever got.

自从Flash仍由Macromedia拥有以来，我就一直在进行设计，而浮动布局的响应速度与Web一样快。

Granted, even back then there was a subtle push for designers to code, but it was mostly within a very specific domain and not by any means a general expectation or requirement. When designers did code, it was also far simpler due in part to the fact that screen requirements were minimal at best, and the asynchronous web really wasn’t a thing yet.

诚然，即使在那时，设计人员还是在巧妙地推动编码，但是它主要是在非常特定的领域内进行的，绝不是一般的期望或要求。 当设计师进行代码编写时，它也要简单得多，部分原因是屏幕的需求最多是最小的，而且异步Web真的还不是。

Since then, there have been several advents: we got touch-screen smartphones, we got the mobile web, asynchronous single-page-applications (SPAs) are the norm, and designers are being expected to code.

从那时起，出现了好几种情况：我们有了触摸屏智能手机，我们有了移动网络，异步单页应用程序(SPA)成为常态，并且期望设计师进行编码。

Now before you start throwing full wine bottles at the screen I should clarify my stance on this issue: designers should never be expected to code, period. It is a misallocation of skill-set, it’s an anti-pattern when it comes to separation of concerns, and it can hurt your product very badly in the long run.

现在，在您开始将满满的葡萄酒瓶扔到屏幕上之前，我应该澄清我在这个问题上的立场： 永远不要期望设计师编写代码。 这是技能组合的错误分配，在关注点分离方面是一种反模式，从长远来看，它可能严重损害您的产品。

Some HTML and CSS is fine for most designers, but the second you touch JavaScript you are crossing into developer territory.

一些HTML和CSS对大多数设计师来说都不错，但是第二次触摸JavaScript便进入了开发人员领域。

Architects don’t build houses. Electricians don’t plumb. Lawers are not underwater welders. You get the point.

建筑师不建房屋。 电工不垂手。 律师不是水下焊工。 你明白了。

So then why would I write an article about how to use Vue.js for designers?

那么，为什么我要写一篇关于如何将Vue.js用于设计师的文章呢？

这是擦(这是很烂的擦)： (Here’s the rub (and it’s a shitty rub):)

Employers are now facing a tight squeeze; having to compete directly with large companies that have a virtually unlimited supply of venture capital, and globalized firms who can get the work done at a fraction of the cost using locational arbitrage.

雇主现在正面临紧缩。 必须与几乎没有无限风险资本供应的大型公司直接竞争，而全球化的公司则可以通过位置套利以很少的成本完成工作。

What this translates to is a growing need for “generalizing specialists,” “people with T-shaped skill-sets,” or employees that can do more with less.

这意味着对“通用专家”， “具有T形技能的人”或能够事半功倍的员工的需求不断增长。

In greater number, with alarming regularity, I am being sent samples of job descriptions by my fellow UI/UX designers (and designers in general) that emphasize a need to know how to use the tools of a Front-End Developer.

越来越多的人以惊人的规律性向我的UI / UX设计人员(和一般的设计人员)发送工作描述样本，这些样本强调需要了解如何使用前端开发人员的工具。

These tools include, but are not limited to:1. HTML/CSS2. JavaScript3. jQuery4. Node.js (for build tools)5. Vue/React/Angular (along with their respective ecosystems that are huge)6. Git/Mercurial7. REST patterns8. Build tool-chains and task-runners (NPM scripts/Gulp/Grunt/Etc.)9. Transpilers (Babel).10. Bundlers (Webpack/Rollup/Etc.)11. Cloud-based NoSQL databases (Firebase/MongoDB Atlas/Etc.)

这些工具包括但不限于： 1. HTML / CSS2。 JavaScript3。 的jQuery4。 Node.js(用于构建工具)5。 Vue / React / Angular(以及它们各自巨大的生态系统)6。 Git / Mercurial 7。 REST模式8。 构建工具链和任务运行器(NPM脚本/ Gulp / Grunt / Etc。)9。 转运(Babel).10。 捆绑包(Webpack / Rollup / Etc。)11。 基于云的NoSQL数据库(Firebase / MongoDB Atlas / Etc。)

What does this mean? It means the game is changing, along with the definition of what it means to be a modern, employable, and profitable designer.

这是什么意思？ 这意味着游戏正在发生变化，以及对成为一名现代，可雇佣且有利可图的设计师的含义的定义。

The fact of the matter is that traditional design is falling by the wayside, and new designers who can only put out visual artifacts, mockups, and assets are getting paid less to do more.

事实是，传统设计正在逐渐被淘汰，而只能展示视觉人工制品，模型和资产的新设计师获得的薪水却更低，可以做更多的事情。

▸Do I like it? No.

▸我喜欢吗？ 没有。

▸Is it fair? Not even a little bit.

▸公平吗？ 一点儿都没有。

▸Is it the new reality that we’re faced with as design professionals? Yes.

▸这是我们作为设计专业人员面临的新现实吗？ 是。

What you need then is an edge over your competition. Something that you’re willing to do that others can or will not, to ensure your success.

然后，您需要的是竞争优势。 您愿意做的事情，别人会做或不会做，以确保您的成功。

One of these things, is learning how to use Vue and incorporate itinto your projects.

其中之一就是学习 如何使用Vue并将其合并到您的项目中。

什么是Vue.js (What is Vue.js)

Directly from the website:

直接从网站：

“Vue is a progressive framework for building user interfaces.”

“ Vue是用于构建用户界面的渐进框架 。”

This tells us less than we should probably know as designers so I will add to this explanation.

这告诉我们的东西比我们作为设计师可能不应该知道的要少，因此我将在此说明中加点说明。

Vue essentially takes DOM (Document Object Model) manipulation and makes it bearable through use of directives, data injection, and component-based architecture.

Vue本质上采用DOM(文档对象模型)操作，并且可以通过使用指令，数据注入和基于组件的体系结构来承受它。

Does this mean that Vue is inherently different than React, Angular, or any of the different front-end libraries/frameworks available?

这是否意味着Vue本质上与React，Angular或任何其他可用的前端库/框架不同？

Not necessarily, but there’s a reason I favor it:its a lot easier to implement.

不一定，但是我赞成它是有原因的： 它更容易实现。

In fact, it is VASTLY easier to incorporate Vue into an existing project, without ever having to use build tools. React is a pain, and don’t even get me started on Angular when it comes to retrofitting an existing project with either of them.

实际上，将Vue集成到现有项目中非常容易，而无需使用构建工具。 React是一个痛苦的事情，当涉及到使用其中任何一个来改造现有项目时，甚至都不会让我开始使用Angular。

This leaves us with Vue, and for better or worse it’s what we have.

这使我们有了Vue，无论好坏，这就是我们所拥有的。

Vue.js如何工作？ (How does Vue.js work?)

Vue is very interesting animal; when added to an existing web project, it works much like jQuery but with a far cleaner syntax and is easier to deal with on the whole.

Vue是非常有趣的动物。 当添加到现有的Web项目中时，它的工作原理类似于jQuery，但语法更简洁，整体上更易于处理。

Essentially, a new Vue object is instantiated on your web page, and then Vue takes control of the DOM through directives and data injection.

实质上，一个新的Vue对象将在您的网页上实例化，然后Vue通过指令和数据注入来控制DOM。

This is what a Vue instance will look like, if added to your project via CDN link (note that this is the development version of Vue, for production, you will want to use the production version. Both can be found here):

如果通过CDN链接将Vue实例添加到您的项目中，这就是它的样子(请注意，这是Vue的开发版本，用于生产，您将要使用生产版本。 两者都可以在此处找到 ) ：

Injecting data looks like this:

注入数据如下所示：

All that’s happening here is that I am letting Vue know that I want it to target the ‘#app’ div, and wherever it sees {{myName}}, to interpolate or inject the value of the ‘myName’ variable within the data object of the Vue instance.

这里发生的所有事情是让Vue知道我希望它以'#app'div为目标，并且无论它在什么地方看到{{myName}}，都可以在数据对象内插入或注入'myName'变量的值Vue实例的

Vue如何使您的生活更轻松？ (How can Vue make your life easier?)

好的，WTF是什么意思？ (Ok, WTF does that mean?)

What it means is that instead of having to do a:‘document.querySelector(…)…whatever’You can instead just tell Vue where you want the data, and it will inject it into the right place for you.

这意味着不必执行以下操作： 'document.querySelector(…)…任何操作'而只需告诉Vue您想要数据的位置，它将把它注入到适合您的位置。

它具有BROAD应用程序，并且不止于此。 (This has BROAD applications, and it doesn’t stop there.)

With Vue, you can easily tell your web page to do things that before were relatively difficult to make happen.

使用Vue，您可以轻松地告诉您的网页执行以前相对难以实现的事情。

These things include, but are not limited to:▸Conditional rendering▸Data looping▸Individual & group transitions▸Direct data injection▸Two-way data binding

这些内容包括但不限于： ▸有条件的渲染▸数据循环▸个人和组转换▸直接数据注入▸双向数据绑定

With directives like v-for, v-if, v-on, v-model, and more, it becomes very easy to manipulate your webpage directly in front of your user without having to write overly-complex JavaScript logic.

使用v-for ， v-if ， v-on ， v-model等指令 ，可以非常容易地直接在用户面前操作网页，而不必编写过于复杂JavaScript逻辑。

Moreover, with further tools like Nuxt, a framework built on top of Vue, you are able to incorporate folder-based routing into your project. You can also generate dynamic multi-page sites, static sites, and single-page applications with one build command.

此外，借助Nuxt (基于Vue构建的框架)等其他工具，您可以将基于文件夹的路由合并到项目中。 您还可以使用一个build命令生成动态多页面站点，静态站点和单页面应用程序。

Vue can make your life a lot easier when dealing with user interactivity, data management, and value delivery on the web.

当处理用户交互性，数据管理和网络上的价值交付时，Vue可使您的生活变得更加轻松。

那么，为什么仍要学习Vue？ (So why should you learn Vue anyway?)

I mean if it’s not a requirement, it’s just one more thing, right?

我的意思是，如果这不是必需的，那只是一件事，对吗？

You’ve already got a lot on your plate as a designer between UI/UX conventions constantly changing, along with screen sizes, design trends, accessibility paradigms, and best practices. Why should you care about Vue, or for that matter coding at all?

在不断变化的UI / UX约定，屏幕尺寸，设计趋势，可访问性范式和最佳实践之间，作为设计师的设计师已经为您提供了很多帮助。 您为什么要关心Vue，或者根本不关心编码？

It comes down to one word: leverage.

归结为一个词： 杠杆 。

When you can code as a designer, you have far more leverage than the average designer who can’t code.

当您可以以设计师的身份进行编码时，您所拥有的杠杆作用将远超过无法编写代码的一般设计师。

Leverage to get better jobs, with better pay, better working conditions, better benefits, and you automatically become way harder to replace.

利用 更好的工作 ， 更高的薪水 ， 更好的工作条件 ， 更好的福利 ，您就会变得难以替代 。

You also have the leverage to create your own products and validate them without the need for a dev-team to back you up 24/7.

你也有利于创造自己的产品，并对其进行验证，而不需要一个开发团队来支持你24/7。

This can be very freeing; not only giving you the ability to design your solution, but to develop it exactly the way you want to with a high degree of control over the final product.

这可以释放很多； 不仅使您能够设计解决方案，而且可以完全按照您想要的方式开发它，并且可以对最终产品进行高度控制。

底线是什么？ (What’s the bottom line?)

我不是在说什么： (What I’m not saying:)

With all that said, I am not telling you that you absolutely need to learn Vue or you’re hosed. You can probably get by with just being a regular, non-coding designer for at least another five years, maybe ten.

话虽如此，我并不是要告诉您您绝对需要学习Vue，否则您将无所适从。 成为一名普通的非编码设计师至少还需要五年，也许十年，您可能会获得成功。

You don’t even necessarily need to be exceptional at coding, just good enough to take your products from concept mockups to working, production-ready code so it is easier for your dev team to implement.

你甚至都不一定需要是在编码，刚刚好够把你的产品从概念到实体模型的工作，生产就绪的代码，以便它是你的开发团队来实现更容易例外 。

And a lot of times HTML and CSS by itself is good enough to make that happen.

很多时候，HTML和CSS本身就足以实现这一目标。

我的意思是： (What I AM saying:)

What I am saying, however, is that the design industry is changing rapidly, and if you don’t catch up and stay caught up with demand, eventually it will catch up with you.

但是，我的意思是，设计行业正在快速变化，如果您不赶上并紧跟需求，那么最终它将赶上您。

No hate, just the facts.

没有仇恨，只有事实。

所以，你可以做什么？ (So what can you do?)

Number one? Learn HTML, CSS, and JavaScript.

第一？ 学习HTML，CSS和JavaScript。

Yes, the learning curve is steep and painful but just that will give you a HUGE leg up on your competition.

是的，学习曲线陡峭而痛苦，但这将使您在竞争中大放异彩。

After that, learn a front end library or framework like React, Angular, or Vue along with its respective build tools. There’s a boatload of courses on Udemy, YouTube, and the web, so just Google and take your pick.

之后，学习前端库或框架(如React，Angular或Vue)及其各自的构建工具。 Udemy，YouTube和网络上有大量课程，所以只有Google可以选择。

Yes, to answer your burning question, there are a lot of other things you will end up learning along the way too, its all part of the process.

是的，要回答您的紧迫问题，您还将在沿途学习很多其他东西，这是整个过程的一部分。

After that, keep practicing to keep your skills sharp. Build projects, design and develop your concepts, and keep pushing forward.

在那之后，继续练习以保持技巧的敏捷。 建立项目，设计和开发您的概念，并继续前进。

This is the new normal, and we have to adapt to it as designers, or we risk the same fate as the once proud Flash: beautiful in its day, loved by many, now a relic of yesteryear, derelict, and forgotten.

这是新常态，我们必须以设计师的身份适应它，否则我们将面临与曾经引以为傲的Flash相同的命运：美丽的一天，受到许多人的喜爱，如今已成为昔日的遗物，被遗忘和遗忘。

Nick Lawrence DesignWebsite | Portfolio

尼克劳伦斯设计 网站 | 作品集