vue项目搭建

// Vue 项目搭建示例代码

// 1. 首先确保你已经安装了 Node.js 和 npm
// 你可以通过以下命令检查是否已安装：
// node -v
// npm -v

// 2. 全局安装 Vue CLI
npm install -g @vue/cli

// 3. 创建一个新的 Vue 项目
vue create my-project

// 这个命令会引导你选择一些配置选项，比如是否使用 TypeScript、Vuex、Vue Router 等。

// 4. 进入项目目录
cd my-project

// 5. 启动开发服务器
npm run serve

// 上述步骤完成后，你的 Vue 项目就已经成功搭建起来了。默认情况下，项目会在 http://localhost:8080 运行。

// 下面是一个简单的 App.vue 文件示例：

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

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

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

// 解释说明：
// - `<template>` 标签中定义了页面的 HTML 结构。
// - `<script>` 标签中定义了组件的逻辑，包括数据、方法等。
// - `<style>` 标签中定义了组件的样式。
// - `data()` 函数返回一个对象，这个对象中的属性可以在模板中通过 `{{ }}` 语法进行双向绑定。