ホームページ >ウェブフロントエンド >jsチュートリアル >vue で vue-cli を使用して helloWorld を構築する方法

vue で vue-cli を使用して helloWorld を構築する方法

亚连
亚连オリジナル
2018-06-11 17:13:262039ブラウズ

この記事では、vue が公式に提供しているテンプレート vue-cli を使用して helloWorld ケースを構築する方法を主に紹介します

インストール環境

  • node.js をインストールして環境を設定します。変数

  • 淘宝網ミラーをインストール、npm install -g cnpm --registry=https://registry.npm.taabao.org

  • webpack をインストール、cnpm install webpack -g

  • スキャフォールディングをインストール npm install vue -cli -g

プロジェクトを作成します

ハードディスク上でプロジェクトのフォルダーを見つけ、ターミナルでディレクトリを入力し、cdディレクトリパスを入力します
テンプレートに従ってプロジェクトを作成し、vue init webpack - 単純なプロジェクト名 <プロジェクト名は中国語にすることはできません>、vue init webpack プロジェクト名 <プロジェクト名は中国語にすることはできません>、

テンプレート解釈

  • cd エントリ 作成されたプロジェクト ディレクトリ

  • プロジェクトの依存関係をインストールします (npm install)。インストールには cnpm install を使用しないでください (後で多くの依存ライブラリが失われる原因になります)

  • vue ルーティング モジュール vue-router をインストールし、 network request module vue-resource, cnpm install vue-router vue-resource --save

  • プロジェクト npm run dev を開始します。開始後、ブラウザに http://localhost:8080 と入力すると、初期インターフェイスが表示されます。

上記は皆さんのためにまとめたものです。はい、今後皆さんのお役に立てれば幸いです。

関連記事:

angularJs-$httpでBaidu検索中に動的ドロップダウンボックスを実装する方法

要素がangularjs配列に含まれているかどうかを確認する方法

jsonオブジェクトの使用方法angularを配列にpushする

angularjsでtrをtableに追加するメソッドの実装方法

redux-sagaでのtakeの使い方の詳しい説明について

VueでElememt-UIを使用して管理バックエンドを構築する (詳細なチュートリアル)

jQuery で isPlainObject() を使用する方法は何ですか?

jsの関数に関する内容を詳しく解説

JS strictモードの知識ポイントとは?

AngularJS でデータを動的に追加および削除するにはどうすればよいですか?

angularJSでdivメソッドを動的に追加および削除する方法

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

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