vue-cli+webpackを使用してvueをビルドする方法

この記事では主に vue-cli+webpack を使用して vue 開発環境を構築する方法を紹介します。必要な友人は参考にしてください。

ここでは、ベースとなる npm パッケージのダウンロードを使用する必要があるため、最初にノードをダウンロードする必要があります。ノード上で

早速本題に入りましょう

ノードと git を同時にダウンロードして、vue 環境を構築するために git にコマンドを入力します

git は Linux コマンドを使用します

理由を聞いてください、それはうまくいきます それはいいですよね？

Windows システムでは、git をダウンロードした後、デスクトップを右クリックすると git Bash が表示され、それをクリックして git を開きます

Git には多くの機能があります。同時に、git はファイルを github にプッシュできます。 , github とても優れた倉庫管理ツールです

それでは、直接起動してみましょう。gitを開いたら表示されます

そして、npm install webpackを実行しますnpm install webpack

就会自动下载webpack最新版本了

在这里我们直接进入正题，怎么使用vue-cli搭建vue的开发环境

在这里我们需要全局安装vue-cli

在git里执行npm install vue-cli -g  安装vue命令环境

执行vue --verson查看是否安装成功，

显示vue的版本，就是安装成功了

这样就是全局安装了

现在我们再命令行输入vue init webpack-simple<模板名，就是你的项目的名称>，

在这里我们用webpack-simple搭建，因为他没有严格的规范，相对于大多数程序员来说比较好，他与webpack的区别在这里我就不细说了，如果需要的话大家可以在下面留言，我们给大家分享

在这里我的项目名称为myvue

所以我执行vue init webpack-simple myvue

桌面会有一个myvue的文件夹

我们执行cd myvue进入到我们的项目下

会发现文件夹下会有这些文件，这就是vue-cli自动为我们搭建的环境了

我们执行npm install

这时候我们需要等待一小会，npm在为我们下载基于node的一些文件，

然后你会发现多了一个node——modules文件，里面是node的一些模块

然后我们再命令行执行npm run dev

と最新バージョンの webpack が自動的にダウンロードされます

ここで、vue-cli を使用して vue 開発環境を構築する方法に直接進みます

ここでは、vue-cli をグローバルにインストールする必要があります

npm install vue- を実行します。 git の cli -g vue コマンド環境をインストールします

vue --version を実行して、インストールが成功したかどうかを確認します

vue のバージョンが表示されます。これは、インストールが成功したことを意味します。成功しましたこれはグローバル インストールです

次に、コマンド ラインに「vue init webpack-simple<テンプレート名はプロジェクトの名前です>,」と入力しますここでは webpack-simple を使用して、ほとんどのプログラマーと比べて厳密な仕様がないので、それをビルドしてください。ここでは webpack との違いについては詳しく説明しません。必要に応じて、以下にメッセージを残していただければ共有します

。

ここでのプロジェクト名は myvue ですので、vue init webpack-simple myvue を実行します

🎜デスクトップに myvue フォルダーが作成されます🎜🎜cd myvue を実行して、私たちのプロジェクトに入ってください🎜🎜🎜🎜これらのファイルは次の場所にあります。これは vue-cli が自動的に構築する環境です 🎜🎜npm install を実行します🎜🎜この時点で、npm はノードに基づいていくつかのファイルをダウンロードしています。私たちにとっては、 🎜🎜🎜🎜それでは、もう 1 つ見つかります。 node - ノードのいくつかのモジュールを含むモジュールファイル🎜🎜次に、コマンドラインで npm run dev を実行します🎜🎜vue は自動的にブラウザを開き、vue プロジェクトを実行します🎜🎜🎜🎜🎜 上記は次のとおりです私がまとめたテキストです。皆さんのお役に立てれば幸いです🎜🎜関連記事:🎜 🎜🎜Webpack での構成の最適化に関する問題🎜🎜🎜🎜Webpack で Electron アプリケーションを構築する方法🎜🎜🎜🎜 Angular4 を使用する場合の安全でないイメージ パスに関する問題🎜🎜

以上がvue-cli+webpackを使用してvueをビルドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。