創(chuàng)建一個(gè) Vue.js 項(xiàng)目的步驟：安裝先決條件： Node.js (v16.x )、Vue CLI（全局安裝）。創(chuàng)建項(xiàng)目： 使用 vue create 命令，導(dǎo)航到目標(biāo)目錄。安裝依賴： Vue CLI 自動(dòng)安裝依賴。運(yùn)行項(xiàng)目： 在項(xiàng)目目錄中，使用 npm run serve 命令。

手把手教你創(chuàng)建一個(gè) Vue.js 項(xiàng)目

準(zhǔn)備工作：

• 安裝 Node.js (v16.x 或更高版本)
• 安裝 Vue CLI (全局安裝)

<code>npm install -g @vue/cli</code>

創(chuàng)建項(xiàng)目：

1. 打開終端或命令提示符，導(dǎo)航到您希望創(chuàng)建項(xiàng)目的位置。
2. 運(yùn)行以下命令：

<code>vue create </code>

安裝依賴：

• Vue CLI 將創(chuàng)建項(xiàng)目并自動(dòng)安裝依賴項(xiàng)。

運(yùn)行項(xiàng)目：

• 在項(xiàng)目目錄中，運(yùn)行以下命令：

<code>npm run serve</code>

• 這將在 http://localhost:8080 處啟動(dòng)開發(fā)服務(wù)器。

項(xiàng)目結(jié)構(gòu)：

• src/main.js： 項(xiàng)目入口點(diǎn)，創(chuàng)建和掛載 Vue 實(shí)例。
• src/App.vue： 根 Vue 組件，定義應(yīng)用程序的布局和內(nèi)容。
• src/components： 包含可重用的 Vue 組件的目錄。
• public： 包含靜態(tài)文件和 favicon 的目錄。
• node_modules： 由 NPM 安裝的依賴項(xiàng)的目錄。
• package.json： 包含項(xiàng)目設(shè)置、依賴項(xiàng)和腳本的 JSON 文件。

代碼示例：

• src/main.js：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• src/App.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    sayHello() {
      this.message = 'Hello, I am Vue!'
    }
  }
}
</script>

注意：

• Vue CLI 會(huì)根據(jù)您選擇的預(yù)設(shè)和選項(xiàng)自動(dòng)配置其他文件，例如 .env 和 vue.config.js。
• 可以通過運(yùn)行 vue create --help 命令查看可用的預(yù)設(shè)和選項(xiàng)。

以上是手把手教你創(chuàng)建一個(gè)VUE項(xiàng)目簡單教程的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！