diff --git a/src/guide/scaling-up/tooling.md b/src/guide/scaling-up/tooling.md index e0bf098b..adf49903 100644 --- a/src/guide/scaling-up/tooling.md +++ b/src/guide/scaling-up/tooling.md @@ -1,167 +1,167 @@ -# Tooling {#tooling} +# ابزارها {#tooling} -## Try It Online {#try-it-online} +## بصورت آنلاین امتحان کنید {#try-it-online} -You don't need to install anything on your machine to try out Vue SFCs - there are online playgrounds that allow you to do so right in the browser: +برای امتحان SFC های Vue نیازی نیست چیزی روی دستگاه خودتان نصب کنید - محیط‌های آنلاینی وجود دارند که اجازه می‌دهند مستقیماً در مرورگرتان این کار را انجام دهید: - [Vue SFC Playground](https://play.vuejs.org) - - Always deployed from latest commit - - Designed for inspecting component compilation results + - همیشه از آخرین کامیت اجرا می‌شود + - طراحی شده برای بررسی نتایج کامپایل کامپوننت - [Vue + Vite on StackBlitz](https://vite.new/vue) - - IDE-like environment running actual Vite dev server in the browser - - Closest to local setup + - محیطی شبیه IDE که سرور واقعی Vite dev را در مرورگر اجرا می‌کند + - نزدیک‌ترین چیز به ستاپ محلی -It is also recommended to use these online playgrounds to provide reproductions when reporting bugs. +همچنین توصیه می‌شود از این محیط‌های آنلاین برای ارائه بازتولیدها در هنگام گزارش باگ‌ها استفاده کنید. -## Project Scaffolding {#project-scaffolding} +## ساخت پروژه | Project Scaffolding {#project-scaffolding} ### Vite {#vite} -[Vite](https://vitejs.dev/) is a lightweight and fast build tool with first-class Vue SFC support. It is created by Evan You, who is also the author of Vue! +[Vite](https://vitejs.dev/) یک ابزار سبک و سریع برای ساخت با پشتیبانی اولیه از SFC در Vue است. توسط Evan You ایجاد شده است، که نویسنده Vue هم هست! -To get started with Vite + Vue, simply run: +برای شروع کار با Vite + Vue، فقط لازم است دستور زیر را در کامندلاین اجرا کنید:
$ npm create vue@latest
-This command will install and execute [create-vue](https://github.com/vuejs/create-vue), the official Vue project scaffolding tool. +این دستور، [create-vue](https://github.com/vuejs/create-vue) را نصب و اجرا می‌کند، ابزار رسمی ساخت پروژه Vue. -- To learn more about Vite, check out the [Vite docs](https://vitejs.dev). -- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme). +- برای یادگیری بیشتر در مورد Vite، [مستندات Vite](https://vitejs.dev) را ببینید. +- برای پیکربندی رفتارهای خاص Vue در یک پروژه ساخته شده با Vite، برای مثال پاس دادن گزینه‌هایی به کامپایلر Vue، مستندات [‎@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme) را ببینید. -Both online playgrounds mentioned above also support downloading files as a Vite project. +هر دو محیط آنلاینی که در بالا ذکر شدن از دانلود فایل‌ها به عنوان یک پروژه Vite پشتیبانی می‌کنند. ### Vue CLI {#vue-cli} -[Vue CLI](https://cli.vuejs.org/) is the official webpack-based toolchain for Vue. It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. Vite will provide superior developer experience in most cases. +[Vue CLI](https://cli.vuejs.org/) مجموعه ابزار رسمی مبتنی بر وب‌پک برای Vue است. اکنون در حالت نگهداری است و توصیه می‌کنیم پروژه‌های جدید را با Vite شروع کنید، مگر اینکه به ویژگی‌های خاص وب‌پک وابسته باشید. Vite در بیشتر موارد تجربه توسعه‌دهنده بهتری ارائه می‌دهد. -For information on migrating from Vue CLI to Vite: +برای اطلاعات در مورد مهاجرت از Vue CLI به Vite: -- [Vue CLI -> Vite Migration Guide from VueSchool.io](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/) -- [Tools / Plugins that help with auto migration](https://github.com/vitejs/awesome-vite#vue-cli) +- [راهنمای مهاجرت از Vue CLI به Vite در VueSchool.io](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/) +- [ابزارها / پلاگین‌هایی که به مهاجرت خودکار کمک می‌کنند](https://github.com/vitejs/awesome-vite#vue-cli) -### Note on In-Browser Template Compilation {#note-on-in-browser-template-compilation} +### نکته در مورد کامپایل تمپلیت در مرورگر {#note-on-in-browser-template-compilation} -When using Vue without a build step, component templates are written either directly in the page's HTML or as inlined JavaScript strings. In such cases, Vue needs to ship the template compiler to the browser in order to perform on-the-fly template compilation. On the other hand, the compiler would be unnecessary if we pre-compile the templates with a build step. To reduce client bundle size, Vue provides [different "builds"](https://unpkg.com/browse/vue@3/dist/) optimized for different use cases. +هنگام استفاده از Vue بدون مرحله build، تمپلیت‌های کامپوننت مستقیماً در HTML صفحه یا به عنوان رشته‌های جاوااسکریپ نوشته می‌شوند. در چنین مواردی، Vue نیاز دارد کامپایلر تمپلیت را برای کامپایل تمپلیت‌ها، به مرورگر بفرستد. از طرف دیگر، این کامپایلر غیرضروری خواهد بود اگر تمپلیت‌ها را با استفاده از یک مرحله build، از پیش کامپایل (pre-compiled) کنیم. برای کاهش اندازه باندل کلاینت، Vue گزینه‌ای هایی را برای [build در موارد استفاده مختلف](https://unpkg.com/browse/vue@3/dist/) ارائه می‌دهد: -- Build files that start with `vue.runtime.*` are **runtime-only builds**: they do not include the compiler. When using these builds, all templates must be pre-compiled via a build step. +- فایل‌های ساخته شده که با `vue.runtime.*‎` شروع می‌شوند، **runtime-only builds** هستند: آن‌ها شامل کامپایلر نیستند. هنگام استفاده از این بیلدها، تمام تمپلیت‌ها باید از طریق یک مرحله build اضافه‌تر از پیش کامپایل (pre-compiled) شوند. -- Build files that do not include `.runtime` are **full builds**: they include the compiler and support compiling templates directly in the browser. However, they will increase the payload by ~14kb. +- فایل‌های ساخته شده‌ که شامل ‍`‎.runtime` نیستند **full builds** هستند: آن‌ها شامل کامپایلر هستند و از کامپایل تمپلیت‌ها مستقیماً در مرورگر پشتیبانی می‌کنند. با این حال، آن‌ها حجم فایل را حدود ‎~14kb افزایش می‌دهند. -Our default tooling setups use the runtime-only build since all templates in SFCs are pre-compiled. If, for some reason, you need in-browser template compilation even with a build step, you can do so by configuring the build tool to alias `vue` to `vue/dist/vue.esm-bundler.js` instead. +تنظیمات پیش‌فرض ابزار ما از runtime-only build استفاده می‌کند زیرا تمام تمپلیت‌ها در SFC ها از پیش کامپایل می‌شوند. اگر به هر دلیلی، حتی با وجود مرحله‌ای برای build، نیاز به کامپایل تمپلیت در مرورگر دارید، می‌توانید این کار را با تغییر `vue` alias به `vue/dist/vue.esm-bundler.js` در ابزار build خود انجام دهید. -If you are looking for a lighter-weight alternative for no-build-step usage, check out [petite-vue](https://github.com/vuejs/petite-vue). +اگر به دنبال جایگزین سبک‌تری برای استفاده بدون مرحله build هستید، [petite-vue](https://github.com/vuejs/petite-vue) را بررسی کنید. -## IDE Support {#ide-support} +## پشتیبانی IDE {#ide-support} -- The recommended IDE setup is [VSCode](https://code.visualstudio.com/) + the [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension. The extension provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props. +- تنظیمات توصیه شده [VSCode](https://code.visualstudio.com/) + [افزونه ویژگی‌های زبان Vue (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) است. این افزونه syntax highlighting، پشتیبانی TypeScript و intellisense برای تمپلیت و propهای کامپوننت را ارائه می‌دهد. - :::tip - Volar replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects. + :::tip نکته + Volar جایگزین Vetur می‌شود، افزونه رسمی قبلی VSCode ما برای Vue 2. اگر در حال حاضر Vetur نصب شده است، مطمئن شوید در پروژه‌های Vue 3 آن را غیرفعال می‌کنید. ::: -- [WebStorm](https://www.jetbrains.com/webstorm/) also provides great built-in support for Vue SFCs. +- [WebStorm](https://www.jetbrains.com/webstorm/) هم از SFC های Vue پشتیبانی درونی عالی ارائه می‌دهد. -- Other IDEs that support the [Language Service Protocol](https://microsoft.github.io/language-server-protocol/) (LSP) can also leverage Volar's core functionalities via LSP: +- سایر IDE هایی که از [پروتکل سرویس زبان](https://microsoft.github.io/language-server-protocol/) (LSP) پشتیبانی می‌کنند هم می‌توانند از عملکردهای اصلی Volar از طریق LSP استفاده کنند: - - Sublime Text support via [LSP-Volar](https://github.com/sublimelsp/LSP-volar). + - پشتیبانی Sublime Text از طریق [LSP-Volar](https://github.com/sublimelsp/LSP-volar). - - vim / Neovim support via [coc-volar](https://github.com/yaegassy/coc-volar). + - پشتیبانی vim / Neovim از طریق [coc-volar](https://github.com/yaegassy/coc-volar). - - emacs support via [lsp-mode](https://emacs-lsp.github.io/lsp-mode/page/lsp-volar/) + - پشتیبانی emacs از طریق [lsp-mode](https://emacs-lsp.github.io/lsp-mode/page/lsp-volar/). ## Browser Devtools {#browser-devtools} -The Vue browser devtools extension allows you to explore a Vue app's component tree, inspect the state of individual components, track state management events, and profile performance. +افزونه devtools در Vue به شما اجازه می‌دهد درخت کامپوننت‌های یک برنامه را کاوش کنید، وضعیت کامپوننت‌ ها را بررسی کنید، رویدادهای state management را ردیابی کنید و عملکرد برنامه را پروفایل کنید. ![devtools screenshot](https://raw.githubusercontent.com/vuejs/devtools/main/media/screenshot-shadow.png) -- [Documentation](https://devtools.vuejs.org/) -- [Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) -- [Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) -- [Edge Extension](https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl) +- [مستندات](https://devtools.vuejs.org/) +- [افزونه Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) +- [افزونه Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) +- [افزونه Edge](https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl) - [Standalone Electron app](https://devtools.vuejs.org/guide/installation.html#standalone) ## TypeScript {#typescript} -Main article: [Using Vue with TypeScript](/guide/typescript/overview). +مقاله اصلی: [استفاده از Vue با TypeScript](/guide/typescript/overview). -- [Volar](https://github.com/johnsoncodehk/volar) provides type checking for SFCs using `