一、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 在每次更修改文件包编译时间过长等待的问题,🐂🐂🐂🐂🐂。
二、实现一个调色板
先看三篇文章:
-
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 上手项目——调色板
网友评论