ブラウザでvueファイルを実行する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

ブラウザでvueファイルを実行する方法

青灯夜游

Sep 29, 2021 pm 04:57 PM

走る

ブラウザで vue ファイルを実行する方法: 1. cmd コマンドウィンドウを開き、cd コマンドを使用して、vue ファイルを含む vue プロジェクトディレクトリに入ります; 2. プロジェクトディレクトリで、コマンド「」を実行します。 npm run dev」と入力してプロジェクトを開始します。 3. ブラウザのアドレスバーに「localhost:8080」と入力します。

ブラウザでvueファイルを実行する方法

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

##vue ファイルはブラウザで実行されます

##新しい vue ファイル

#公式の例は次のとおりです。index.html ファイルを作成する必要があります。

<html><body>
  <p id="app"></p>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
  <script>

    const options = {

      moduleCache: {
        vue: Vue      },

      async getFile(url) {

        const res = await fetch(url);
        if ( !res.ok )
          throw Object.assign(new Error(url+&#39; &#39;+res.statusText), { res });
        return await res.text();
      },

      addStyle(textContent) {

        const style = Object.assign(document.createElement(&#39;style&#39;), { textContent });
        const ref = document.head.getElementsByTagName(&#39;style&#39;)[0] || null;
        document.head.insertBefore(style, ref);
      },
    }

    const { loadModule } = window[&#39;vue3-sfc-loader&#39;];

    const app = Vue.createApp({
      components: {
        &#39;my-component&#39;: Vue.defineAsyncComponent( () => loadModule(&#39;./myComponent.vue&#39;, options) )
      },
      template: &#39;<my-component></my-component>&#39;
    });

    app.mount(&#39;#app&#39;);

  </script></body></html>

ログイン後にコピー

次に、myComponent.vue ファイルを作成する必要があります。ファイルの内容は次のとおりです。

<template>
  <p class="title">
    hello world
  </p>
</template>

<script>
export default {
  setup () {
    console.log(&#39;hello world&#39;)
  }
}
</script>

<style scoped>
  .title {
    font-size: 40px;
    color: red;
  }
</style>

ログイン後にコピー

プロジェクトの開始

cmd で、cd コマンドを使用して vue プロジェクトに入ります

npm run dev

を実行すると、ホットロードを使用してアプリケーションが実行されます。ホットロードを使用すると、変更後にブラウザを手動で更新しなくても、変更された効果をリアルタイムで確認できます。コード。

ブラウザに「localhost:8080」と入力します。

関連する推奨事項: 「
vue.js チュートリアル

以上がブラウザでvueファイルを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7321

Java チュートリアル

1625

CakePHP チュートリアル

1349

Laravel チュートリアル

1261

PHP チュートリアル

1209

Related knowledge

Linuxシステムで.shファイルを実行するにはどうすればよいですか? Mar 14, 2024 pm 06:42 PM

Linuxシステムで.shファイルを実行するにはどうすればよいですか? Linux システムでは、.sh ファイルはシェルスクリプトと呼ばれるファイルであり、一連のコマンドを実行するために使用されます。 .sh ファイルの実行は非常に一般的な操作です。この記事では、Linux システムで .sh ファイルを実行する方法と具体的なコード例を紹介します。方法 1: 絶対パスを使用して .sh ファイルを実行する Linux システムで .sh ファイルを実行するには、絶対パスを使用してファイルの場所を指定できます。具体的な手順は次のとおりです。ターミナルを開きます。

PyCharm の使用法チュートリアル: 操作の実行方法を詳しく説明します Feb 26, 2024 pm 05:51 PM

PyCharm は非常に人気のある Python 統合開発環境 (IDE) であり、Python 開発をより効率的かつ便利にするための豊富な機能とツールを提供します。この記事では、PyCharm の基本的な操作方法を紹介し、読者がすぐに使い始めてツールの操作に習熟できるように、具体的なコード例を示します。 1. PyCharm をダウンロードしてインストールします。まず、PyCharm 公式 Web サイト (https://www.jetbrains.com/pyc) にアクセスする必要があります。

Windows 7でexeファイルを実行できない理由 Feb 18, 2024 pm 08:32 PM

win7 で exe ファイルを実行できないのはなぜですか? Windows7 オペレーティングシステムを使用している場合、多くのユーザーが exe ファイルを実行できないという共通の問題に遭遇する可能性があります。 exe ファイルは、Windows オペレーティングシステムの一般的な実行可能ファイルで、通常、さまざまなアプリケーションのインストールと実行に使用されます。ただし、一部のユーザーは、exe ファイルを実行しようとすると、システムが応答しなかったり、エラーメッセージが表示されたりする場合があります。この問題には多くの理由があります。以下に、一般的な原因と対応する解決策をいくつか示します。

Windows 7 で Bat ファイルを実行できないのはなぜですか? Feb 19, 2024 pm 03:19 PM

win7 で butt ファイルを実行できないのはなぜですか? 最近、Windows7 オペレーティングシステムを使用している多くのユーザーが .bat ファイルを実行できないと報告しています。これは広範な議論と混乱を引き起こしました。正常に機能するオペレーティングシステムが単純な .bat ファイルを実行できないのはなぜですか?まず、.bat ファイルの背景を理解する必要があります。バッチファイルとも呼ばれる .bat ファイルは、Windows コマンドインタープリタ (cmd.ex) で使用できる一連のコマンドが含まれるプレーンテキストファイルです。

Python から Javascript を実行するにはどうすればよいですか? Sep 07, 2023 pm 11:33 PM

Python では、PyExecJS ライブラリまたは Python の js2py ライブラリを使用して Javascript コードを実行できます。 PyExecJs ライブラリは、Node.js、JavaScriptCore、Google の V8 エンジンなど、さまざまな JavaScript エンジンを使用して Python から JavaScript コードを実行するための一貫した API を提供します。 js2py ライブラリを使用すると、JavaScript コードを解析して Python で解釈することにより、JavaScript コードを Python で実行できます。この記事では、PyExecJS ライブラリを使用して Python から javasc を実行する方法を説明します。

matlab で m-file を実行する方法 - matlab で m-file を実行するチュートリアル Mar 04, 2024 pm 02:13 PM

matlab で m ファイルを実行する方法を知っていますか? 以下に、エディターが matlab で m ファイルを実行する方法に関するチュートリアルを示します。お役に立てば幸いです。エディターで学習しましょう! 1. まず matlab を開きます。ソフトウェアを起動し、下の図に示すように、左上隅の「開く」を選択します。 2. 次に、以下の図に示すように、実行する m ファイルを選択して開きます。 3. 次の図に示すように、ウィンドウで F5 キーを押してプログラムを実行します。 4. 以下の図に示すように、コマンドラインウィンドウとワークスペースで実行結果を確認できます。 5. 次の図に示すように、[実行] を直接クリックしてファイルを実行することもできます。 6. 最後に、次の図に示すように、コマンドラインウィンドウとワークスペースで m ファイルの実行結果を表示できます。上記は編集者が提供した matlab メソッドです

Win10 のどのバージョンが最も速く動作しますか? Jan 05, 2024 pm 05:29 PM

Microsoft の新しいシステム Windows 10 について、友人は Windows 10 オペレーティングシステムのどのバージョンが最も速くスムーズに動作するかを知りたがっています。バージョンアップデートとは、実際にはシステムの内容や機能の更新、および欠陥の修復です。 win10 のどのバージョンが最も速く動作しますか? 1. win10 の各バージョンの違いは主にそれぞれの機能です 2. 機能が異なる以外は同じです 3. win10 の各バージョンに大きな違いはありません実行速度の点での主な違いは、自分のコンピュータの構成を見てください ~ win10 Home Edition: 1. Win10 Home Edition は、エントリーレベルのシステムバージョンである win8.1 のコアバージョンに相当します。 2. win10 ホームバージョンの国別バージョンは、Win8.1 の OEM 中国語バージョンと同等です。

win8を実行中のどこで開くか Mar 20, 2024 pm 03:46 PM

[ファイル名を指定して実行] ダイアログを開くには、Win + R ショートカットを使用する方法、検索機能を使用する方法、またはスタート画面に直接「ファイル名を指定して実行」と入力する方法の 3 つがあります。

See all articles

ブラウザでvueファイルを実行する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック