Vue.jsを使って | python3Xのブログ

python3Xのブログ

ここでは40代、50代の方が日々の生活で役に立つ情報や私の趣味であるプログラム、Excelや科学に関する内容で投稿する予定です。

まず、最新のVue Cli をインストールしなければなりませんが

古いバージョンをインストールしていた場合は

注意しなければならない点がいくつかあります

(グレー文字はコマンド)

①旧バージョンの削除

 npm uninstall -g vue-cli

 

②npmの削除(最新バージョンインストール時のエラーを回避するため)

 npm cache clean

  npm uninstall npm -g

 更に、

 C:\Users\UserName\AppData\Roming下の

 npmフォルダとnpm-cacheファルダを削除します

 

Node.jsのインストール(詳しいサイトが多いので簡単に)

 

④Vue Cli のインストール

 npm update -g npm (npm も最新版が必要)

 npm install -g @vue/cli

 

⑤プロジェクトの作成

 vue ui

 プロジェクト管理ツールが立ち上がる

 作成 -> ここに新しいプロジェクトを作成する -> プロジェクトフォルダ(例:my-project) -> 次へ

 

 プリセットの設定 -> とりあえず babel, eslint を選択 -> プロジェクトを作成する

 下図のプロジェクト管理画面が表示される

 

⑥ローカル環境向けビルド

 タスク -> serve -> タスクの実行

 http://localhost:8080 で確認(商品一覧)

 

⑦運用環境向けビルド

 タスク -> build -> タスクの実行(Value Domainにアップしたのが下のURL)

 

URL:https://pylearning.shop/