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的响应式系统通过“依赖追踪”来确保当数据变化时,所有依赖于这些数据的视图和组件能够自动更新。
    适用于:任何需要数据变化自动更新视图的场景。

XY
4 声望1 粉丝