Vue 3零基础入门：从环境搭建到第一个组件

一、Vue 3简介

Vue.js是一款渐进式JavaScript框架，用于构建用户界面。Vue 3是Vue的最新主要版本，于2020年9月发布，带来了许多改进和新特性：

更快的渲染速度
更小的包体积
Composition API（组合式API）
更好的TypeScript支持
新的响应式系统

二、环境搭建

1. 安装Node.js

Vue开发需要Node.js环境，请先安装Node.js（建议LTS版本）：

访问 Node.js官网下载安装包
安装完成后，在终端运行以下命令检查是否安装成功：

bash 复制代码

node -v
npm -v

2. 安装Vue CLI

Vue CLI是Vue官方提供的脚手架工具，用于快速创建Vue项目：

bash 复制代码

npm install -g @vue/cli

安装完成后检查版本：

bash 复制代码

vue --version

3. 创建第一个Vue项目

使用Vue CLI创建新项目：

bash 复制代码

vue create my-first-vue-app

选择Vue 3预设：

使用方向键选择"Manually select features"
确保选中"Choose Vue version"和"Babel"
选择Vue 3.x
其他选项按需选择或保持默认

进入项目目录并启动开发服务器：

bash 复制代码

cd my-first-vue-app
npm run serve

访问 http://localhost:8080 查看运行中的Vue应用。

三、项目结构解析

新创建的Vue项目主要目录结构如下：

复制代码

my-first-vue-app/
├── node_modules/    # 项目依赖
├── public/          # 静态资源
│   ├── index.html   # 主HTML文件
│   └── favicon.ico  # 网站图标
├── src/             # 源代码目录
│   ├── assets/      # 静态资源(图片、样式等)
│   ├── components/  # Vue组件
│   ├── App.vue      # 根组件
│   └── main.js      # 应用入口文件
├── package.json     # 项目配置和依赖
└── README.md        # 项目说明

四、创建第一个组件

1. 组件基础概念

在Vue中，组件是可复用的Vue实例，具有自己的模板、逻辑和样式。组件可以嵌套使用，构成整个应用。

2. 创建HelloWorld组件

在src/components目录下创建HelloWorld.vue文件：

vue 复制代码

<template>
  <div class="hello">
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">改变问候语</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      greeting: '你好，Vue 3!'
    }
  },
  methods: {
    changeGreeting() {
      this.greeting = '欢迎来到Vue 3世界!'
    }
  }
}
</script>

<style scoped>
.hello {
  color: #42b983;
  text-align: center;
  margin-top: 20px;
}
button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

3. 在App.vue中使用组件

修改src/App.vue文件：

vue 复制代码

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

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

4. 运行效果

保存文件后，开发服务器会自动重新加载，你将看到：

Vue logo图片
"你好，Vue 3!"的标题
一个按钮，点击后会改变问候语

五、Vue 3核心概念

1. 模板语法

Vue使用基于HTML的模板语法，允许开发者声明式地将数据绑定到DOM：

vue 复制代码

<template>
  <div>
    <!-- 文本插值 -->
    <p>{{ message }}</p>
    
    <!-- 属性绑定 -->
    <a :href="url">链接</a>
    
    <!-- 事件绑定 -->
    <button @click="handleClick">点击</button>
    
    <!-- 双向绑定 -->
    <input v-model="inputText">
  </div>
</template>

2. 响应式数据

Vue 3使用Proxy实现响应式系统：

javascript 复制代码

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

3. 生命周期钩子

Vue组件有一系列生命周期钩子函数：

javascript 复制代码

<script>
export default {
  beforeCreate() {
    console.log('组件实例刚被创建')
  },
  created() {
    console.log('组件实例创建完成')
  },
  mounted() {
    console.log('组件被挂载到DOM')
  },
  updated() {
    console.log('组件更新')
  },
  unmounted() {
    console.log('组件卸载')
  }
}
</script>

六、Composition API简介

Vue 3引入了Composition API，这是一种新的编写组件逻辑的方式：

vue 复制代码

<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}
</script>

七、下一步学习建议

深入学习Vue组件通信（props/emit）
了解Vue路由（vue-router）
学习状态管理（Vuex或Pinia）
探索更多Vue 3特性如Teleport、Suspense等
实践构建一个完整的Vue应用

通过这篇入门指南，你已经掌握了Vue 3的基本使用方法。继续实践和探索，Vue的世界还有更多精彩等待你去发现！