Vue.js : インストール2025/02/28

	JavaScript フレームワーク Vue.js のインストールです。
[1]	こちらを参考に Node.js をインストールしておきます。
[2]	任意の一般ユーザーで Vue.js テストアプリケーションを作成します。

ubuntu@dlp:~$

npm install @vue/cli

up to date, audited 839 packages in 2s

76 packages are looking for funding
  run `npm fund` for details

// [testproject3] プロジェクト作成

ubuntu@dlp:~$

./node_modules/.bin/vue create testproject3

.....
.....

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
Vue CLI v5.0.8
   Creating project in /home/ubuntu/testproject3.
   Initializing git repository...
   Installing CLI plugins. This might take a while...

.....
.....

  Successfully created project testproject3.
  Get started with the following commands:

 $ cd testproject3
 $ npm run serve

ubuntu@dlp:~$

cd testproject3

ubuntu@dlp:~/testproject3$

npm run serve


> testproject3@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 DONE  Compiled successfully in 4025ms


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.0.0.30:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

任意のクライアントコンピューターで表示された URL に Web アクセスして、以下のようなページが表示されれば OK です。

[3]	作成したテストアプリケーションを変更して動作確認します。

ubuntu@dlp:~$

cd testproject3

ubuntu@dlp:~/testproject3$

vi src/components/HelloWorld.vue

<template>
  // ロゴの下に文字を挿入する
  <h1 style="font-size: 36px; color: red;">{{ MyHello }}</h1>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>


<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    // [MyHello] string を定義する
    MyHello: String
  }

ubuntu@dlp:~/testproject3$

vi src/App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  // 表示したい文字をセットする
  <HelloWorld MyHello="Hello Vue.js World!" msg="Welcome to Your Vue.js App"/>
</template>

ubuntu@dlp:~/testproject3$

npm run serve