Vue3 上手项目——调色板

一、vite 新建 Vue3 项目文件

点击跳转： vite 官方教程

$ npm init vite-app 
$ cd 
$ npm install
$ npm run dev

项目启动试着改下代码，编译一下，你会发现编译速度快的惊人，关闭项目在重启也不会等待很长时间，几乎做到了秒开的感觉。

那么他的思想是啥呢，我们去看下 index.html 文件就明白了，文件最重要就是这一段代码：

如果你 JS 基础足够好，看到 type="module" 就完全明白为啥编译速度辣么的快了，因为 vite 在开发环境下压根没给你编译，基本上就是在写 JS 静态文件，这能不快吗。如果你不懂 type="module" 请看 万岁，浏览器原生支持ES6 export和import模块啦！进行深入学习。

重点：这个设计思路太牛了，作为开发者我们肯定使用的是最新的技术和最新的浏览器，只有在生产环境才会考虑兼容性的问题，而且兼容的问题也是交给构建工具做的，构建工具对开发者最大的好处就是编译兼容性代码和支持模块化，但缺点就是编译速度慢，Vite 的设计思路就是既然最新的浏览器支持模块化和罪行的 API，那就在开发环境下不编译，只有生产环境编译，这样就解决了 webpack 在每次更修改文件包编译时间过长等待的问题，。

二、实现一个调色板

先看三篇文章：

1. 小tips: 如何HTML标签和JS中设置CSS3 var变量

2. Vue超好玩的新特性：在CSS中引入JS变量

3. Vue3 翻译的中文网弄懂 ref、 reactive 和 toRefs。

Vue3 上手项目——调色板