持续创作,加速成长!这是我参与「掘金日新计划 · 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
扫描二维码关注公众号,回复: 14311738 查看本文章
安装完后对文件进行创建
- 创建一个
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项目就配置完了。