次の方法で共有

チュートリアル: 初心者向けの Vue.js

Vue.jsの使用が初めての場合は、このガイドがいくつかの基本を始めるのに役立ちます。

[前提条件]

Visual Studio Code で NodeJS を試す

まだインストールしていない場合は、VS Codeをインストール 。 Windows または WSL のどちらで Vue を使用するかに関係なく、Windows に VS Code をインストールすることをお勧めします。

  1. コマンド ラインを開き、新しいディレクトリを作成します。 mkdir HelloVue、ディレクトリを入力します。 cd HelloVue

  2. Vue CLI をインストールします。 npm install -g @vue/cli

  3. Vue アプリを作成します。 vue create hello-vue-app

    Vue 2 または Vue 3 Preview のどちらを使用するか、必要な機能を手動で選択する必要があります。

    Vue CLI プリセット

  4. 新しい hello-vue-app のディレクトリを開きます。 cd hello-vue-app

  5. Web ブラウザーで新しい Vue アプリを実行してみてください。 npm run serve

    ブラウザーの http://localhost:8080 に "Vue.js アプリへようこそ" と表示されます。 Ctrl+Cを押すと、vue-cli-service サーバーを停止できます。

    注

    このチュートリアルで WSL (Ubuntu またはお気に入りの Linux ディストリビューションを使用) を使用する場合は、VS リモート サーバーでコードを実行して編集する際に最適なエクスペリエンスを得るために、 Remote - WSL 拡張機能 がインストールされていることを確認する必要があります。

  6. VS Code で Vue アプリのソース コードを開いてウェルカム メッセージを更新してみてください。次のように入力します。 code .

  7. VS Code が起動し、エクスプローラーに Vue アプリケーションが表示されます。 npm run serveでターミナルでアプリをもう一度実行し、Web ブラウザーを localhost に開いて、Vue ページのウェルカム ページが表示されるようにします。 VS Code で App.vue ファイルを見つけます。 [Welcome to your Vue.js App]\(Vue.js アプリへようこそ\) を [Welcome to the Jungle]\(ジャングルへようこそ\) に変更してみてください。 変更を保存するとすぐに、Vue アプリの "ホット リロード" が表示されます。

    変更時にアニメーション GIF を使用した Vue アプリのホットリロード を に実施する

その他のリソース