这些文章记录了我的学习点滴。如果对您有一点点启发，不妨点个赞或收藏一下；也期待您的指正，我们一起学习成长。
创建一个Vue应用
前提条件：已经安装^20.19.0 || >=22.12.0 版本的 Node.js
npm create vue@latest- 这一指令将会安装并执行create-vue，它是Vue官方的项目脚手架工具。接下来需要选择一些诸如TypeSctipt和测试支持之类的可选功能提示：
-
根据自己的需要选择，这里我只选了TypeScript,其他的后面学到再添加。
选择要包含的试验特性： (↑/↓ 切换，空格选择，a 全选，回车确认)
│ ◻ Oxlint（试验阶段）
│ ◻ rolldown-vite（试验阶段） -
这个实验阶段也没有选择，直接回车
◆ 跳过所有示例代码，创建一个空白的 Vue 项目？
│ ○ Yes / ● No -
这个实例代码可以留着，后面再删除，这样一个vue工程就创建完成了。
-
之后安装所有的依赖
npm install
目录介绍
vue-project/
|-- public/ # 公共文件，不会被Webpack处理
| |-- index.html # 入口HTML文件
|-- src/ # 源代码目录
| |-- assets/ # 静态资源，如图片、字体等
| |-- components/ # Vue组件
| |-- views/ # 页面组件
| |-- router/ # 路由配置
| | |-- index.js # 路由定义
| |-- store/ # Vuex状态管理（如果有使用）
| | |-- index.js # Vuex store定义
| |-- App.vue # 根组件
| |-- main.js # 入口JavaScript文件，创建Vue实例
|-- .env # 环境变量配置文件
|-- .env.local # 本地环境变量配置文件
|-- .env.production # 生产环境变量配置文件
|-- .env.development # 开发环境变量配置文件
|-- .gitignore # Git忽略文件配置
|-- babel.config.js # Babel配置文件（用于ES6转ES5等）
|-- jest.config.js # Jest测试配置文件（如果使用Jest进行单元测试）
|-- package.json # 项目依赖和脚本配置
|-- README.md # 项目说明文档
|-- vue.config.js # Vue CLI配置文件（Vue CLI 3及以上版本使用）解释
- public/ : 存放公共资源，如
index.html文件，它不会被Webpack处理，直接被复制到输出目录。 - src/ : 源代码目录，包含所有开发代码。
- **assets/**: 存放图片、字体等静态资源。
- **components/**: 存放Vue组件，这些组件可以被多个视图复用。
- **views/**: 存放视图组件，每个视图对应一个路由。
- **router/**: 存放Vue Router的配置。
- **store/**: 存放Vuex的状态管理（如果使用）。
- App.vue: 根组件，所有其他组件的父组件。
- main.js: 入口JavaScript文件，用于创建Vue实例和初始化应用。
- **.env**系列文件: 用于定义环境变量，根据不同的环境（开发、测试、生产）加载不同的配置。
- **.gitignore**: 定义Git应当忽略的文件和目录。
- babel.config.js: Babel配置文件，用于转译JavaScript代码。
- jest.config.js: Jest测试配置文件，用于设置单元测试环境。
- package.json: 项目依赖管理和脚本配置文件。
- README.md: 项目说明文档，介绍项目的基本信息和如何运行项目。
- vue.config.js: Vue CLI的配置文件，可以用于修改Webpack配置等。
自定义结构建议
- 根据项目规模和需求调整文件夹结构，例如可以添加
utils文件夹存放工具函数，services文件夹存放API调用服务等。 - 对于大型项目，可以考虑将功能模块化，每个模块有自己的
components、views、store等目录。 - 使用Monorepo工具（如Lerna或Yarn Workspaces）来管理多个Vue项目或库的依赖关系和版本控制。
这样的结构有助于保持代码的组织性和可维护性，使得团队协作更加高效。