2. 基础知识

友人大约 5 分钟

2. 基础知识

目录结构

my-vue3-project/
├── public/           # 静态资源文件夹，其中的文件会直接复制到构建输出目录中，无需经过编译处理
│   ├── favicon.ico    # 网站图标
│   └── index.html    # 应用程序入口HTML文件，Vue应用将挂载于此文件中的特定元素上
├── src/
│   ├── assets/        # 静态资源目录，包含图片、字体等未经过webpack编译的文件，可使用import导入并在构建时进行处理
│   ├── components/    # 组件目录，按照功能或类别划分存放单文件组件（.vue文件）
│   │   ├── Common/     # 公共组件目录
│   │   ├── Layout/     # 布局组件目录
│   │   └── ...         # 其他分类组件目录
│   ├── directives/    # 自定义指令目录，存放Vue自定义指令实现
│   ├── hooks/         # Vue Composition API 的自定义 Hooks 目录，用于组织和复用可组合的逻辑单元
│   ├── layouts/       # 应用布局相关的组件存放处，例如通用页面布局组件
│   │   ├── AppLayout.vue 
│   │   └── ...         # 其他布局相关页面组件
│   ├── pages/          # 页面组件目录，根据功能模块划分不同页面组件
│   │   ├── Home/       # 主页或首页相关页面组件
│   │   │   ├── Index.vue
│   │   │   └── ...
│   │   ├── User/       # 用户管理相关的页面组件
│   │   │   ├── Profile.vue
│   │   │   ├── Settings.vue
│   │   │   └── ...
│   │   ├── Product/    # 产品管理相关的页面组件
│   │   │   ├── List.vue
│   │   │   ├── Detail.vue
│   │   │   └── ...
│   │   └── ...         # 其他功能模块的页面组件目录
│   ├── plugins/       # Vue 插件配置目录，存放全局注册的插件及其配置
│   ├── router/        # 路由配置目录，主要包含index.js路由文件，用于配置应用程序的路由规则
│   ├── store/         # Vuex 状态管理目录，用于集中管理组件状态和数据流
│   ├── styles/        # 样式文件目录，包括全局样式、主题样式等
│   ├── utils/         # 工具函数和类库目录，存放项目中常用的工具函数、辅助类等
│   ├── App.vue        # 应用程序根组件，整个应用的入口点，通常包含路由视图和其他全局共享组件
│   ├── main.ts        # 应用程序入口脚本，用于初始化Vue实例、引入并配置路由、状态管理等核心模块
│   └── shims-vue.d.ts # TypeScript 类型声明文件，为Vue相关API提供类型支持
├── tests/             # 测试相关文件目录，存放单元测试、集成测试等代码
├── .env.*             # 环境变量配置文件，根据不同环境如开发、生产等设置不同的环境变量
├── .eslintrc.js       # Eslint 配置文件，用于定义项目的代码风格规范和错误检查规则
├── .gitignore         # Git 忽略文件，列出不需要添加到版本控制的文件或目录
├── package-lock.json  #  npm 包管理器中用于锁定项目依赖版本的文件
├── package.json       # npm 包配置文件，包括项目依赖、脚本命令、项目信息等元数据
├── vite.config.ts     # Vite 构建工具的配置文件，用于定制Vite的构建行为（如果使用Vite构建系统）
├── README.md          # 项目文档和说明文件，介绍项目结构、启动方式及注意事项等
├── tsconfig.json          # TypeScript 项目的核心配置文件，用于指定编译选项、包含的源文件、排除的文件等信息
├── tsconfig.node.json          # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置
├── .prettierrc        # Prettier 代码格式化配置文件，定义代码格式化规则
├── .ls-lint.yml       # Linting 规则配置文件，例如针对Less预处理器的代码风格检查规则
└── changelog.md       # 更新日志文件，记录项目的版本迭代和更新内容

命名规范

Vue 组件：大驼峰命名法。MyVueComponent
变量：小驼峰命名法。myVueVariable
方法：小驼峰命名法。getUserInfo()
目录：小写英文即可。component/common/header/
常量：全为大写英文的蛇形命名法。SUCCESS_CODE

Vue 组件组成

每个 Vue 组件由 3 个部分组成：模板区<template></template>、JS/TS 脚本区<script></script>、CSS 样式区<style></style>，其中模板区是必须存在的，JS 脚本区和 CSS 样式区是可选的。

模板区<template></template>：主要编写渲染在页面上的一些 HTML
JS/TS 脚本区<script></script>：主要编写一些在当前组件中使用到的一些脚本
CSS 样式区<style></style>：主要编写一些在当前组件中使用到的样式表

下面是一个简单的 Vue 组件实例

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

API风格

这里的 API 风格是指 Vue 的两种编写风格，一种是组合式，一种是选项式。

选项式 Options API ：其内部的数据、方法、计算属性是分散的，新增和修改时，就需要分别修改data、method、computed，不便于维护和更新。

组合式 Composition API：可以采用函数的方式，实现代码的复用，且逻辑清晰，便于维护和更新。

说明：以上四张动图原创作者：大帅老猿

两种 API 风格的选择和使用，主要是依靠 Setup 来进行的，具体请参考下面 Setup 小节的内容。

Setup

Vue 3 中的 Setup 有两种，一种是 setup 函数，一种是 script 中的 setup。

setup 函数：一般是 Vue2 中的选项式 API 使用，使用方法如下所示：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

script 中的 setup：Vue3 中为了简化setup函数，一般是组合式 API 使用，是目前比较主流的一种方式。

<script>
import { ref } from 'vue'

const count = ref(0)

// 计算属性
const mounted =  computed(() => {
    return count.value + 1  // 1
})
</script>

<template>
    <p>计算后的值：{{ mounted }}</p>
    <button @click="count++">{{ count }}</button>
</template>

小结

对比上面两种风格的 API，能够明显的看到，组合式 API 的优势，所以在 Vue 3 的开发中，推荐使用这种用法。

本系列的后续教程也均以组合式 API 的风格来进行说明。