`，再举个例子，把 `b.abc` 这样的文件里的 `w:100p` 生成出 `b.css`，内容变成 `width: 100px;`，就是个这么个工具，做的事儿其实很简单，但用起来和头痛，因为需要很复杂的配置，所以前人基于这个打包工具写了很多小工具，他们写好了一定的配置规则，大家装上插件直接用就可以了。 vite ---------- 尤雨溪（Vue 的作者）觉得 webpack 太差劲了，所以自己写了个这么个工具，用来替代后者，所以功能上可以理解为和 webpack 一样，但用起来更简单一些，速度更快了**好多倍**。 > 上面两个都是打包工具，这俩工具简单说就是让大家用别的方式去写 HTML、CSS、JS 的，注意：有了 vite 一般就不会用 webpack 了。 Vue.js ---------- 是一款 JS 框架，现在一般说 Vue 都是指 Vue2 版本，目前已经有 Vue3 版本了，但 Vue3 难度比 Vue2 高出了一内内，所以先说 Vue2 吧。对初学者而言，Vue2 可以简单的去理解为组件化编写前端页面的框架。什么是组件化呢，打个比方，一个网站有两个页面，有一个新闻列表也和新闻内容页，新闻列表分为三个部分：头部、列表、底部，新闻内容页分为三个部分：头部、文章、底部，两个页面的头部、尾部长的一模一样，那就定义两个组件：头部组件、尾部组件，两个页面分别在指定位置引用进来就行了，没必要重复去写了。然后，操作 DOM 太复杂了，所以 Vue 又去做了一个事儿，就是程序员只需要定义一个数据，然后告诉它这个数据通过什么形式展示在什么位置即可，然后当数据产生变化时 DOM 跟着自己个儿去边，不用程序员自己去操作 DOM 了，一下程序员们就喜欢这个框架了。再然后，对如输入框、按钮这些东西监听浏览器操作事件的处理太复杂了，所以 Vue 又对这种事儿做了简化，只需要绑定一个事件就行。到这时，前端编程的思路可以理解为：页面就是数据的一种表现形式，数据变化了，页面按一定规则随着变化即可，框架为程序员做好了 DOM 变化的事情，就剩下业务逻辑由程序员自己去写就好了。 [点击这里对 Vue.js 做展开讲解](VUE.md) vue-cli ---------- 基于 webpack 构建的，用于构建前端工程的一个构建工具（此时脑海中一下就浮现出来三个“构建”（gou jian）是不是？简单说呢，就是这个工具里它写好了一大堆的 webpack 配置，预设了好多 webpack 插件，还内置了一套小的 Demo 代码，通过几个命令就可以快速的搭建出来一个 Vue 工程，然后在此基础上增删改下代码就可以写一套 Vue 页面了。