vite入门
- 简介
开箱即用(out of box): 你不需要做任何额外的配置就可以使用vite来帮你处理构建工作
在默认情况下, 我们的esmodule去导入资源的时候, 要么是绝对路径, 要么是相对路径
-
新建1个文件夹demo01
-
编写counter.js
export const count = 0;
- 编写main.js
import { count } from "./counter.js";
console.log("count")
- 编写index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<script src="./main.js" type="module"></script>
</body>
</html>
- 初始化
# 方式1
npm init -y
# 方式2
yarn init -y
# 安装1个依赖
yarn add lodash
# 测试，main.js中打印
import _ from "lodash";
console.log("lodash", _);
- 使用vite
# 安装vite，开发环境下使用，生产环境下不使用，使用最新版的node安装，否则报如下错误
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
error vite@3.1.0: The engine "node" is incompatible with this module. Expected version "^14.18.0 || >=16.0.0". Got "14.15.5"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
# 安装vite
yarn add vite -D
# 配置package.json
"scripts": {
"dev": "vite"
},
# 启动项目
yarn dev
- ctrl + shift + p -> alt + B -> 浏览器中打开
