Vite : Install2025/07/10

	Install the front-end build tool Vite.
[1]	Install Node.js, refer to here.
[2]	Create a test Vite application with a vue.js template.

[cent@dlp ~]$

npm create vite@latest testproject2 -- --template vue

Need to install the following packages:
create-vite@7.0.1
Ok to proceed? (y)


> npx
> create-vite testproject2 --template vue

|
|  Scaffolding project in /home/cent/testproject2...
|
+  Done. Now run:

  cd testproject2
  npm install
  npm run dev

[cent@dlp ~]$

cd testproject2

[cent@dlp testproject2]$

npm install


added 34 packages, and audited 35 packages in 15s

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

found 0 vulnerabilities

[cent@dlp testproject2]$

npm run dev


> testproject2@0.0.0 dev
> vite


  VITE v7.0.3  ready in 395 ms

  →  Local:   http://localhost:5173/
  →  Network: use --host to expose
  →  press h + enter to show help

# if you like to access to the app from remote hosts, add [--host] option

[cent@dlp testproject2]$

vi package.json

{
  "name": "testproject2",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    // add follows
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },

[cent@dlp testproject2]$

vi vite.config.js

export default defineConfig({
  // add follows
  server: {
    host: true,
  },
  plugins: [vue()],
})

[cent@dlp testproject2]$

npm run dev


> testproject2@0.0.0 dev
> vite --host


  VITE v7.0.3  ready in 298 ms

  →  Local:   http://localhost:5173/
  →  Network: http://10.0.0.30:5173/
  →  press h + enter to show help

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

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

[cent@dlp ~]$

cd testproject2

[cent@dlp testproject2]$

vi src/components/HelloWorld.vue

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
  // set [MyHello] string
  MyHello: String
})

.....
.....

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

[cent@dlp testproject2]$

vi src/App.vue

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld MyHello="Hello Vite World!" msg="Vite + Vue" />
</template>

[cent@dlp testproject2]$

npm run dev

Matched Content