Vue入门：vue项目的创建和基本概念

一、vue的基本简介

1. 什么是vue?

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2. 渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和"可以被逐步集成"这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

3. 单文件组件

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC )。大家可以认为vue只要一个页面（一个HTML文件），页面的跳转和切换都是在这个页面上，基于路由来进行vue组件的切换。

二、怎么创建第一个vue项目

1、确保存在nodejs,可以通过npm -v测试，没有需要npm install,（如果已经安装，控制台不能使用，需要配置环境变量）

如果没有下载通过一下代码下载：

bash 复制代码

npm install

2、 npm create vue@latest：创建一个最新版本的vue项目

bash 复制代码

 npm create vue@latest

3、cd 项目名:切换到当前项目

4、npm install(简写：install i)：在项目中安装nodejs

5、npm run dev:启动项目

6. 创建成功效果

三、项目结构解析

了解一门技术的最简单的方法就是了解项目的目录结构，这里就为大家详细的介绍一下项目结构：

四、基础页面样式和基础内容的格式化

打开终端打开项目网页的页面查看：

页面并不是空的，原因是每次创建一个新项目的时候都会有自己的基础页面，我们可以把基础样式的压面内容和样式删掉，接来就带大家删除：

删除和注释后的样子：

删除App根组件的代码：

保留**结构层（html底代码），样式层（css样式代码），逻辑层（te/js代码）**的基本代码：

再打开打开终端打开项目网页的页面查看：

这样原来的页面和基础样式就被清除了。

五、选项式 API (Options API) 和组合式 API(Composition API)

1. 基本概念

其实我相信大家看见听见选项式API和组合式API大家肯定会都会有个问题：

①这个两个到底是什么？

选项式 API（Options API） ：是 Vue2 中主要的编程方式 ，在 Vue3 中也保持兼容。它通过在组件对象中定义**data、methods、computed、watch**等选项来组织代码，每个选项对应组件的不同功能模块。
组合式 API（Composition API） ：是 Vue3 引入的新特性 ，以 setup 函数为入口，通过 ref、reactive、computed 等函数来创建响应式数据和逻辑，允许将相关功能的代码聚合在一起，更灵活地组织组件逻辑
总的来说：选项式 API（vue2：）和组合式 API(vue3)是vue的两种不同的写法，都能通过他们来写页面，但是新技术肯定要比旧技术要好，所以我们以后还是主要学习组合式 API。

②有什么区别吗？

对比维度	选项式 API	组合式 API
代码组织方式	按选项（`data`、`methods` 等）分割，相关逻辑可能分散	按功能模块聚合，同一功能的代码集中在一起
灵活性	逻辑复用依赖 `mixin`，易产生命名冲突和来源不清问题	可通过自定义函数封装逻辑，复用性更高，来源清晰
类型支持	对 TypeScript 支持较弱，类型推断有限	天然适配 TypeScript，类型检查更完善
学习成本	直观易懂，适合初学者入门	需理解响应式 API（如 `ref`、`reactive`），初期有一定门槛
适用场景	简单组件或中小型项目	复杂组件或大型项目，便于维护和扩展

③都要学吗？

对于新手，可先掌握选项式 API 建立基础，再逐步学习组合式 API；对于有经验的开发者，建议重点掌握组合式 API 以充分发挥 Vue3 的优势。

2. vue的子组件的创建和页面渲染的原理

2.1 创建子组件

创建选项式子组件：

创建组合式子组件：（代码更加简介）

2.2 单页面渲染的原理

大家仔细阅读了前面的内容应该知道vue只有一个页面，渲染的基本步骤是：

components的子组件==>App根组件==>main.ts渲染==>index页面

①子组件写入基本文字提示

②导入App.vue根组件

③main.ts渲染到index

3. 选项式API示例

html 复制代码

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
<script lang="ts">
export default {
  name: 'App',
  data() {
    return {
      name: '张三',
      age: 18,
      tel: '13888888888'
    }
  },
  methods: {
    changeName() {
      this.name = 'zhang-san'
    },
    changeAge() {
      this.age += 1
    },
    showTel() {
      alert(this.tel)
    }
  }
}
</script>
<style scoped>
</style>

4. 组合式API实例

html 复制代码

<script setup lang="ts">
  import { ref } from 'vue'
  let name = ref('张三')
  let age = ref(18)
  let tel = ref('12345678901')
  function changeName() {
    name.value = '李四'
  }
  function changeAge() {
    age.value++
  }
  function showTel() {
    alert(tel.value)
  }
</script>

<template>
  <h1>组合式API写法</h1>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<style scoped>

</style>

运行结果：

六、总结

Vue3 作为 Vue.js 的重大更新，带来了性能的显著提升、源码的优化、更好的 TypeScript 支持以及众多新特性。在项目创建方面，Vite 作为新一代构建工具，相比 vue - cli 具有更快的启动速度和更好的开发体验，是创建 Vue3 项目的推荐选择。

通过本文的介绍，我们了解了 Vue3 的核心特性、项目创建方法、第一个应用的实现以及实际案例解析。希望这些内容能帮助你快速上手 Vue3，并在实际开发中充分发挥其优势。无论是从 Vue2 迁移到 Vue3，还是直接学习 Vue3，都能感受到它带来的便利和提升。