vite的基本使用

vite是下一代的前端构建工具

vite是一个法语单词，它的意思就是quick，翻译过来就是快的意思；vite是一个被强烈建议的web开发工具，通过ES module的这种方式来导入。

npm :

1 2	npm create vite@latest

yarn:

1 2	yarn create vite

pnpm:

1 2	pnpm create vite

当然你在创建的时候后面可以加上项目的名字：

接着根据你的需要在窗口选择不同的选项，这时候虽然是创建了项目，但是它并没有安装任何的依赖，这个时候就需要你亲自动手去做。

1
2
3

cd your-project
npm install
npm run dev

vite 设计的时候主要是和vue3一起使用的，但是它也是可以支持其他的框架的，比如说常见的react，想了解的可以去看官方文档，这里我不多说

vite的其他搭建方案：

这种搭建方案有点像外部的开发服务器的搭建方法，如果你不想等待新版本的释放，你可以自己去克隆一份：

我们安装官网的步骤来：

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install 或者是yarn  安装依赖
cd packages/vite
yarn build 先进行项目打包，生成一个dist目录
最后link一下
yarn link

执行完之后，如果出现了success

然后：

1	yarn link vite

当终端弹出success之后，

在package.json中把”script“中的test替换成下面的代码：

"script": {
	"dev": "vite",
	"build": "vite build"
}

这样就是在外部搭建了一个vite，就是把vite作为了一个外部服务器和我自己的项目进行关联，当然如果你还有一个项目的话，那么你就可以再进行一次关联

vite支持importing

支持css和json热更新

有一句重要的话，就是说所有的使用绝对路径的文档都会copy到dist中去进行哈希化，就是在生产环境中打包，如果你没有引用这些资源的话，它是不会被copy的，就像是vue-cli，图片如果小于4kb就自动转化成64位格式

可以自己去配置