Vue プロジェクトの作成 (デモ) チュートリアル

個人デモの作成方法

1:環境の準備

Node.jsをインストールする

Node公式サイト:https://nodejs.org/zh-cn/

インストールが完了したら、バージョンを確認します。cmdコマンド ウィンドウ
を開き、 node -vを使用してバージョン番号を確認します。バージョン番号が表示されれば、インストールは成功です。

node -v
npm -v
安装淘宝镜像: 
npm install -g cnpm --registry=https://registry.npm.taobao.org

ここに画像の説明を挿入
cnpm を使用する理由?
この 2 つは、node の異なるパッケージ マネージャーです。npm は、node の公式パッケージ マネージャーであり、cnpm は、npm の中国語版です。これは、淘宝網によってカスタマイズされた cnpm (gzip 圧縮サポート) コマンド ライン ツールであり、デフォルトの npm
。cnpm の方が高速であることを理解する

2: プロジェクトコンテナとしてフォルダーを作成する

1: フォルダーを作成します
ここに画像の説明を挿入
2: フォルダーに入り、右クリックしてコマンド ラインを開きます
ここに画像の説明を挿入
3: ターミナルにコマンドを入力して、独自の vue プロジェクトの作成を開始します
vue create + カスタム プロジェクト名

vue create demo

ここに画像の説明を挿入
4: 構成情報を選択し、上下の矢印キーを使用して [OK] を選択し、Enter キーを押して次のステップに進みます。
ここに画像の説明を挿入
5: インストールを待ちます。

ここに画像の説明を挿入
6: インストールは成功しました
ここに画像の説明を挿入

3: インストールが成功したら、エディタでファイルを開きます

npm run serveプロジェクトのコマンドを実行するためのプロンプトに注意してください
方法npm run serveまたはnpm run dev ?
エディターを開き、プロジェクト ファイルの場所を見つけて、「ファイル
ここに画像の説明を挿入
ここに画像の説明を挿入
で表示」を開きます。package.json
ここに画像の説明を挿入

4: プロジェクトを実行する

1:作成したフォルダーのディレクトリに移動し、それを使用してnpm run serve実行し
ここに画像の説明を挿入
ます。 2: ブラウザーで開きます。 マウスの左ボタンを
使用してクリックして開きます。 3: 効果の表示:ctrlhttp://localhost:8080/

ここに画像の説明を挿入

  • 初期化プロジェクトの各ファイルとフォルダーの説明
    ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/Kinrun/article/details/126727436