vue3搭建脚手架前的前置知识

無限進步island

于 2025-05-15 14:32:44 发布

阅读量262

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_64056556/article/details/147982616

版权

1. Vue3 核心概念

渐进式框架：
- 无需一次性掌握所有API，可逐步应用（如局部模块改造或整站开发）。
- 两种开发方式：
  1. 传统开发（直接引入Vue.js）。
  2. 工程化开发（推荐，使用Vite/Webpack等构建工具）。
声明式渲染：
- 通过插值表达式 {{ }} 将数据动态绑定到视图。
- setup函数：Vue3的入口函数，定义数据和方法并返回给模板使用。
数据响应式：
- reactive：将对象转换为响应式数据（仅支持对象类型）。
- ref：支持所有数据类型（操作时需.value，模板中无需）。
- 选择原则：
  - 明确字段的对象 → reactive。
  - 其他情况（如简单类型或不确定结构的对象） → ref。

2. 开发环境配置

推荐工具：
- 编辑器：VSCode + 插件（如Vue-Official、Vue3 Snippets、Auto Import等）。

工程化开发：

项目结构示例：

VUE-ENGINEERING-WAY/
  ├── node_modules/
  ├── public/
  ├── src/
  │   ├── components/
  │   ├── App.vue
  │   └── main.js
  ├── index.html
  └── package.json

使用Vite/Webpack进行模块化构建。

3. JavaScript 前置知识

变量与常量：
- const声明的数组/对象可修改内容（引用类型特性）。
模板字符串：
- 支持多行文本和嵌入表达式（${表达式}）。
解构赋值：
- 简化数组/对象取值（如 const { name } = obj）。
箭头函数：
- 语法简洁，无自己的this（适合回调函数）。
数组方法：
- map：映射新数组。
- filter：过滤满足条件的元素。
- reduce：汇总数据（如求和）。
异步处理：
- Promise：解决回调地狱，支持链式调用（.then）。
- Async/Await：以同步方式编写异步代码。
模块化：
- 默认导出：export default（每个模块仅一次）。
- 按需导出：export（可多次使用）。

4. 重点总结

Vue3 特性：
- 响应式数据（reactive与ref）是核心，需熟练掌握使用场景。
- setup函数是逻辑入口，替代了Vue2的data和methods。
开发实践：
- 工程化开发是主流，需熟悉Vite/Webpack配置。
- 结合模板字符串、解构赋值等JS特性提升代码简洁性。
JS 基础：
- 数组方法（map、filter、reduce）和异步处理（Async/Await）是高频考点。
- 模块化是大型项目必备能力。