vue 项目创建

// 使用 Vue CLI 创建 Vue 项目

// 1. 首先确保你已经安装了 Node.js 和 npm
// 2. 安装 Vue CLI（如果还没有安装的话）
// 打开终端并运行以下命令：
// npm install -g @vue/cli

// 3. 创建一个新的 Vue 项目
// 在终端中运行以下命令来创建一个新的 Vue 项目：
// vue create my-project

// 这将启动一个交互式向导，你可以选择默认配置或手动选择特性。

// 4. 进入项目目录并启动开发服务器
// cd my-project
// npm run serve

// 以上命令会自动打开浏览器并访问 http://localhost:8080，你就可以看到新创建的 Vue 项目在运行。

// 下面是一个简单的 `main.js` 文件示例，它是项目的入口文件：

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

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

// `App.vue` 是项目的根组件，通常包含模板、样式和逻辑。以下是一个简单的 `App.vue` 示例：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

• Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建 Vue 项目。
• vue create 命令用于创建一个新的 Vue 项目，并且可以根据需要选择不同的预设配置。
• main.js 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 元素上。
• App.vue 是根组件，包含了页面的主要结构、样式和逻辑。