第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目
第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解
第Ⅰ章-III Vite 创建vue3 项目
了解Vue
Vue是一款用于构建用户界面的 JavaScript 渐进式框架1。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
Vue3 发布于2020年9月18日。
Vue3特点
- 更快的渲染速度 优化了编译和运行时性能，虚拟DOM的算法，静态分析2和摇树优化3的方面。
- 更小的包 引用了ES模块的代码拆分技术，使得库的体积更小，提高了页面加载速度和性能。
- TypeScript支持
- 组合式API Composition API 提供了更灵活，更强大的组件复用和逻辑阻止方式，使得组件逻辑更易于维护和理解。
- 先进的响应式系统
MVVM
一种软件架构模式，用于构建用户界面。它将用户界面分为三个部分。
- Model 模型。代表应用程序的数据和业务逻辑。它负责管理数据的状态和行为，单不直接处理用户界面的显示。
- View 视图。视图式用户界面的可视化部分。负责展示数据和与用户交互。视图通常是由用户界面元素组成。
- ViewModel 视图模型。模型与视图之间的连接层。它负责将模型的数据转换为试图可以现实的格式，并处理用户界面的交互行为。视图模型通常包含了试图需要展示的数据，并提供了一些方法和命令处理用户输入和触发相应操作。
Vue中的体现
- 数据绑定 支持双向数据绑定，可以将视图和视图模型中的数据进行绑定，使得数据变化自动反映到视图上，同时用户在视图上的操作也能更新到视图模型中的数据。
- 指令和事件处理 轻松地在视图模板中处理用户地数据和交互行为。这些指令和事件处理可以直接绑定到视图模型中的方法或属性，实现视图和视图模型之间的交互。
- 计算属性和监听器 根据视图模型中的数据动态计算属性地值，并在数据发生变化时出发相应地操作，实现视图模型地逻辑处理功能。
Vue3 安装
安装Node.js
使用Vue.js，需要使用npm(Node.js包管理器)来安装Vue CLI(Vue命令行界面) Vue CLI是一个官方提供的工具，用于快速搭建Vue项目，管理依赖项，构建项目。Vue CLI本身是基于Node.js运行的。
Vue3 需要Node.js 16.17.0或更高的版本
使用npm或yarn安装Vue3
npm 安装node包含了npm 安装 yarn
npm install -g yarn
npm 安装vue3
npm install vue@next
yarn 安装vue3
yarn add vue@next
提示：这种方式不支持其他附加功能 ts支持 vuex vue router 插件系统等等。
Vue Cli创建一个Vue3项目
npm 安装vue cli
npm install -g @vue/cli
yarn 安装vue cli
yarn global add @vue/cli
使用Vue Cli 创建 新的Vue3项目
vue create my-project
可以选择自定创建
- Babel: es6转es5
- TypeScript:支持ts
- Progressive Web App (PWA) Support:渐进式web应用
- Router:路由
- Vuex:管理状态
- CSS Pre-processors：CSS预处理
- Linter / Formatter：代码规范
- Unit Testing：单元测试
- E2E Testing：端到端测试
cd my-project
npm run serve
cd my-project
yarn serve
这样一个简单的 vue3项目就创建好了。
