VUE3单页面应用开发常用工具

Vite

　　一种新型的前端构建工具，它主要由两个部分做成

• • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

社区模板

• • create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。

指定替代根目录

• • vite 以当前工作目录作为根目录启动开发服务器 (运行npm run dev的时候，vite会在本地运行服务，作为前端项目的容器) 。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。注意 Vite 同时会解析项目根目录下的 配置文件（即 vite.config.js），因此如果根目录被改变了，你需要将配置文件移动到新的根目录下。

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

Vite项目中，在最外层中存在一个index.html文件，这是整个项目的入口。

Vite 也支持多个 .html 作入口点的 多页面应用模式。

通过 插件，Vite 支持与其他框架或工具的集成

Vite的功能：功能 | Vite 官方中文文档 (vitejs.dev)

Eslint

是一款用于JavaScript代码检查的工具，它具备丰富的配置选项，可以帮助开发者规范和优化代码。

可以在eslint中配置规则，来对代码进行验证。也可以在eslint中引入插件，扩展更多功能。

使用vue-create引入的eslint，继承了“eslint:recommended”中的推荐配置。

vue-create引入eslint配置文件

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,//代表这里是根目录中配置的eslint的规则。当项目中使用级联配置的时候，eslint读取配置文件最终会读取该文件并停止向上读取
  'extends': [ //继承了一些规则配置
    'plugin:vue/vue3-essential',
    'eslint:recommended', //eslint推荐的配置
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

Pinia

是一个针对VUE的状态管理库骂它遵循了VUE3的响应式设计原理，并提供了类似于VUEX的状态管理功能。使用组合式API，更适合VUE3，但是对VUE2也会兼容。