フロントエンドとバックエンドを分離することで開発効率が大幅に向上しますが、主流となっているのはVue.js+SpringBootです ここでは主にMac 側の Vue の入門チュートリアルを紹介します。ハードウェア、ソフトウェア環境はMacbook Air M2+macOS Vantura 13.4.1です。
Vue (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための JavaScript フレームワークであり、 Webpack に基づいた公式の Vue ツールチェーンです。これは標準の HTML、CSS、および JavaScript に基づいて構築されており、ユーザー インターフェイスを効率的に開発するのに役立つ一連の宣言型コンポーネント化プログラミング モデルを提供します。単純なインターフェイスであっても複雑なインターフェイスであっても、Vue はそれを処理できます。また、Vue の公式ページには、 Vue CLI が現在メンテナンス モードである
ことが示されている点にも言及する必要があります。特定の Webpack 機能に依存しない限り、新しいプロジェクトを開始するにはViteを使用することをお勧めします。ほとんどの場合、Vite の方が優れた開発エクスペリエンスが提供されます。 。
1. ノードのインストール
Vue をインストールする前に、必要なバージョンの Node.js を最初にインストールする必要があります。Vue CLI 4.x には Node.js v8.9 以降が必要です (v10 以降を推奨)。Nodejs China の公式 Web サイトhttp://www.nodejs.com.cn/download.html
を開き、macOS インストール パッケージ内の対応するARM64 バージョンの LTS 長期保守バージョンを選択します(ここでは独自のバージョンに応じて選択できます)必要なコンテンツの最新バージョンがある場合、または最新バージョンを選択します)。ダウンロード後、それを開き、インストールガイドに従って段階的にインストールします。中央で同意する必要があるさまざまな条件をクリックして同意すると、最後に、次の図に示すように、インストールが成功したインターフェイスが表示されます。インストールが成功したら、右下隅にある [閉じる] をクリックしてから+ をクリックし、ターミナルを検索して開き、次のように入力します。
command空格
% node -v
と
% npm -v
対応するバージョン番号が表示されれば、インストールは成功です。
2.Vue CLIをインストールする
ターミナルのコマンドラインでの作業を続けます。入力
% sudo npm install -g @vue/cli
次に、Mac アカウントのパスワードを入力します (このとき、入力したパスワードは端末に表示されません。心配しないで直接入力してください)。システムは自動的にインストールされます。
インストール プロセス中に多くの警告が表示されますが、これは正常な現象です。インストールが完了したら、次のように入力します
% vue --version
Vue のバージョン番号が表示されれば、インストールは成功です。
3. 最初の Vue プロジェクトを作成する
まず、ターミナルで cd コマンドを使用して、プロジェクトを作成する必要がある場所を入力します。作成者の場所は「vue-study」フォルダーであり、次に次のように入力します。
% vue create hello-world
(hello-world は作成するプロジェクトの名前であり、カスタマイズできます)
次の図のプロンプトでは、Y を入力して Enter キーを押します。その後、プリセットを選択するように求められます。デフォルトのプリセットを選択できます。基本的な Babel + ESLint 設定のプリセットが含まれていますが、「機能を手動で選択」を選択して必要な機能を選択することもできます。ここで、 Vue 3 バージョンを直接選択できます。次に、以下の図に示すように、Vue CLI がプロジェクトを自動的にビルドし、最後に「プロジェクト hello-world が正常に作成されました
」と表示され、プロンプトに従ってコマンドの入力を求められます。これら 2行のコマンドを入力すると、プロジェクトが自動的に実行を開始し、最終的にWeb ページのローカルとネットワークの下にある URL が表示されます。これら 2 つのアドレスのいずれかをブラウザに入力すると、下図のページが正常に開くことができ、完了です。
4. 不測の事態
上記のプロセスでは、作成者は Vue プロジェクトの作成時にプリセットを選択した後にエラーが発生しました。表示されたエラー メッセージは次のとおりでした: エラー: コマンドが失敗しました: npm install --loglevel error
--legacy-peer-deps
この場合、ターミナルのコマンド
% sudo npm cache clean --force
Mac アカウントのパスワードを入力すると、次の図のように、
npm WARN using --force 推奨保護が無効になっていると表示されますので、この時点でプロジェクトを再作成すると成功します。
参考資料：
Vue.js公式サイト：https://cn.vuejs.org/
Vue-Cli公式サイト：https://cli.vuejs.org/zh/guide/