手把手教你創建一個VUE項目簡單教程

創建一個Vue.js 項目的步驟：安裝先決條件： Node.js (v16.x )、Vue CLI（全局安裝）。創建項目： 使用vue create 命令，導航到目標目錄。安裝依賴： Vue CLI 自動安裝依賴。運行項目： 在項目目錄中，使用npm run serve 命令。

手把手教你創建一個Vue.js 項目

準備工作：

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

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

創建項目：

1. 打開終端或命令提示符，導航到您希望創建項目的位置。
2. 運行以下命令：

 <code>vue create </code>

安裝依賴：

• Vue CLI 將創建項目並自動安裝依賴項。

運行項目：

• 在項目目錄中，運行以下命令：

 <code>npm run serve</code>

• 這將在http://localhost:8080處啟動開發服務器。

項目結構：

• src/main.js：項目入口點，創建和掛載Vue 實例。
• src/App.vue：根Vue 組件，定義應用程序的佈局和內容。
• src/components：包含可重用的Vue 組件的目錄。
• public：包含靜態文件和favicon 的目錄。
• node_modules：由NPM 安裝的依賴項的目錄。
• package.json：包含項目設置、依賴項和腳本的JSON 文件。

代碼示例：

• src/main.js：

 <code class="js">import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')</code>

• src/App.vue：

 <code class="html"><template> <div> <h1 id="message">{{ message }}</h1> <button>Say Hello</button> </div> </template> <script> export default { data() { return { message: &#39;Hello Vue!&#39; } }, methods: { sayHello() { this.message = &#39;Hello, I am Vue!&#39; } } } </script></code>

注意：

• Vue CLI 會根據您選擇的預設和選項自動配置其他文件，例如.env和vue.config.js 。
• 可以通過運行vue create --help命令查看可用的預設和選項。

以上是手把手教你創建一個VUE項目簡單教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！