bug源码测试环境开始，上线几个。愿你多多修改，今夜难合眼。这是Vue3.0系列文章的第二篇。本文将带你从零开始搭建一个基于Vue3.0和vite的Vue3.0开发环境。通过本文的学习，你将了解到：使用vite初始化Vue3.0项目配置ts配置vue-router配置vuex使用Vue3.0开发一个TodoList实例同时，对本文内容进行了记录做成视频发布到B站，可以点击链接跳转到视频地址，也可以微信搜索【前端玩的一些东西】关注我的公众号加我微信好友，和你一起学习Vue3.0。使用vite初始化项目vite。vite的介绍是友达今年新推出的一款工具。Youdalovesvite描述是这样的：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。2.初始化项目后，通过cdmy-vue3进入到项目里面，然后执行yarn安装依赖（这里推荐使用淘宝镜像，速度更快）3.依赖安装完成后，需要通过yarndev启动项目。有没有体验过项目秒开的感觉？启动后可以通过http://localhost:3000访问项目查看项目结构用vscode打开项目后可以看到新建的项目结构和vue-cli4创建的项目结构基本一致，这两个都是我们熟悉的App.vue和main.jsViewmain.js文件的内容打开main.jsimport{createApp}from'vue'importAppfrom'./App.vue'import'./index.css'createApp(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-D2.初始化tsconfig.json#然后在控制台执行如下命令npxtsc--init3.将main.js改为main.ts，同时修改index.html中的引用为main.ts.您还需要修改App.vue和HelloWorld.vue文件。修改方法如下
