ホームページ > ウェブフロントエンド > jsチュートリアル > vue-cli+webpackでvue開発環境を構築する方法

vue-cli+webpackでvue開発環境を構築する方法

php中世界最好的语言
リリース: 2018-04-13 17:23:12
オリジナル
1985 人が閲覧しました

今回は、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 サイトの他の関連記事に注目してください。

推奨読書:

JS で Ajax リクエスト関数を実装する方法

Angular はテーブル フィルタリングと削除関数を実装します

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート