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

  • [アーティクル]

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

前提条件

Visual Studio Code で NodeJS を試す

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

  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

    ブラウザーで、"Welcome to your Vue.js App" が http://localhost:8080 で表示されます。 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" を "Welcome to the Jungle!" に変更してみてください。 変更を保存するとすぐに、Vue アプリの "ホット リロード" が表示されます。

    アニメーション gif の変更時に Vue アプリのホット リロードを行う

その他のリソース