• 【Vue3教程】创建你的第一个Vue 3项目

    现在，在浏览器中输入http://localhost:8080/，就会看到我们的应用程序！

    image.png

    Vite

    Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验，它主要由两部分组成：

    为什么使用 Vite

    你现在可能会有疑问？，那么 Vite 与现有的vue-cli到底有什么不同呢?

    由于@ vue-cli / service是在webpack之上构建的，因此它是一个模块捆绑程序，它将在启动，热重载和编译时捆绑整个Vue项目。

    由于@vue-cli/service是在webpack之上构建的，因此它是一个模块捆绑程序，它将在启动，热重载和编译时捆绑整个Vue项目。

    Webpack 的工作方式是，它通过解析应用程序中的每一个 import 和 require ，将整个应用程序构建成一个基于 JavaScript 的捆绑包，并在运行时转换文件（例如 Sass、TypeScript、SFC）。

    这都是在服务器端完成的，依赖的数量和改变后构建/重新构建的时间之间有一个大致的线性关系。

    相反，Vite 不捆绑应用服务器端。相反，它依赖于浏览器对 JavaScript 模块的原生支持（也就是 ES 模块，是一个比较新的功能）。

    浏览器将在需要时通过 HTTP 请求任何 JS 模块，并在运行时进行处理。Vite 开发服务器将按需转换任何文件（如 Sass、TypeScript、SFC）。

    这种架构避免了服务器端对整个应用的捆绑，并利用浏览器高效的模块处理，提供了一个明显更快的开发服务器。

    提示：当你对应用程序进行 code-split 和 tree-shake 动时，Vite 的速度会更快，因为它只加载它需要的模块，即使是在开发阶段。这与 Webpack 不同，在 Webpack 中，代码拆分只对生产包有利。

    创建第一个Vite项目

    运行下面命令即可：

    npm init vite-app <项目名>

    然后，我们只需进入我们的项目文件夹，安装依赖项，然后使用以下命令运行我们的应用程序:

    cd <项目名>

    npm install

    npm run dev

    现在，如果我们导航到http://localhost:3000 –我们应该看到以下应用程序：

    image.png

    一些你应该知道的Vue Vite特性

    1.将项目打包到生产中

    Vite的一个目标是使Vue的开发和生产尽可能容易。虽然在开发过程中没有捆绑，但是将你的项目捆绑到生产中是非常容易的。

    你所要做的就是运行npm run build。

    如果查看package.json，实现是运行 vite build –与其他构建过程一样，打包后会放在dist文件中。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UTOqnLNO-1616631237040)(/img/bVcQEZN)]

    2.asset 路径

    与其他Vue项目设置一样，Vite 提供了两种引用`asset``的方法。

    1. 绝对路径 - 使用公用文件夹。 这些资源使用/file.extension引用，并且在构建项目时将复制到dist文件夹的根目录中。

    2. 相对路径 - 例如，根据文件夹的文件结构来相对访问src/assets文件夹中的文件。 构建项目时，整个文件夹都将作为_assets放置在dist文件夹中。

    image.png

    3.内置 Typescript 支持

    Vue3 最大的变化之一是使用Typescript重写了核心库，允许根据IDE进行类型检查和更好的错误消息。

    通过提供对.ts文件和SFC中的