Vue3 上手项目——调色板

一、vite 新建 Vue3 项目文件

点击跳转： vite 官方教程

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

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

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

<script type="module" src="/src/main.js"></script>

如果你 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。

<template>
    <h1>
        调色板
    </h1>
    <section>
        red: <input type="range" min="0" max="255" v-model="red" />
        green: <input type="range" min="0" max="255" v-model="green" />
        blue: <input type="range" min="0" max="255" v-model="blue" />
        alpha: <input type="range" min="0" max="1" v-model="alpha" step="0.1" />
    </section>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
    name: 'HelloWorld',
    setup() {
        const state = reactive({
            red: 10 ,
            green: 99,
            blue: 12,
            alpha: 0.5
        });
        return {
            ...toRefs(state)
        }
    }
}
</script>
<style lang="css" vars="{ red , green, blue, alpha }">
h1{
    display: grid;
    width: 200px;
    line-height: 200px;
    margin: auto;
    background-color:rgba(var(--red), var(--green), var(--blue), var(--alpha)) 
}
</style>

Vue3 上手项目——调色板