美文网首页基础前端移动端和小程序
Vue3 上手项目——调色板

Vue3 上手项目——调色板

作者: CondorHero | 来源:发表于2020-08-25 01:04 被阅读0次

    一、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 翻译的中文网弄懂 refreactivetoRefs

    <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 上手项目——调色板

    相关文章

      网友评论

        本文标题:Vue3 上手项目——调色板

        本文链接:https://www.haomeiwen.com/subject/leuejktx.html