.todo-list{text-align:center;}.todo-listulli{style:none;}bug源码测试环境开始，上线几个。愿你多多修改，今夜难合眼。这是Vue3.0系列文章的第二篇。本文将带你从零开始搭建一个基于Vue3.0和vite的Vue3.0开发环境。通过本文的学习，你将学到以下内容：使用vite初始化Vue3.0项目配置ts配置vue-router配置vuex使用Vue3.0开发一个TodoList实例你可以通过微信搜索【前面玩的一些东西完】关注我公众号加我微信好友，一起摸手学习Vue3.0使用vite初始化项目vite。介绍一下vite是友达今年新出的一个工具。友达对vite的描述是这样的：Vite是一个自以为是的web开发构建工具，它在开发期间通过原生ES模块导入为您的代码提供服务，并将其与Rollup捆绑在一起用于生产。翻译成中文是：Vite是一个原生ESModule驱动的web开发构建工具。开发环境基于浏览器原生ES导入开发，生产环境基于Rollup打包。上面一段提到了一个关键字ESModule，这是什么？详细介绍可以访问https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules查看。让我们在这里长话短说。最早的时候，没有前端工程，然后我们把javascript写到一个文件里，然后通过script标签引用。后来随着前端发展壮大，js之间的依赖也越来越复杂。这时候就需要有一种机制，可以将JavaScript程序拆分成单独的模块，可以按需导入来维护这种依赖，于是AMD、CMD等就诞生了，而ESModule就是原生的模块依赖函数浏览器支持。为什么要使用vite？为什么要推出vite？我们在使用webpack的时候，每次开发都要几十秒甚至一分多钟才能启动项目，比较慢，热更新也比较慢。vite的主要特点是Quick，官网是这样描述vite的特点的：冷启动快，模块热更新即时，真正的按需编译有多快？我们新建一个项目，尝试初始化vite项目。初始化项目，在工作区打开一个终端窗口，对于window用户，就是cmd，然后执行下面的命令yarncreatevite-appmy-vue3，执行后会输出如下内容。可以看到新建项目非常快。项目初始化仅需1.63s，通过cdmy-vue3执行到项目中，然后执行yarn安装依赖（这里推荐使用淘宝镜像，速度更快）。依赖安装完成后，需要通过yarndev启动项目。你体验过项目秒开的感觉吗？启动后可以通过http://localhost:3000访问项目查看项目结构用vscode打开项目后可以看到新建的项目结构和vue创建的项目结构基本一致-cli4，这两个都是我们熟悉的App.vue和main.js视图main。js文件内容openmain.jsimport{createApp}from'vue'importAppfrom'./App.vue'import'./index.css'cre??ateApp(App).mount('#app')发现创建的方式Vue变了是的，原来Vue是通过newVue的方法初始化的。在Vue3.0中修改为使用createApp的方法。Vue3.0的更多使用方式，我们会在后面的系列文章中逐步为大家讲解。配置typescripttypescript现在已经成为前端必备技能之一，大量的项目也开始基于typescript进行开发。在使用Vue2.0的时候，因为Vue2.0不支持typescript，所以使用ts开发功能有点别扭。但是到了Vue3，它自己的源码是基于ts开发的，所以对ts有很好的支持。使用vite配置typescript非常简单，只需要执行以下步骤。安装typescriptyarnaddtypescript-D初始化tsconfig.json#然后在控制台执行如下命令npxtsc--init将main.js修改为main.ts，同时index.html中的引用也修改为main.ts，其中App.vue和HelloWorld.vue文件需要修改如下。
