测试项目的第一条规则是永远不要做测试项目！
在哈布雷（Habré）上已经有很多争议，然后我有机会在自己的皮肤上学习了这一课。我已发送解决方案，但未收到答案。甚至是负面的。没有。当然，一切都可以归因于危机，即职位空缺突然被冻结（我最近经常听到此消息，但相同的职位空缺仍在继续）。尽管如此，平庸的礼貌还是绰绰有余的。结论是明确的：在咬入TZ前，您需要仔细检查对话者的可靠性。
然而，即使在雇主失败的情况下，我还是故意采取这一步骤来测试自己，以获取一些经验。这篇文章不会是关于那个的。解决方案的困难已经在阅读技术说明的阶段出现了。有时您甚至不知道如何开始任务，而您在一开始所做的选择将影响开发的所有阶段。
关于如何在线创建人体艺术的教程很多，那么我的会有什么不同？首先，它们通常不是根据技术任务制作的，这意味着作者“偷工减料”，并且通常不会将自己局限于任何事物。其次，很少有人解释为什么选择一条或另一条路径来解决问题。第三，我的应用程序比标准待办事项列表复杂一个数量级，此后再介绍。
为了熟悉我收到的任务，我在扰流板下要求：
技术任务：
使用Vue.js实现小型SPA笔记应用程序。
每个注释都有一个标题和一个待办事项列表，然后是Todo。每个Todo项目都包含一个复选框和关联的文本签名。
该应用程序仅包含2页。
. Todo, , . :
( )
, Todo, . :
( )
( )
Todo:
:
.
( ) .
usability.
.
/ (Ctrl+Z, Command+Z, etc.).
:
"alert", "prompt" "confirm".
JavaScript TypeScript.
, , Webpack.
UI ( Vuetify).
, .
Vue-.
:
, , , , .
.
— . ( ). .
:
(GitHub, BitBucket, GitLab) .
. Dockerfile docker-compose.yaml, docker-compose up .
我必须立即警告您，我的解决方案没有任何特殊的体系结构。这是有原因的。当然，一方面，我想给雇主留下深刻的印象，另一方面，完成测试任务（以下简称TK）是在浪费个人生活，寻找其他提议，准备面试等方面的时间。仅当这不是您的梦想工作时，我们才会选择中间立场。
让我们看一下任务和解决它的可能方法：
使用Vue.js实现小型SPA笔记应用程序。一切都很简单：我们使用Vue CLI创建一个项目。
todo list, ( - Todo). Todo . - , : , .
2 . - Vue Router? . , , - . , , . , , ? - .
, :
. : , , . "" , Vue .
. SPA, Vue CLI.
( ) .
"alert", "prompt" "confirm".
Promise, . , . , , , . vue-modal-dialogs - , . Vue 3.
usability. , . , .
. - , , Cookie localStorage. , . localStorage. Vuex, , . , , .
JavaScript TypeScript. - ? , , Vue. TypeScript Vue 2 , . , Vue 3.
, ! Vue 2, , , .
, , Webpack. Vue CLI Webpack, SPA Vue.js
UI ( Vuetify) - . "" , Material Icons , . , , .
, . - flexbox .
Vue-. - : 2 , , , , - .
.
:
v-click-outside. . , . , . , - . , .
: , ? : , ? . Vue-Router . beforeRouteLeave . . , . , :
async beforeRouteLeave (to, from, next) {
if (await confirm('Do you realy want to leave this page?',
'All unsaved changes will be lost.')) {
this.clearNote()
next()
} else{
next(from)
}
}, .