Vue 環境のセットアップとプロジェクトの構築
まず、必要なものを列挙します:
node.js 環境 (npm パッケージ マネージャー)
vue-cli スキャフォールディング構築ツール
cnpm npm の Taobao イメージ
1. node.js をインストール
2. ノードからダウンロードし、 js 公式 Web サイトからノードをインストールします。インストール プロセスは非常に簡単で、最後まで「次のステップ」を実行するだけです (愚かなインストール)。
インストールが完了したら、以下に示すようにコマンド ライン ツールを開き、「node -v」と入力します。対応するバージョン番号が表示されれば、インストールは成功です。
npmパッケージマネージャーはnodeに統合されているため、直接npm -vと入力すると、下図のようにnpmのバージョン情報が表示されます。
わかりました！ノード環境がインストールされており、npm パッケージ マネージャーも利用可能です。一部の npm リソースがブロックされているか外部リソースであるため、npm を使用して依存関係パッケージをインストールすると失敗することがよくあるため、npm の国内ミラーである cnpm も必要です。/
2. cnpmをインストールするには、
コマンドラインに「npm install -g cnpm --registry=http://registry.npm.taabao.org」と入力して待つと、以下のようにインストールが完了します。完了後、npm の代わりに cnpm を使用して依存関係パッケージをインストールできます。cnpm について詳しく知りたい場合は、淘宝網 npm ミラー公式ウェブサイトをご覧ください。
3. vue-cli スキャフォールディング構築ツールをインストールする
コマンド ラインでコマンド cnpm install -g vue-cli を実行し、インストールが完了するまで待ちます。(ここでは npm ではなく cnpm を使用しています。そうしないと速度が非常に遅くなり、固まってしまいます。)
以上の 3 つのステップを経て、準備する必要のある環境とツールが準備できました。そして、vue-を使い始めます。 cli を使用してプロジェクトをビルドします。
4. vue-cli を使用してプロジェクトをビルドします。
1) (プロジェクトを配置する必要があるディレクトリに cmd) コマンド vue init webpack vue-demo を使用して vue プロジェクトをビルドします。「vue-demo」はプロジェクト名です。
2) インストールする必要があるvue環境を設定します
3) 上記の手順が完了すると、プロジェクトのディレクトリ構造は下図のようになり、src ディレクトリ内のファイルが使用するファイルになります。
4) npm run dev コマンドを実行してプロジェクトを開始します。
次の画像が表示されたら、プロジェクトは正常に開始されました。
現時点では、リンク http://localhost:8080 にアクセスすることで、ブラウザを通じてプロジェクトにアクセスできます。ページは次のようになりました。