vue-cli

vue-cli

一.vue-cli
1.什么是vue-cli
Vue CLI（全称为Vue.js Command Line Interface）是一个基于Vue.js进行快速开发的完整系统。它不仅是一个工具，也是一个前端工程化的解决方案。Vue CLI的主要目的是简化Vue.js项目的搭建和开发过程，让开发者能够更加专注于业务逻辑的实现，而不是重复性的配置工作。
2.vue-cli安装
npm install -g @vue/cli
3.创建项目
vue create 项目名称
选择自己想要预安装的插件 之后就是等待自动安装。
二.vite
1.什么是vite
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升
前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
  2.创建项目
  npm create vite@latest
  
  然后运行即可
  
  3.vite的优势
  （1）更快的开发服务器：Vite的开发服务器使用了原生ES模块的导入机制，避免了传统构建工具（如Webpack）中繁琐的解析过程，因此可以提供大约10倍甚至100倍的开发服务器启动速度。
  （2）更快的构建速度：由于Vite利用了浏览器的ES模块加载特性，它不需要像Webpack那样将所有的依赖打包成一个或多个bundle，从而大大减少了构建和打包的时间。
  （3）实时模块热替换（HMR）：Vite的实时模块热替换功能比Vue CLI的实现更快速，因为它不需要重新加载整个页面，只需替换变更的模块即可。
  （4）利用现代JavaScript特性：Vite原生支持ES模块，这意味着你可以充分利用ES6及以后的JavaScript特性，而无需担心Webpack等工具可能带来的兼容性问题。
  （5）更小的打包体积：由于Vite按需加载模块，它能够生成更小的打包文件，这对于提高应用的加载速度和减少用户的带宽消耗非常有帮助。
  （6）动态导入：Vite支持动态导入语法，这使得代码分割更加容易和直观，可以更细粒度地控制资源的加载，从而提高性能。
  三.vue-router
  1.什么是vue-router
  Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码
  2.vue-router安装
  npm install vue-router@4
  四.Pinia
  1.什么是 Pinia
  Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。
  2.pinia安装
  npm install pinia
  3.状态管理机制
  状态管理机制是软件开发中的一项关键概念，尤其是在构建用户界面(UI)时。好的状态管理能够使得应用的逻辑更加清晰，维护和调试更加方便，并能够提升用户体验。从Vue的状态管理来看，它的状态管理主要通过以下方式实现：
  （1） 组件数据（Data）：
  每个Vue组件都可以有自己的数据对象，Vue会自动追踪这些数据的改变并更新DOM。
  适用于：组件内部的小规模数据管理。
  （2） Vuex：
  Vuex是Vue的一个状态管理库，类似于Redux，它为Vue应用提供了一个中心化的状态存储。
  适用于：中大型应用，需要统一管理多个组件的状态。
  （3） Vue的响应式系统：
  Vue的响应式系统通过“依赖追踪”来确保当数据变化时，所有依赖于这些数据的视图和组件能够自动更新。
  适用于：任何需要数据变化自动更新视图的场景。