` itself will be replaced.
diff --git a/src/v2/examples/commits.md b/src/v2/examples/commits.md
index 7481498d3a..ade63ed55c 100644
--- a/src/v2/examples/commits.md
+++ b/src/v2/examples/commits.md
@@ -1,9 +1,9 @@
---
-title: GitHub Commits
+title: مساهمات GitHub
type: examples
order: 1
---
-> This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
+> هذا المثال يقوم بجلب أحدث بيانات مساهمات Vue.js من GitHub [API](https://github.com/softvenue/i18n/blob/master/i18n.json#L53) وعرضهم في قائمة. يمكنك التنقل بين فروع master و dev.
diff --git a/src/v2/examples/deepstream.md b/src/v2/examples/deepstream.md
index 382e3bd3b8..31f0c808b0 100644
--- a/src/v2/examples/deepstream.md
+++ b/src/v2/examples/deepstream.md
@@ -1,9 +1,9 @@
---
-title: Realtime with deepstreamHub
+title: الوقت الحقيقي بواسطة deepstreamHub
type: examples
order: 9
---
-> This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).
+> في هذا المثال نستعمل [deepstreamHub](https://deepstreamhub.com/) لمزامنة البيانات في الوقت الحقيقي، إرسال الأحداث وعمل نداءات عن بعد بين العملاء (يمكنك محاولة فتحه في نوافذ متصفح متعددة).
diff --git a/src/v2/examples/elastic-header.md b/src/v2/examples/elastic-header.md
index 186ba37a92..ab114e2f6c 100644
--- a/src/v2/examples/elastic-header.md
+++ b/src/v2/examples/elastic-header.md
@@ -1,5 +1,5 @@
---
-title: Elastic Header
+title: الترويس المرن
type: examples
order: 7
---
diff --git a/src/v2/examples/firebase.md b/src/v2/examples/firebase.md
index e67c6c0f7c..0074770895 100644
--- a/src/v2/examples/firebase.md
+++ b/src/v2/examples/firebase.md
@@ -1,9 +1,9 @@
---
-title: Firebase + Validation
+title: Firebase + التحقق
type: examples
order: 10
---
-> This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
+> في هذا المثال نستخدم [Firebase](https://firebase.google.com/) مداوم للبيانات في الخلفية ومزامنة بين العملاء في الوقت الحقيقي (يمكنك محاولة فتحه في علامات تبويب متصفح متعددة). بالإضافة إلى ذلك، فإنه يقوم بالتحقق من البيانات باستعمال الخاصيات المحسوبة وتشغيل إنتقالات CSS عند إضافة/حذف العناصر.
diff --git a/src/v2/examples/grid-component.md b/src/v2/examples/grid-component.md
index 41bc7f5015..756481fe6a 100644
--- a/src/v2/examples/grid-component.md
+++ b/src/v2/examples/grid-component.md
@@ -1,9 +1,9 @@
---
-title: Grid Component
+title: شبكة المكون
type: examples
order: 3
---
-> This is an example of creating a reusable grid component and using it with external data.
+> هذا مثال لإنشاء شبكة مكون قابلة لإعادة الإستخدام وإستخدامها مع البيانات الخارجية.
diff --git a/src/v2/examples/hackernews.md b/src/v2/examples/hackernews.md
index 32e9b60f38..bdf765bcc8 100644
--- a/src/v2/examples/hackernews.md
+++ b/src/v2/examples/hackernews.md
@@ -1,10 +1,10 @@
---
-title: HackerNews Clone
+title: نسخة من HackerNews
type: examples
order: 12
---
-> This is a HackerNews clone built upon HN's official Firebase API, Vue 2.0 + Vue Router + Vuex, with server-side rendering.
+> هذا مثال على نسخة من HackerNews مبني على API الرسمي الخاص بـHackerNews مع Vue 2.0، Vue Router + Vuex، مع تصيير من جهة الخادم.
{% raw %}
@@ -14,22 +14,22 @@ order: 12
{% endraw %}
-> [Live Demo](https://vue-hn.herokuapp.com/)
-> Note: the demo may need some spin up time if nobody has accessed it for a certain period.
+> [عرض توضيحي حي](https://vue-hn.herokuapp.com/)
+> ملاحظة: قد يحتاج العرض التوضيحي لبعض الوقت في الدوران إذا لم يصل إليه أحد لفترة معينة.
>
-> [[Source](https://github.com/vuejs/vue-hackernews-2.0)]
+> [[المصدر](https://github.com/vuejs/vue-hackernews-2.0)]
-## Features
+## ميزات
-- Server Side Rendering
- - Vue + Vue Router + Vuex working together
- - Server-side data pre-fetching
- - Client-side state & DOM hydration
-- Single-file Vue Components
- - Hot-reload in development
- - CSS extraction for production
-- Real-time List Updates with FLIP Animation
+- تصيير من جهة الخادم
+ - Vue + Vue Router + Vuex للعمل معا
+ - بيانات جهة الخادم قبل جلبها
+ - حالة جهة المستخدم & إماهة DOM
+- مكون Vue للملف الوحيد
+ - Hot-reload قيد التطوير
+ - استخلاص CSS للانتاج
+- الوقت الحقيقي لتحديث قائمة مع تأثير القلب
-## Architecture Overview
+## نظرة عامة عن هندسة
diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md
index 5fdff15702..dda6f54243 100644
--- a/src/v2/examples/index.md
+++ b/src/v2/examples/index.md
@@ -1,9 +1,9 @@
---
-title: Markdown Editor
+title: محرر Markdown
type: examples
order: 0
---
-> Dead simple Markdown editor.
+> مثال بسيط عن محرر Markdown.
diff --git a/src/v2/examples/modal.md b/src/v2/examples/modal.md
index fc1e0a9e3f..743f18a42e 100644
--- a/src/v2/examples/modal.md
+++ b/src/v2/examples/modal.md
@@ -1,9 +1,9 @@
---
-title: Modal Component
+title: نموذج عن مكون
type: examples
order: 6
---
-> Features used: component, prop passing, content insertion, transitions.
+> الميزات المستخدمة: مكون، إرسال خصائص، إدراج محتوى، التحولات.
diff --git a/src/v2/examples/select2.md b/src/v2/examples/select2.md
index 0731a39471..3c543e14a0 100644
--- a/src/v2/examples/select2.md
+++ b/src/v2/examples/select2.md
@@ -1,9 +1,9 @@
---
-title: Wrapper Component
+title: المكون المغلف
type: examples
order: 8
---
-> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
+> في هذا المثال سندرج إضافة خارجية jQuery (select2) عن طريق تغليفها داخل مكون مخصص.
diff --git a/src/v2/examples/svg.md b/src/v2/examples/svg.md
index 38756f623e..b4a538d54c 100644
--- a/src/v2/examples/svg.md
+++ b/src/v2/examples/svg.md
@@ -1,9 +1,9 @@
---
-title: SVG Graph
+title: الرسم البياني باستخدام SVG
type: examples
order: 5
---
-> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
+> هذا المثال يعرض حالات لمكون مخصص، خاصية المحسوبة، طريقتي الربط و ودعم SVG.
diff --git a/src/v2/examples/themes.md b/src/v2/examples/themes.md
index c360b566ac..229f38dbfb 100644
--- a/src/v2/examples/themes.md
+++ b/src/v2/examples/themes.md
@@ -1,10 +1,10 @@
---
-title: Themes
+title: مظاهر
type: examples
is_new: true
order: 13
---
-> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application.
+> من خلال الأمثلة التالية التي صممها شركاؤنا من [Creative Tim](https://creative-tim.com?affiliate_id=116187) يمكنك أن ترى كيف تم بناء تطبيق حقيقي، ومجموعة التكنولوجيا وراء ذلك وكيف أن معظم المفاهيم التي تعلمتها تنطبق حتى الآن في التطبيقات الحقيقية.
{% raw %}
@@ -20,7 +20,7 @@ order: 13
Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.
+ملاحظة: هذا إذا كان متصفحك مخصص لحظر البيانات/كوكي الخارجية، المثال أدناه لن يعمل، لأن بيانات تخزين المحلية `localStorage` ستفشل في حفظ JSFiddle. يجب عليك النقر فوق `Edit in JSFiddle` لرؤية النتيجة المباشرة.
diff --git a/src/v2/examples/tree-view.md b/src/v2/examples/tree-view.md
index f0d34bfe8d..ddf928518a 100644
--- a/src/v2/examples/tree-view.md
+++ b/src/v2/examples/tree-view.md
@@ -1,9 +1,9 @@
---
-title: Tree View
+title: شجرة الإظهار
type: examples
order: 4
---
-> Example of a simple tree view implementation showcasing recursive usage of components.
+> مثال على طريقة عرض الشجرة البسيطة التي تعرض الاستخدام التراجعي للمكونات.
diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md
index 333ae884c3..c454a4099b 100644
--- a/src/v2/guide/class-and-style.md
+++ b/src/v2/guide/class-and-style.md
@@ -1,25 +1,25 @@
---
-title: Class and Style Bindings
+title: الفئات وربط الأنماط
type: guide
order: 6
---
-A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
+من ضمن إحتياجات الربط هو تعديل حالة الفئة الخاصة بالعناصر والانماط المضمنة. حيث ان كلاً منهما عبارة عن خصائص، يمكننا استخدام الخاصية `v-bind` للتحكم بهم: كل ما علينا فعله هو معالجة النص النهائي مع التعبيرات الخاصة بنا. على أي حال، استخدام دمج سلاسل النصوص (concatenation) يعتبر امر مزعج ويتسبب في العديد من الاخطاء. لهذا السبب، قامت Vue بتوفير بعض التحسينات المميزة عند استخدام `v-bind` مع `class` و `style`. بالإضافة إلى النصوص، التعبيرات أيضاً يمكنها ان تقوم بمعالجة كائنات او مصفوفات.
-## Binding HTML Classes
-
+## ربط فئات HTML
+
-### Object Syntax
+### صيغة استخدام الكائن
-We can pass an object to `v-bind:class` to dynamically toggle classes:
+يمكننا تمرير كائن إلى `v-bind:class` لتبديل حالة الفئة بشكل حيوي:
``` html
```
-The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`.
+الصيغة بالأعلى تعني ان الفئة `active` سوف يتم تحديدها طبقاً لحقيقة القيمة [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) الموجودة في خاصية البيانات `isActive`.
-You can have multiple classes toggled by having more fields in the object. In addition, the `v-bind:class` directive can also co-exist with the plain `class` attribute. So given the following template:
+يمكنك استخدام وتبديل العديد من الفئات عن طريق استخدام العديد من الحقول الاخرى. بالاضافة الى ذلك، الموجه `v-bind:class` يمكن ان يستخدم مع خاصية العنصر `class`. كما في المثال التالي:
``` html
```
-
-And the following data:
+مع خصائص البيانات التالية:
``` js
data: {
@@ -37,15 +36,15 @@ data: {
}
```
-It will render:
+سوف يتم معالجتها وعرضها كالتالي:
``` html
```
-When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`.
+عندما يتم تغيير قيمة `isActive` و `hasError`، يتم تحديث قائمة الفئات وفقاً لذلك. على سبيل المثال، إذا كانت قيمة `hasError` تساوي `true`، فإن قائمة الفئات للعنصر سوف تصبح `"static active text-danger"`.
-The bound object doesn't have to be inline:
+والعنصر الذي يتم ربطه لا يتطلب ان يكون متضمن (inline):
``` html
@@ -59,7 +58,7 @@ data: {
}
```
-This will render the same result. We can also bind to a [computed property](computed.html) that returns an object. This is a common and powerful pattern:
+هذا سوف يتم معالجته وعرضه بنفس النتيجة السابقة. كما يمكننا ايضاً ربط خاصية معالجة [computed property](computed.html) والتي تقوم بارجاع عنصر. وهذا يعتبر نمط قوي وشائع:
``` html
@@ -79,9 +78,9 @@ computed: {
}
```
-### Array Syntax
+### صيغة المصفوفة
-We can pass an array to `v-bind:class` to apply a list of classes:
+يمكننا تمرير مصفوفة الى `v-bind:class` لتطبيق قائمة من الفئات:
``` html
@@ -93,33 +92,32 @@ data: {
}
```
-Which will render:
+سوف يعالج ويعرض كالتالي:
``` html
```
-If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
+إذا كنت ترغب في أيضاً في تبديل الفئات في القائمة طبقاً لأحد الشروط، يمكنك فعل ذلك بإستخدام التعبير الثلاثي (ternary expression) كالتالي:
``` html
```
+هذا سوف يقوم دائماً بتطبيق `errorClass`، ولكن سوف يقوم بتطبيق `activeClass` فقط اذا كانت قيمة `isActive` تساوي قيمة حقيقية.
-This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is truthy.
-
-However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax:
+على أي حال، يمكن أن يطول هذا قليلاً إذا كان لديك العديد من الشروط. لهذا السبب، من الممكن استخدام صيغة الكائن في صيغة المصفوفة.
``` html
```
-### With Components
+### الاستخدام مع المكونات
-> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later.
+> هذا القسم يفترض ان لديك معرفة بـ[مكونات Vue](components.html). لك مطلق الحرية في تخطي هذا الجزء والعودة إليه لاحقاً.
-When you use the `class` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.
+عندما تستخدم خاصية `class` على مكون مخصص، سوف يتم إضافة هذه الفئات إلى العنصر الرئيسي في المكون. إذا كان لهذا العنصر خصائص مسبقه، لن يتم استبدالها.
-For example, if you declare this component:
+على سبيل المثال، اذا قمت بتعريف هذا المكون:
``` js
Vue.component('my-component', {
@@ -127,35 +125,35 @@ Vue.component('my-component', {
})
```
-Then add some classes when using it:
+وقمت بإضافة بعض الفئات عند إستخدامه:
``` html
```
-The rendered HTML will be:
+فإن كود HTML الذي سيتم معالجته وعرضه سيكون كالتالي:
``` html
Hi
```
-The same is true for class bindings:
+أيضاً نفس الشيء سيحدث مع ربط الفئات:
``` html
```
-When `isActive` is truthy, the rendered HTML will be:
+عندما تكون قيمة `isActive` تساوي قيمة حقيقية، سيتم معالجة وعرض HTML كالتالي:
``` html
Hi
```
-## Binding Inline Styles
+## ربط الأنماط المضمنة
-### Object Syntax
+### صيغة الكائن
-The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
+صيغة الكائن لـ`v-bind:style` مباشرة وواضحة - فهي تبدو مثل CSS بإستثناء أنها كائن چافاسكريبت. يمكنك إستخدام سواء طريقة camelCase أو kebab-case في كتابة الكود (قم بإستخدام علامات التنصيص مع kebab-case) لأسماء خواص CSS:
``` html
@@ -167,7 +165,7 @@ data: {
}
```
-It is often a good idea to bind to a style object directly so that the template is cleaner:
+هذا غالباً ما يكون فكرة جيدة لربط كائن الانماط مباشرة حتى ننتهي بكود أكثر نظافة ووضوح:
``` html
@@ -180,29 +178,30 @@ data: {
}
}
```
+مرة أخرى، صيغة الكائن غالباً ما يتم إستخدامها مع الخواص المعالجة (computed properties) والتي تقوم بإرجاع كائن.
-Again, the object syntax is often used in conjunction with computed properties that return objects.
+### صيغة المصفوفة
-### Array Syntax
-
-The array syntax for `v-bind:style` allows you to apply multiple style objects to the same element:
+صيغة المصفوفة `v-bind:style` تمكنك من تطبيق أنماط متعددة لنفس العنصر:
``` html
```
-### Auto-prefixing
+### اضافة البادئات التلقائية
+
+عند استخدامك لخصائص CSS التي تتطلب البادئات [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) في `v-bind:style`، على سبيل المثال `transform`، Vue سوف تقوم بالكشف التلقائي وتقوم بإضافة البادئات المطلوبة الى الانماط المطبقة.
-When you use a CSS property that requires [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles.
-### Multiple Values
+### القيمة المتعددة
> 2.3.0+
-Starting in 2.3.0+ you can provide an array of multiple (prefixed) values to a style property, for example:
+بدئاً من الاصدار 2.3.0 يمكنك توفير مصفوفة مكونة من مجموعة من القيم (التي لها بادئة) لأنماط الخاصية، على سبيل المثال:
``` html
```
+هذا سوف قوم بمعالجة القيمة الاخيرة فقط في المصفوفة والتي يدعمها المستعرض. في هذا المثال، سوف يقوم بمعالجة `display: flex` للمستعرضات التي لا تدعم اصدار flexbox ذو البادئات
-This will only render the last value in the array which the browser supports. In this example, it will render `display: flex` for browsers that support the unprefixed version of flexbox.
+سيؤدي هذا فقط إلى عرض القيمة الأخيرة في المصفوفة التي يدعمها المتصفح. في هذا المثال ،سيتم عرض `display: flex` للمتصفحات التي تدعم الإصدار غير المثبت من flexbox.
diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
index 6c3daabb43..209b615e10 100644
--- a/src/v2/guide/components-dynamic-async.md
+++ b/src/v2/guide/components-dynamic-async.md
@@ -201,7 +201,7 @@ Check out more details on `` in the [API reference](../api/#keep-ali
## Async Components
-
+
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md
index b14ee344f9..cfc20d4907 100644
--- a/src/v2/guide/components-registration.md
+++ b/src/v2/guide/components-registration.md
@@ -6,7 +6,7 @@ order: 101
> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
-
+
## Component Names
diff --git a/src/v2/guide/custom-directive.md b/src/v2/guide/custom-directive.md
index b086c5e7ea..d07074673f 100644
--- a/src/v2/guide/custom-directive.md
+++ b/src/v2/guide/custom-directive.md
@@ -6,7 +6,7 @@ order: 302
## Intro
-
+
In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:
diff --git a/src/v2/guide/deployment.md b/src/v2/guide/deployment.md
index b6504795cb..7ec962ca5c 100644
--- a/src/v2/guide/deployment.md
+++ b/src/v2/guide/deployment.md
@@ -1,26 +1,26 @@
---
-title: Production Deployment
+title: نشر الإنتاج
type: guide
order: 404
---
-> Most of the tips below are enabled by default if you are using [Vue CLI](https://cli.vuejs.org). This section is only relevant if you are using a custom build setup.
+> يتم تمكين معظم النصائح أدناه افتراضيًا إذا كنت تستخدم [Vue CLI](https://cli.vuejs.org). هذا القسم مناسب فقط إذا كنت تستخدم إعداد بناء مخصص.
-## Turn on Production Mode
+## تشغيل وضع الإنتاج
-During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app's payload size. In addition, some of these warning checks have small runtime costs that can be avoided in production mode.
+أثناء التطوير، تقدم Vue الكثير من التحذيرات لمساعدتك في الأخطاء والمخاطر الشائعة. ومع ذلك، فإن سلاسل التحذير هذه تصبح غير مجدية في الإنتاج وتُضَخم حجم حمولة التطبيق. بالإضافة إلى ذلك، تحتوي بعض عمليات التحقق من التحذيرات هذه على تكاليف وقت تشغيل صغيرة يمكن تجنبها في وضع الإنتاج.
-### Without Build Tools
+### دون أدوات البناء
-If you are using the full build, i.e. directly including Vue via a script tag without a build tool, make sure to use the minified version (`vue.min.js`) for production. Both versions can be found in the [Installation guide](installation.html#Direct-lt-script-gt-Include).
+إذا كنت تستخدم البنية الكاملة، أي تضمين Vue مباشرة عبر علامة البرنامج النصي بدون أداة إنشاء، تأكد من استخدام الإصدار المصغر (`vue.min.js`) للإنتاج. يمكن العثور على كلا الإصدارين في [دليل التثبيت](installation.html#Direct-lt-script-gt-Include).
-### With Build Tools
+### مع أدوات البناء
-When using a build tool like Webpack or Browserify, the production mode will be determined by `process.env.NODE_ENV` inside Vue's source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue's production mode, and warnings will be stripped by minifiers during the build. All `vue-cli` templates have these pre-configured for you, but it would be beneficial to know how it is done:
+عند استخدام أداة إنشاء مثل Webpack أو Browserify، سيتم تحديد وضع الإنتاج بواسطة `process.env.NODE_ENV` داخل شفرة مصدر Vue، وسيكون في وضع التطوير افتراضيًا. توفر كلتا أدوات التصميم طرقًا للاستبدال هذا المتغير لتمكين وضع الإنتاج الخاص بـ Vue، وسيتم تجريد التحذيرات بواسطة المصغرات أثناء الإنشاء. تحتوي جميع قوالب `vue-cli` على هذه التكوينات المسبقة لك، لكن سيكون من المفيد معرفة كيفية القيام بذلك:
#### Webpack
-In Webpack 4+, you can use the `mode` option:
+في Webpack 4+، يمكنك استخدام خيار `mode`:
``` js
module.exports = {
@@ -28,7 +28,7 @@ module.exports = {
}
```
-But in Webpack 3 and earlier, you'll need to use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):
+ولكن في Webpack 3 والإصدارات السابقة، ستحتاج إلى استخدام [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):
``` js
var webpack = require('webpack')
@@ -46,15 +46,15 @@ module.exports = {
#### Browserify
-- Run your bundling command with the actual `NODE_ENV` environment variable set to `"production"`. This tells `vueify` to avoid including hot-reload and development related code.
+- قم بتشغيل أمر التجميع باستخدام متغير البيئة `NODE_ENV` الفعلي الذي تم تعيينه على "الإنتاج". هذا يخبر `vueify` لتجنب إعادة التحميل الساخنة وشفرة التطوير ذات الصلة.
-- Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle. This allows the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks. For example:
+- قم بتطبيق تحويل [envify](https://github.com/hughsk/envify) إلى الحزمة الخاصة بك. يسمح هذا لجهاز المصغر بتجميع كافة التحذيرات في شفرة مصدر Vue ملفوفة في كتل شرطية متغير env. فمثلا:
``` bash
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```
-- Or, using [envify](https://github.com/hughsk/envify) with Gulp:
+- أو باستخدام [envify](https://github.com/hughsk/envify) مع Gulp:
``` js
// Use the envify custom module to specify environment variables
@@ -70,7 +70,7 @@ module.exports = {
.bundle()
```
-- Or, using [envify](https://github.com/hughsk/envify) with Grunt and [grunt-browserify](https://github.com/jmreidy/grunt-browserify):
+- أو باستخدام [envify](https://github.com/hughsk/envify) مع Grunt و [grunt-browserify](https://github.com/jmreidy/grunt-browserify):
``` js
// Use the envify custom module to specify environment variables
@@ -95,7 +95,7 @@ module.exports = {
#### Rollup
-Use [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):
+استخدم [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):
``` js
const replace = require('rollup-plugin-replace')
@@ -110,24 +110,24 @@ rollup({
}).then(...)
```
-## Pre-Compiling Templates
+## التجميع المسبق للقوالب
-When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.
+عند استخدام القوالب داخل DOM أو سلاسل قوالب JavaScript، يتم تنفيذ التصيير من القالب إلى function أثناء التنقل. عادة ما يكون هذا سريعًا في معظم الحالات، ولكن من الأفضل تجنبه إذا كان التطبيق الخاص بك حساسًا للأداء.
-The easiest way to pre-compile templates is using [Single-File Components](single-file-components.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
+إن أسهل طريقة لإعداد القوالب المسبقة هي استخدام [Single-File Components](single-file-components.html) - تقوم إعدادات الإنشاء المرتبطة تلقائيًا بإجراء التحويل المسبق نيابة عنك، وبالتالي فإن الشفرة المدمجة تحتوي على وظائف التصيير المترجمة بالفعل بدلاً من سلاسل قالب الخام.
-If you are using Webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step.
+إذا كنت تستخدم Webpack، وتفضل فصل ملفات JavaScript والقالب، فيمكنك استخدام [vue-template-loader](https://github.com/ktsn/vue-template-loader)، والذي يحول أيضًا ملفات القوالب إلى JavaScript تقديم وظائف خلال خطوة البناء.
-## Extracting Component CSS
+## استخراج مكون CSS
-When using Single-File Components, the CSS inside components are injected dynamically as `