Vue2知识点全览：组件、脚手架配置与ref、props详解

本资源主要针对Vue2的核心知识点进行了整理，涵盖了Vue2脚手架的基本结构、不同版本之间的区别、vue.config.js配置文件的使用、以及`ref`属性和`props`配置项的详细介绍。 ### Vue2脚手架文件结构 Vue2项目的结构通常包括以下组成部分： 1. `node_modules`: 存放第三方库和依赖的模块。 2. `public`: 公共文件夹，如`favicon.ico`和`index.html`，其中`index.html`是项目主页面。 3. `src`: 源码目录，包含： - `assets`: 存放静态资源，如图片（例如`logo.png`）。 - `components`: 存放自定义组件，如`HelloWorld.vue`和`App.vue`，`App.vue`通常作为整个应用的容器。 - `main.js`: 应用的入口文件，负责启动Vue实例和引入其他模块。 4. `.gitignore`: 忽略文件列表，用于Git版本控制。 5. `babel.config.js`: Babel的配置文件，用于处理ES6等现代JavaScript语法。 6. `package.json`: 包含应用的元数据、依赖、开发和构建工具配置等。 7. `package-lock.json`: 包版本锁定文件，确保项目依赖的一致性。 ### Vue1与Vue2版本差异 - `vue.js`是Vue的完整版本，包含核心功能和模板解析器，适合开发时使用。 - `vue.runtime.xxx.js`是运行时版本，只有核心功能，不包含模板解析，需配合`vue.js`一起使用，适用于构建生产环境的轻量级应用。 ### vue.config.js配置文件 - 这个配置文件允许开发者自定义Vue CLI的构建行为，通过`vue inspect > output.js`可以查看默认配置。 - 它可以用来调整编译选项、优化、路径映射等，以适应特定的项目需求，参考文档：https://cli.vuejs.org/zh/guide/webpack.html#%E8%AE%BE%E8%AF%95%E9%85%8D%E7%BD%AE ### ref属性 - `ref`属性用于给元素或子组件注册引用信息，类似HTML的id，但提供了更好的类型安全和组件实例访问。 - 在HTML中使用：`<h1 ref="xxx">...</h1>` 或 `<School ref="xxx"></School>` - 可以通过`this.$refs.xxx`来访问注册的引用。 ### props配置项 - `props`用于组件间的数据传递，让外部可以向组件提供数据。 - 使用方法： - 直接接收：`props: ['name']` - 限制类型：`props: { name: String }` - 限制类型并强制：`props: { name: { type: String, required: true } }` 总结起来，这个资源重点讲解了Vue2项目的基础结构、版本选择、配置文件的应用以及关键的`ref`和`props`属性的使用，为学习和开发Vue2项目提供了实用的指导。