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官网下载安装包
安装完成后，在终端运行以下命令检查是否安装成功：

node -v
npm -v

2. 安装Vue CLI

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

npm install -g @vue/cli

安装完成后检查版本：

vue --version

3. 创建第一个Vue项目

使用Vue CLI创建新项目：

vue create my-first-vue-app

选择Vue 3预设：

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

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

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文件：

<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文件：

<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：

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

2. 响应式数据

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

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

3. 生命周期钩子

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

<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，这是一种新的编写组件逻辑的方式：

<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>