vue.js でプロジェクトを実行する方法

プロジェクトの実行方法: 1. ノードと cnpm をインストールします; 2. vue-cli をインストールします; 3. プロジェクトを初期化します; 4. cd コマンドを使用してプロジェクト フォルダーに入り、「cnpm install」を使用します。依存関係をインストールするコマンド; 5. 「npm run dev」コマンドを使用してプロジェクトを実行します。

このチュートリアルの動作環境: Windows 7 システム、vue2.9 バージョン。この方法はすべてのブランドのコンピューターに適しています。

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

vue.js を始めたばかりの多くの人は、最初は GitHub 上のオープンソース プロジェクトを手に取りましたが、 GitHub でオープンソース プロジェクトを実行するのは厄介です。オンラインチュートリアルを参考にしてプロジェクト環境の構築に成功し、フロントエンドエンジニアリングについて漠然と理解できたので、環境構築プロセスを皆さんに共有します。

まず、必要なものをリストします。

• node.js 環境 (npm パッケージ マネージャー)

• vue -cli スキャフォールディング構築ツール

• cnpm npm タオバオ画像

node.jsのインストール

node.js公式サイトからダウンロードしてインストールしますノードの場合、インストール プロセスは非常に簡単で、最後まで「次のステップ」を実行するだけです (愚かなインストール)。
インストールが完了したら、コマンド ライン ツールを開き、以下に示すように「node -v」と入力します。対応するバージョン番号が表示されれば、インストールは成功です。

npmパッケージマネージャーはnodeに統合されているので、直接npm -vと入力すると以下のようにnpmのバージョン情報が表示されます。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃わかりました！ノード環境がインストールされており、npm パッケージ マネージャーも利用可能です。一部の npm リソースがブロックされているか、外部リソースであるため、npm を使用して依存関係パッケージをインストールすると失敗することがよくあるため、npm の国内ミラーである cnpm も必要です。

cnpmのインストールコマンドラインに

npm install -g cnpm --registry=http://registry.npm.taobao.org

と入力して待つと、以下のようにインストールが完了します。

完了後、npm の代わりに cnpm を使用して依存パッケージをインストールできます。 cnpm について詳しく知りたい場合は、淘宝網 npm ミラー公式ウェブサイトをご覧ください。

vue-cli スキャフォールディング ビルド ツールをインストールしますコマンド ラインでコマンド

cnpm install -g vue-cli

を実行し、インストールが完了するまで待ちます。 (ここでは npm の代わりに cnpm を使用しています。そうしないと速度が非常に遅くなり、固まってしまいます。)

上記の 3 つのステップを経て、準備する必要のある環境とツールが準備されます。次に、vue -cli を使用してプロジェクトのビルドを開始できます。

vue-cli でプロジェクトをビルドする

プロジェクトを作成するには、まずディレクトリを選択し、次にコマンド ラインでそのディレクトリを選択したディレクトリに変更する必要があります。ここでは、新しいプロジェクトを保存するデスクトップを選択し、次に示すように、最初にディレクトリをデスクトップに移動する必要があります。

デスクトップ ディレクトリで、コマンド ラインでコマンドを実行します。

vue init webpack firstVue

このコマンドについて説明します。このコマンドはプロジェクトの初期化を意味します。ここで webpack はビルド ツールです。つまり、プロジェクト全体が webpack に基づいています。このうち、firstVueはプロジェクトフォルダ全体の名前で、以下のように指定したディレクトリ（今回の例ではデスクトップ上にフォルダが生成されます）に自動生成されます。

#初期化コマンドを実行するとき、ユーザーはプロジェクト名、説明、作成者、その他の情報など、いくつかの基本オプションを入力するように求められます。直接入力したくない場合は、Enter キーを押すだけでデフォルトで問題ありません。

#firstVue フォルダーを開くと、プロジェクト ファイルは次のとおりです。

これはプロジェクト全体のディレクトリ構造ですが、主に src ディレクトリを変更します。このプロジェクトはまだ単なる構造フレームワークであり、以下に示すように、プロジェクト全体に必要な依存リソースはまだインストールされていません。

プロジェクトに必要な依存関係をインストールします

依存関係パッケージをインストールするには、まずプロジェクト フォルダー (firstVue フォルダー) に移動します。 , 次にコマンドを実行し、

cnpm install

インストールを待ちます。

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

运行项目

在项目目录中，运行命令，

 npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，说明项目运行成功了。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

以上がvue.js でプロジェクトを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。