vue3通过Vite实现工程化

1. vue3简介

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:Vue.js - 渐进式 JavaScript 框架 | Vue.js

Vue的核心特性：

• 声明式渲染：Vue基于标准HTML拓展了一套模版语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。

• 响应式数据绑定：Vue使用双向数据绑定来实现视图和数据的自动同步。当数据发生变化时，相关的视图会自动更新，使得开发者可以更专注于数据和业务逻辑，而不必手动管理DOM。

• 组件化开发：Vue鼓励开发者将页面拆分成独立的、可复用的组件。每个组件包含自己的模板、样式和逻辑，使得代码更加模块化、可维护性更强，也方便多人协作开发。

• 单文件组件：Vue支持使用单文件组件（.vue文件）来组织代码。这种方式将模板、样式和逻辑放在一个文件中，提高了开发效率，使得代码更加清晰易读。

• 虚拟DOM：Vue使用虚拟DOM来提高性能。在数据发生变化时，Vue会比较虚拟DOM和实际DOM的差异，然后只更新必要的部分，而不是重新渲染整个页面，从而提高了性能。

• 生态系统丰富：Vue拥有一个庞大的生态系统，包括路由管理器（Vue Router）、状态管理工具（Vuex）、构建工具（Vue CLI）等。此外，还有许多第三方插件和库，可以帮助开发者轻松地扩展Vue的功能。

2. Vite的介绍 

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验

• 当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。

• 包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。为什么选 Vite | Vite 官方中文文档前端工程化的作用包括但不限于以下几个方面：

1. 快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力。

2. 统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量。

3. 代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑。

4. 自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等。

3. 创建Vue3工程化项目

3.1 命令创建、启动、停止Vite+Vue3项目

使用命令行创建项目

• 在磁盘中创建一个空目录用于存储多个前段项目,并在VSCode中打开该项目
• 在VSCode中打开命令运行下面的命令 

npm init vite

•  第一次使用Vite时会提示下载Vite，输入y回车即可
• 注意：回车后要选择Vue+JavaScrip选项

安装项目所需依赖 

• cd 进入刚刚创建的项目目录
• 执行 npm install 命令安装基础依赖 

cd test-vue
npm install

 启动项目

查看项目下的package.json文件

npm run dev

在命令行上 Ctrl+c

3.2  Vite+Vue3项目的目录结构

1.下面是 Vite 常用项目结构说明：

• public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。

• src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：

  1. assets目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。

  2. components 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。

  3. layouts 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。

  4. pages 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。

  5. plugins 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。

  6. router 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。

• vite.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。

• package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开发、构建和启动本地服务器等操作。

• Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相关插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。

2.vite的运行界面

• 在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：(package.json)

{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

•  设置端口号：(vite.config.js)，在这里可以设置更改端口号

//修改vite项目配置文件 vite.config.js
export default defineConfig({
  plugins: [vue()],
  server:{
    port:8080 //更改端口号
  }
})

3.3 Vite+Vue3项目组件

什么是VUE的组件?

• 一个页面作为整体,是由多个部分组成的,每个部分在这里就可以理解为一个组件

• 每个.vue文件就可以理解为一个组件,多个.vue文件可以构成一个整体页面

• 组件化给我们带来的另一个好处就是组件的复用和维护非常的方便

什么是.vue文件?

• 传统的页面有.html文件.css文件和.js文件三个文件组成(多文件组件)

• vue将这文件合并成一个.vue文件(Single-File Component，简称 SFC,单文件组件)

• .vue文件对js/css/html统一封装,这是VUE中的概念 该文件由三个部分组成 <script> <template> <style>

  • template标签 代表组件的html部分代码 代替传统的.html文件

  • script标签 代表组件的js代码 代替传统的.js文件

  • style标签 代表组件的css样式代码 代替传统的.css文件

工程化vue项目如何组织这些组件?

• index.html是项目的入口,其中 <div id ='app'></div>是用于挂载所有组建的元素

• index.html中的script标签引入了一个main.js文件,具体的挂载过程在main.js中执行

• main.js是vue工程中非常重要的文件,他决定这项目使用哪些依赖,导入的第一个组件

• App.vue是vue中的核心组件,所有的其他组件都要通过该组件进行导入,该组件通过路由可以控制页面的切换

3.4 Vite+Vue3响应式入门和setup函数 

 Vue3响应式数据

响应式数据域类响应式数据的区别：

• 非响应式数据 ：修改数据后Vue不会更新DOM
• 响应式数据：修改数据后Vue会更新DOM

Vue2中数据默认是响应的

Vue3中数据要经过 ref 或者 reactive 处理后才是响应式的

• ref函数：更适合单个变量
  • 在Script标签中操作 ref 响应式数据要通过 .value
  • 在template中操作 ref 响应式则无需 .value
• reactive函数：更适合对象
  • 在Script/template 操作reactive响应式数据都直接使用 对象名.属性名 的方法即可

3.5 Vite+Vue3样式的导入方式

1、main.js：全局引入

import './style/reset.css' //书写引入的资源的相对路径即可

2、Vue文件Scrip代码引入

import './style/reset.css'

3、Vue文件style代码引入

@import './style/reset.css'

3.6 JS和TS的选择

1、项目规模：对于小型项目，使用JavaScript可能更为简单和高效。但是对于大型项目，TypeScript的静态类型检查和强大的工具支持可以帮助减少潜在的错误，并提升代码的可维护性。

2、团队技能：如果团队成员熟悉JavaScript并且没有太多的TypeScript经验，那么使用JavaScript可能更为合适。但是如果团队有一定的TypeScript经验，或者愿意学习并采用TypeScript，那么它可以为项目带来更多的好处。

3、类型安全：TypeScript是一个带有静态类型系统的超集，这意味着它可以在编译时捕获许多常见的错误。如果你在意类型安全和代码质量，那么TypeScript可能是一个更好的选择。

4、第三方库和框架：很多流行的JavaScript库和框架都提供了对TypeScript的支持。如果你的项目需要使用这些库或框架，那么使用TypeScript可能更加顺畅。

5、生态系统：JavaScript有一个庞大的生态系统，拥有大量的库、工具和社区支持。TypeScript可以无缝地与JavaScript生态系统集成，但是它自身也有一个不断增长的社区和生态系统。

6、迁移成本：如果你已经有一个使用JavaScript的项目，并且考虑迁移到TypeScript，你需要考虑迁移成本和团队的接受程度。在某些情况下，逐步引入TypeScript并逐渐升级现有的代码可能是更为合适的方式。

7、工具和集成：TypeScript 提供了更强大的静态类型检查，并且支持更好的代码编辑器功能，比如代码自动补全、重构等。如果你希望拥有更强大的开发工具支持，那么 TypeScript 可能是更好的选择。

8、学习曲线：对于熟悉 JavaScript 但不熟悉 TypeScript 的开发者来说，学习 TypeScript 可能需要一些时间。因此，如果项目时间紧迫或者团队中大多数人都是 JavaScript 开发者，那么选择 JavaScript 可能会更合适。

9、社区支持：JavaScript 有着庞大的社区和生态系统，这意味着你可以轻松地找到解决问题的方式、以及大量的第三方库和工具。而 TypeScript 也在不断增长的社区支持下，逐渐成为了一个强大的选择。