DATE: August 10, 2024

Vue 项目基本文件结构

my-vue-project/
├── node_modules/                     # 项目依赖的第三方模块
├── public/                           # 静态资源，如图片、样式表等
│   └── index.html                    # 主页面 HTML 文件
├── src/                              # 源代码目录
│   ├── assets/                       # 组件的静态资源，如图片、样式表等
│   ├── components/                   # Vue 组件目录
│   │   └── MyComponent.vue           # 一个 Vue 组件
│   ├── views/                        # 视图组件目录
│   │   └── MyView.vue                # 一个视图组件
│   ├── store/                        # 状态管理目录
│   │   └── index.js                  # Vuex 状态管理入口
│   ├── router/                       # 路由配置目录
│   │   └── index.js                  # 路由配置文件
│   ├── App.vue                       # 根组件
│   └── main.js                       # Vue 应用入口文件
├── .browserslistrc                  # 浏览器兼容性配置
├── .eslintrc.js                     # ESLint 配置文件
├── .gitignore                       # Git 忽略文件列表
├── babel.config.js                  # Babel 配置文件
├── package.json                     # 项目依赖和配置文件
├── README.md                        # 项目说明文档
└── vue.config.js                    # Vue CLI 配置文件
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

.vue文件

一个 .vue 文件通常包含三个部分，每个部分都使用特定的标签包裹：

  • <template>：定义组件的 HTML 模板
  • <script>：定义组件的 JavaScript 逻辑，包括数据、方法、计算属性、观察者、生命周期钩子等
  • <style>：定义组件的样式，可以是内联的 CSS、SCSS、LESS 等

export const

在 JavaScript 和 TypeScript 中，export const 是用来导出一个常量（一个不可变的变量）的语法。通常用于模块化编程，要从一个模块中公开某些数据或功能给其他模块使用时，

  • export 关键字用于指示后面的变量、函数或类应该被导出，这样其他文件就可以通过 import 关键字来使用它们。
  • const 关键字用于声明一个变量，其值在初始化后不能被改变。这意味着一旦你给这个变量赋值，它的值就固定了，不能被重新赋值。

interface

interface接口在 TypeScript 中用于定义对象的结构，确保对象符合特定的形状，提供了一种方式来强制执行代码中的类型检查，从而提高代码的可读性和可维护性，还可以用来模拟多态性，以及为不同类型的对象提供统一的操作接口。

通过扩展接口来添加新的属性或方法

interface Admin extends User {
	role: string;
}
  • 1.
  • 2.
  • 3.

在这个例子中，Admin接口扩展了 User接口，并添加了一个新的 role属性。