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

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

[cent@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] プロジェクト作成

[cent@dlp ~]$

./node_modules/.bin/vue create testproject3

(node:4853) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.8
  Creating project in /home/cent/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

[cent@dlp ~]$

cd testproject3

[cent@dlp testproject3]$

npm run serve


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

 INFO  Starting development server...


 DONE  Compiled successfully in 3065ms     12:42:24 PM


  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]	作成したテストアプリケーションを変更して動作確認します。

[cent@dlp ~]$

cd testproject3

[cent@dlp testproject3]$

vi src/components/HelloWorld.vue

<template>
  // ロゴの下に文字を挿入する
  <h1 style="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
  }

[cent@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>

[cent@dlp testproject3]$

npm run serve