Single File Components [DONE]

src/v2/guide/single-file-components.md

@@ -1,71 +1,72 @@
 ---
-title: Single File Components
+title: Componentele unui Singur Fișier
 type: guide
 order: 402
 ---
 
-## Introduction
+## Introducere
 
-In many Vue projects, global components will be defined using `Vue.component`, followed by `new Vue({ el: '#container' })` to target a container element in the body of every page.
+În multe proiecte Vue, componentele globale vor fi definite folosind `Vue.component`, urmat de `new Vue({ el: '#container' })` pentru a viza un element container în corpul fiecărei pagini.
 
-This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:
+Acest lucru poate funcționa foarte bine pentru proiectele de dimensiuni mici și mijlocii, în care JavaScript este utilizat numai pentru a îmbunătăți anumite viziuni. Cu toate acestea, în proiecte mai complexe sau când interfața dvs. este condusă în întregime de JavaScript, aceste dezavantaje devin vizibile:
 
-- **Global definitions** force unique names for every component
-- **String templates** lack syntax highlighting and require ugly slashes for multiline HTML
-- **No CSS support** means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
-- **No build step** restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel
+- **Definiții globale** forțați nume unice pentru fiecare componentă
+- **Șabloanele de șir** nu au o evidențiere a sintaxei și necesită tăieturi(slashes) urâte pentru HTML multiline
+- **Nu are suport CSS** înseamnă că, în timp ce HTML și JavaScript sunt modulate în componente, CSS este evitat în mod vizibil
+- **Nici un pas de construcție** nu ne limitează la HTML și ES5 JavaScript, mai degrabă decât preprocesoare ca Pug (fostul Jade) și Babel
 
-All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as Webpack or Browserify.
+Toate acestea sunt rezolvate de către **componentele cu un singur fișier** cu o extensie `.vue`, făcută posibilă cu instrumente de construire cum ar fi Webpack sau Browserify.
 
-Here's an example of a file we'll call `Hello.vue`:
+Iată un exemplu de fișier pe care îl vom numi `Hello.vue`:
 
 <img src="/images/vue-component.png" style="display: block; margin: 30px auto;">
 
-Now we get:
+Acum primim:
 
-- [Complete syntax highlighting](https://github.com/vuejs/awesome-vue#source-code-editing)
-- [CommonJS modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)
-- [Component-scoped CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html)
+- [Sintaxă completă evidențiată](https://github.com/vuejs/awesome-vue#source-code-editing)
+- [Modulele CommonJS](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)
+- [Componenta-scoped CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html)
 
-As promised, we can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.
+Așa cum am promis, putem folosi și preprocesoare cum ar fi Pug, Babel(cu modulele ES2015) și Stylus pentru componente mai curate și mai bogate în caracteristici.
 
 <img src="/images/vue-component-with-preprocessors.png" style="display: block; margin: 30px auto;">
 
-These specific languages are only examples. You could as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules.
+Aceste limbi specifice sunt doar exemple. Ai putea folosi cu ușurință și Bublé, TypeScript, SCSS, PostCSS - sau orice alte preprocesoare care te ajută să fii productiv. Dacă folosiți Webpack cu `vue-loader`, acesta are și suport de primă clasă pentru modulele CSS.
 
-### What About Separation of Concerns?
+### Cum rămâne cu separarea responsabilităților?
 
-One important thing to note is that **separation of concerns is not equal to separation of file types.** In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweaves with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.
+Un lucru important este de remarcat faptul că **separarea responsabilităților nu este egală cu separarea tipurilor de fișiere.** În dezvoltarea UI modernă, am constatat că, în loc să împartă codul în trei straturi uriașe care se interpun între ele, mai mult sens pentru a le împărți în componente cu cuplaj liber și pentru a le compune. În interiorul unei componente, șablonul, logica și stilurile sale sunt în mod inerent cuplate, iar colocarea acestora face de fapt componenta mai coerentă și mai ușor de întreținut.
+
+Chiar dacă nu vă place ideea Componentelor cu un singur fișier, puteți totuși să utilizați funcțiile de reîncărcare-hot și de precompilare prin separarea JavaScript și CSS în fișiere separate:
 
-Even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:
 
 ``` html
 <!-- my-component.vue -->
 <template>
-  <div>This will be pre-compiled</div>
+  <div>Acest lucru va fi precompilat</div>
 </template>
 <script src="./my-component.js"></script>
 <style src="./my-component.css"></style>
 ```
 
-## Getting Started
+## Noțiuni de Bază
 
-### Example Sandbox
+### Exemplu Sandbox
 
-If you want to dive right in and start playing with single-file components, check out [this simple todo app](https://codesandbox.io/s/o29j95wx9) on CodeSandbox.
+Dacă doriți să vă aruncați înainte și să începeți să jucați cu componente cu un singur fișier, verificați [această aplicație simplă 0todo](https://codesandbox.io/s/o29j95wx9) pe CodeSandbox.
 
-### For Users New to Module Build Systems in JavaScript
+### Pentru Utilizatorii Noi în Modulele Sistemelor în Construirea JavaScript
 
-With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already:
+Cu componentele `.vue`, intrăm în domeniul aplicațiilor JavaScript avansate. Asta înseamnă că trebuie să învățați să folosiți câteva instrumente suplimentare, dacă nu ați făcut-o deja:
 
-- **Node Package Manager (NPM)**: Read the [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) through section _10: Uninstalling global packages_.
+- **Node Package Manager (NPM)**: Citiți ghidul [Getting Started](https://docs.npmjs.com/getting-started/what-is-npm) prin secțiunea _10: Dezinstalarea pachetelor globale_.
 
-- **Modern JavaScript with ES2015/16**: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). You don't have to memorize every feature right now, but keep this page as a reference you can come back to.
+- **JavaScript-ul modern cu ES2015/16**: Citiți prin [Ghidul de instruire ES2015](https://babeljs.io/docs/learn-es2015/) al lui Babel. Nu trebuie să memorați fiecare caracteristică acum, dar păstrați această pagină ca referință la care vă puteți întoarce.
 
-After you've taken a day to dive into these resources, we recommend checking out the [webpack](https://vuejs-templates.github.io/webpack) template. Follow the instructions and you should have a Vue project with `.vue` components, ES2015, and hot-reloading in no time!
+După ce ați luat o zi să vă aruncați cu capul în aceste resurse, vă recomandăm să verificați șablonul [webpack](https://vuejs-templates.github.io/webpack). Urmați instrucțiunile și ar trebui să aveți un proiect Vue cu componente `.vue`, ES2015 și reîncărcare în cel mai scurt timp!
 
-To learn more about Webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [Webpack Academy](https://webpack.academy/p/the-core-concepts). In Webpack, each file can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://vue-loader.vuejs.org) plugin to translate single-file (`.vue`) components.
+Pentru a afla mai multe despre Webpack-ul în sine, consultați [documentele oficiale](https://webpack.js.org/configuration/) și [Webpack Academy](https://webpack.academy/p/the-core-concepts). În Webpack, fiecare fișier poate fi transformat de un "încărcător" înainte de a fi inclus în pachet, iar Vue oferă pluginul [vue-loader](https://vue-loader.vuejs.org) pentru a traduce un singur fișier (`.vue`).
 
-### For Advanced Users
+### Pentru Utilizatorii Avansați
 
-Whether you prefer Webpack or Browserify, we have documented templates for both simple and more complex projects. We recommend browsing [github.com/vuejs-templates](https://github.com/vuejs-templates), picking a template that's right for you, then following the instructions in the README to generate a new project with [vue-cli](https://github.com/vuejs/vue-cli).
+Indiferent dacă preferați Webpack sau Browserify, am documentat șabloane pentru proiecte simple și mai complexe. Vă recomandăm să răsfoiți [github.com/vuejs-templates](https://github.com/vuejs-templates), alegeți un șablon potrivit pentru dvs., apoi urmați instrucțiunile din README pentru a genera un nou proiect cu [vue- cli](https://github.com/vuejs/vue-cli).