Vite快速上手指南—从零搭建一个vue运行环境

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

Vite作为一个新的开发与构建工具，有着比使用webpack，rollup等打包工具快得多的热更新(HMR)与服务器冷启动，得益于使用esbuild的方式预构建与直接在浏览器中使用ESModule的方式引入文件。
所以vite能帮助我们很大程度的提升开发效率与体验，下面以从零配置一个Vue3.x项目为例，一起来学习一下这个构建工具吧～

基本概念

在开始之前，我们需要先了解一下vite中的一些基本概念。

依赖预构建

vite在启动服务的时候会先搜索项目中需要用到的原生模块，由于原生模块无法被浏览器的ESM所识别，所以vite利用esbuild将原生模块打包成ESM。

天然支持TypeScript

vite天然支持TypeScript，使得在配置构建文件的时候我们不需要对ts文件进行额外的支持。

插件

与其他构建工具一样，插件用于对构建工具的扩展，我们可以利用插件来对文件进行特定的处理。

从零搭建vue项目

了解了基本的概念，下面就开始来搭建项目。

1.新建项目，安装必要的模块

在项目内安装vite和支持vue的插件@vitejs/plugin-vue

yarn add vite @vitejs/plugin-vue -D
安装vue3

yarn add vue@next

安装完后对文件进行创建

创建一个index.html作为入口的html文件

注意：<script type="module" src="/src/main.ts"></script> 中的type="module"

global.d.ts 用于声明全局模块的类型，因为这里只创建基本的vue项目，这里只需要对vue文件进行兼容

    // global.d.ts
    declare module '*.vue' {}

2.创建vite配置文件，用于控制构建工具进行特定的操作。

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

export default defineConfig({
  plugins: [vuejs()],
});

在构建工具中使用@vitejs/plugin-vue插件，以支持vue文件。

3.编写vue页面

我们在src中新建两个文件main.ts和main.vue

main.ts就是常规的vue入口页面

// main.ts
import { createApp } from 'vue';
import App from './main.vue';

const app = createApp(App);

app.mount('#app');

main.vue为入口的页面

// main.vue
<script lang="ts" setup>

</script>

<template>
  <div>
    Hello World
  </div>
</template>

<style>

</style>

来测试一下

在package.json的script中添加

"scripts": {
    "dev": "vite --port 8080"
}

运行一下 yarn dev

到此，一个简单的vite项目就配置完了。

参考

vite