Vue.js : Install2025/02/28

	Install Vue.js which is a JavaScript framework.
[1]	Install Node.js, refer to here.
[2]	Create a test Vue.js application with a common user.

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

// create [testproject3] project

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.

Access to the URL that is shown on the console above from any client computer, and then that's OK if following app is shown.

[3]	Modify the test application you created and check it works.

ubuntu@dlp:~$

cd testproject3

ubuntu@dlp:~/testproject3$

vi src/components/HelloWorld.vue

<template>
  // insert tags
  <h1 style="font-size: 36px; color: red;">{{ MyHello }}</h1>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>


<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    // set [MyHello] string
    MyHello: String
  }

ubuntu@dlp:~/testproject3$

vi src/App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  // set string you like to show
  <HelloWorld MyHello="Hello Vue.js World!" msg="Welcome to Your Vue.js App"/>
</template>

ubuntu@dlp:~/testproject3$

npm run serve

Matched Content