Vite 构建 Vue3 项目

领航猿麦兜
373 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情

对于我个人来说，我非常喜欢 Vite 能够提供非常敏捷和快速响应的开发环境以及它的插件系统开发起来非常的简单，而且功能也非常的强大。

Vite 是伴随着 Vue3 正式版一起发布的，最开始的时候，Vite 是有一个 1.0 版本的，而 Vite1.0 版本是以 Vue3 为主要的构建对象的。也可以认为 Vite 开始诞生的是为 Vue3 服务的。

在经历了大概半年不到的时间，Vite 立刻更新到了 2.0 零版本，这个版本是一个跨框架的一个版本。也就是说它不是以 Vue3 为主要构建对象，它内部不包含任何框架相关的内容。它通过插件的方式来提供不同的前端框架的编译、开发等功能。

因此，这里我们只需要关心 Vite2.0 零版本的使用，基本上不需要考虑 Vite1.0 版本的使用。它是一个快速被迭代掉的版本。因此，我们的课程中使用的是 Vite2.0 的版本。

然后我们这节课会为大家讲解是使用 Vite 构建 Vue3、Vue2以及 React 项目，把前端主流的框架都介绍一遍，如何通过 Vite 构建的项目。

Vite 构建 Vue3 项目

开始通过 Vite 构建项目非常简单的。我们可以通过 npm init @vitejs/app 可以直接运行 Vite 的提供的脚本来构建 Vite 的项目。

image.png

运行之后，它会提醒我们需要在全局安装 @vitejs/app 脚本命令，我们选择全局安装。

image.png

安装完成之后，进入了 Vite 项目的创建流程。首先我们需要输入一个项目的名称。例如：vite-vue3。

image.png

要选择 framework，framework 里面它默认提供我们选择的有原生的 JS、Vue、React、Preact、lit-element、svelte。这里选择 vue。

image.png

variant 选择 vue，后面我们学习 ts 在介绍 vue-ts。

image.png

回车之后，我们这个项目就构建完成了。我们发现，Vite 做的事情非常少，只是给我们生成了一个目录结构。甚至都不帮我们执行 npm install 的事情。那么这些内容都需要我们自己手动完成。

使用 VS Code 工具打开该项目，通过 code vite-vue3 命令打开。

image.png

VS Code 工具打开项目之后，可以看到整体的一个项目结构，非常简单的，没有提供 ESLint 的功能，这些功能需要自己去增加。

Vite 默认是支持这些内容的，但是需要注意的一点是，像 ESLint 它是不支持在我们开发的时，保存一个文件，自动给文件做文件的 ESLint 的校验。

大家以前如果做过一些 Webpack 的项目或者 vue-cli 的项目，它们是提供这个功能的。这个是通过在 Webpack 里面去增加 eslinkload 这样的功能去实现的。但是 Vite 是不支持的。但是我们可以通过自己手动的去执行 ESLint 的命令来去实现。

Vite 项目的目录结构：

public：存放一些静态文件的，不需要编译的内容，比如图片，可以直接放在 public 目录下。Vite 是提供了路径映射，非常方便的导入。

src：在 src 中有个 assets 文件夹，它统一是存放一些图片，这些图片可以通过import 的方式去引入，这样会编译成一个路径，可以去做一些处理。main.js 是我们项目的入口文件了。

import { createApp } from 'vue'
import App from './App.vue'


createApp(App).mount('#app')

App.vue 就跟我们传统的 vue 创建出来的项目是差不多的。其实 src 下面存放我们的项目源代码

index.html：Vite 的实现方式跟 Webpack 和 Rollup 不一样，Webpack 和 Rollup 的编译入口一般来是一个 js 文件。而对于 Vite，它的编译入口是 html 文件的。这个跟 Vite 的特性有关，Vite 一开始不编译 main.js、App.vue 等内容，是直接让我们的浏览器去加载 index.html 文件，加载完之后，通过 " 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

vite.config.js：这个就是用来存放 vite 的配置。目前来看，只看到了用到了 vue 的插件 @vitejs/plugin-vue，这个是 vue 官方提供。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

需要注意的是，这个 @vitejs/plugin-vue 是支持 App.vue, 也就是我们的 SFC 的写法的。但是它不支持 view 的 JSX 的开发方式。如果需要支持 Vue 的 JSX 的开发方式，我们需要自己去安装相应插件，对于 Vue3 是有这么一个插件的，也是官方提供的。

我们如何使用 JSX 进 Vue 开发，我们通过 npm add @vitejs/plugin-vue-jsx -D 安装依赖 。

image.png

安装完这个插件之后，我们在 vite.config.js 文件中 import 插件。之后直接在这个 plugins 下面调用即可。

 

import vueJsx from "@vitejs/plugin-vue-jsx"


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()],
})

ok，这个时候我们就可以在 src 目录下新建一个 App.jsx 文件。

import {defineComponent} from "vue"


export default defineComponent({
    setup(){
        return ()=>{
            return <div> Hello Vue Jsx</div>
        };
    },
});

移除 src 目录下 App.vue。同时修改 main.js 文件，将 App.vue 修改 App 即可。

//修改 main.js 文件之前
import { createApp } from 'vue'
import App from './App.vue'


createApp(App).mount('#app')


//修改 main.js 文件之后
import { createApp } from 'vue'
import App from './App'


createApp(App).mount('#app')

重新运行 vite-vue3 项目，访问 localhost:3000，在浏览器页面输出：Hello Vue Jsx 内容。

image.png

这里介绍如何通过 Vite 构建 Vue3 项目，同时介绍如何使用 Vite 的 JSX 插件让我们的 Vite 项目支持 Vue3 的 JSX。

avatar
文章
阅读
粉丝