From 4e151c4d5558df76a3750c749c7b38fd28c1f60f Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sun, 14 Nov 2021 12:16:26 +0900 Subject: [PATCH 1/3] docs: translate sfc tooling --- src/api/sfc-tooling.md | 72 +++++++++++++++++++++--------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/api/sfc-tooling.md b/src/api/sfc-tooling.md index 64ea8d95..5ac3f51d 100644 --- a/src/api/sfc-tooling.md +++ b/src/api/sfc-tooling.md @@ -1,10 +1,10 @@ -# SFC Tooling +# SFC ツール -## Online Playgrounds +## オンラインプレイグラウンド -You don't need to install anything on your machine to try out Vue SFCs - there are many online playgrounds that allow you to do so right in the browser: +Vue SFC を試すため、あなたのマシンに何かをインストールする必要はありません。ブラウザ上で操作できるオンラインプレイグラウンドがたくさんあります: -- [Vue SFC Playground](https://sfc.vuejs.org) (official, deployed from latest commit) +- [Vue SFC Playground](https://sfc.vuejs.org)(公式、最新のコミットからデプロイ) - [VueUse Playground](https://play.vueuse.org) - [Vue on CodeSandbox](https://codesandbox.io/s/vue-3) - [Vue on Repl.it](https://replit.com/@templates/VueJS-with-Vite) @@ -13,84 +13,84 @@ You don't need to install anything on your machine to try out Vue SFCs - there a - [Vue on Components.studio](https://components.studio/create/vue3) - [Vue on WebComponents.dev](https://webcomponents.dev/create/cevue) -It is also recommended to use these online playgrounds to provide reproductions when reporting bugs. +また、バグを報告する際には、これらのオンラインプレイグラウンドを使って、再現したものを提供することをおすすめします。 -## Project Scaffolding +## プロジェクトの足場 ### 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 itself! To get started with Vite + Vue, simply run: +[Vite](https://vitejs.dev/) はファーストクラスの Vue SFC サポートをする軽量で高速なビルドツールです。Vue 自体の作成者でもある Evan You によって作成されました! Vite + Vue を使い始めるには、単に次のコマンドを実行するだけです: ```sh npm init vite@latest ``` -Then select the Vue template and follow the instructions. +その後、Vue テンプレートを選択して、指示に従います。 -- To learn more about Vite, check out the [Vite docs](https://vitejs.dev/guide/). -- 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/tree/main/packages/plugin-vue#readme). +- Vite についての詳細は [Vite ドキュメント(日本語)](https://ja.vitejs.dev/guide/) を確認してください +- 例えば Vue コンパイラにオプションを渡すなど、Vite プロジェクトに Vue 固有の動作を設定するには、[@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme) のドキュメントを確認してください。 -The [SFC Playground](https://sfc.vuejs.org/) also supports downloading the files as a Vite project. +[SFC Playground](https://sfc.vuejs.org/) は Vite プロジェクトとしてファイルダウンロードすることもサポートします。 ### Vue CLI -[Vue CLI](https://cli.vuejs.org/) is the official webpack-based build tool for Vue projects. To get started with Vue CLI: +[Vue CLI](https://cli.vuejs.org/) は Vue プロジェクト用の webpack をベースとした公式のビルドツールです。Vue CLI ではじめるには: ```sh npm install -g @vue/cli vue create hello-vue ``` -- To learn more about Vue CLI, check out [Vue CLI docs](https://cli.vuejs.org/guide/installation.html). +- Vue CLI についての詳細は [Vue CLI ドキュメント](https://cli.vuejs.org/guide/installation.html) を確認してください。 -### Vite or Vue CLI? +### Vite それとも Vue CLI? -We recommend starting new projects with Vite as it offers significantly better development experience in terms of dev server startup and HMR update performance ([details](https://vitejs.dev/guide/why.html)). Only go with Vue CLI if you rely on specific webpack features (e.g. Module Federation). +開発サーバの起動や HMR の更新パフォーマンスの点で、開発体験が大幅に向上するため、Vite で新しいプロジェクトを開始することをおすすめします([詳細](https://vitejs.dev/guide/why.html))。特定の webpack の機能(Module Federation など)に依存する場合にのみ、Vue CLI を使用してください。 -If you are a [Rollup](https://rollupjs.org/) user, you can safely adopt Vite as it uses Rollup for production builds and supports a Rollup-compatible plugin system. [Even Rollup's maintainer recommends Vite as THE web development wrapper for Rollup](https://twitter.com/lukastaegert/status/1412119729431584774). +[Rollup](https://rollupjs.org/) のユーザならば、本番向けビルドに Rollup を使用して、Rollup 互換のプラグインシステムをサポートしているため、Vite を安全に採用できます。[Rollup のメンテナでさえ、Vite を Rollup のウェブ開発用のラッパーとして推奨しています](https://twitter.com/lukastaegert/status/1412119729431584774)。 -## IDE Support +## IDE サポート -The recommended IDE setup is [VSCode](https://code.visualstudio.com/) + the [Volar](https://github.com/johnsoncodehk/volar) extension. Volar provides syntax highlighting and advanced IntelliSense for template expressions, component props and even slots validation. We strongly recommend this setup if you want to get the best possible experience with Vue SFCs, especially if you are also using TypeScript. +推奨される IDE のセットアップは [VSCode](https://code.visualstudio.com/) と [Volar](https://github.com/johnsoncodehk/volar) 拡張機能です。Volar は、テンプレート式、コンポーネントの props、スロットの検証のために、シンタックスハイライトと高度なインテリセンスを提供します。Vue SFC を可能な限り最高に活用したい場合、特に TypeScript も利用している場合、このセットアップを強くおすすめします。 -[WebStorm](https://www.jetbrains.com/webstorm/) also provides decent support for Vue SFCs. However, do note as of now its support for `