ホームページ >ウェブフロントエンド >jsチュートリアル >vue-cli+webpackでvue開発環境を構築する方法
今回は、vue-cli+webpackでvue開発環境を構築する方法と、vue-cli+webpackでvue開発環境を構築する際の注意事項を紹介します。見て。
ここでは、nodeに基づいたnpmパッケージのダウンロードを使用する必要があるため、最初にnodeをダウンロードする必要があります
早速、本題に入りましょう
ノードをダウンロードし、同時に git をダウンロードする必要があります。これから git 上でコマンドを入力して vue 環境を構築します
。 git は linux コマンドを使用します
それが機能する限り、なぜそう思うかは尋ねないでください。
Windows システムの場合、git をダウンロードした後、デスクトップを右クリックすると git Bash が表示されるので、それをクリックして git を開きます
Git には多くの機能があると同時に、Github にファイルをプッシュすることもできます
。 それでは、git を開いたら直接起動してみましょう
次に、npm inst<a href="http://www.php.cn/wiki/1483.html" target="_blank">all<code>npm inst<a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a> webpack
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 はノードに基づいていくつかのファイルをダウンロードしています
すると、nodemoduleファイルがもう1つあることがわかります。これには、node
のいくつかのモジュールが含まれています。
次に、コマンドラインから実行しますnpm run dev
vue は自動的にブラウザを開き、vue プロジェクトを実行しました
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
Angular はテーブル フィルタリングと削除関数を実装します
以上がvue-cli+webpackでvue開発環境を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。