Vite

以前的vue-cli是基于webpack，而webpack在开发阶段启动的速度是十分缓慢。原因是webpack会把一整个项目从入口开始（index.html）将涉及的所有的模块打包成一个js文件（图1）。

随着现代浏览器对js模块的支持，现在在浏览器中就可以使用export 和 import关键字来生命模块和导入模块，这意味着浏览器现在不需要一次性获取所有的模块，可以在需要的时候去请求相应的模块（图2）。
并且当我们修改了代码时，vite只会更新代码涉及到模块进行热模块替换（HMR），使用我们在使用vite进行开发是每次更新都是十分的丝滑，很少出现整个页面都全部重新加载的情况。

ESLint

ESLint可以做两件事

1. 语法校验。扫描你代码中的一些不规范写法提出意见。
   比如for循环渲染数据时忘记加key。vue的eslint插件就会对这种影响性能的写法提出意见。
2. 代码整理。每个eslint插件都可以增加自己的代码整理规则。

概念

• ESLint 插件：定义一系列的校验规则，常以 eslint-plugin-* 命名，在 ESLint 配置文件中通过 plugins 选项引入。
  需要注意的是，插件仅定义规则，并不启用规则。规则是由 ESLint 配置的 rules 选项启用的。
• 可共享配置（ Shareable Configs ）：每个 ESLint 配置文件都可以复用其他配置，这些配置称为可共享配置。可共享配置一共有两种形式：
  • ESLint Config：纯粹的配置，包含各个 ESLint 配置选项，常用 eslint-config-* 命名发布
  • ESLint 插件带配置（ Plugins with configs ） ：在原先的 ESLint 插件上导出 configs 对象，configs 等价于
    ESLint Config。拓展此类插件的可共享配置时需要在前面增加 plugin: 前缀，比如 plugin:
    prettier/recommended

Typescript

vite对typescript的支持是内置的，因此不需要配置typescript的编译，只需要在代码中增加tsconfig.json控制typescript的提示效果。

配置

修改package.json中的依赖，然后执行npm install。

package.json

  "devDependencies": {
    "vite": "^4.4.9",
    "@vitejs/plugin-vue": "^4.3.4",
    "@rushstack/eslint-patch": "^1.3.3",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-standard-with-typescript": "^8.0.0",
    "@vue/tsconfig": "^0.4.0"
  }

Vue

现在我们开始在vite上加入vue框架。vue我就不多介绍了相信大家都懂。

安装

插件安装

在 vscode 插件市场中搜索Vue Volar extension Pack

依赖安装

# 运行时依赖
npm i vue
# vue语法转html+js+css
npm i @vitejs/plugin-vue -D