【Vue3教程】创建你的第一个Vue3项目

作者：Shadeed译者：前端小智来源：dmitripavlutin点赞再看，微信搜索【大千世界】，B站关注【前端小智】这个没有大厂出身，但做人态度积极。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...2021年2月15日Vue3正式发布！在尤雨熙的发言中，他宣布了新框架最大的变化，并谈到了整个Vue团队所做的出色工作。很长一段时间以来，开发人员一直在等待Vue3中宣布的真正酷炫的功能，例如Typescript支持、大型项目的更好组织以及Vue应用程序更好的渲染优化。在本文中，我们将执行以下操作，使用CompositionAPI构建两个组件。有几个不同的选项可以开始将Vue3添加到现有项目或创建您自己的Vue3项目。在这里，我使用我最喜欢的两个选项：VueCLIIViteVueCLI如果您使用过Vue开发，那么您可能使用过VueCLI来设置项目。首先，我们必须确保我们拥有最新版本的VueCLI，这可以通过在终端上运行npmupdate-g@vue/cli来完成。接下来，创建项目，运行vuecreate，如果CLI是最新的，我们可以选择Vue3。选择Vue3选项后，我们的应用程序将构建。完成之后，我们只需要进入我们的项目，然后运行我们的Vue应用，命令是：cdnpmrunserve现在，在浏览器中输入http://localhost:8080/，就会看到我们的app！ViteVite（法语是“quick”的意思，读作/vit/）是一种新型的前端构建工具，可以显着提升前端开发体验。它主要由两部分组成：一个开发服务器，它使用原生ES模块来提供丰富的内置功能，例如令人难以置信的快速热模块更新（HMR）。一组构建指令，将你的代码与Rollup捆绑在一起，预先配置为输出高度优化的生产静态资产。您现在可能想知道为什么要使用Vite？，那么Vite与现有的vue-cli究竟有何不同呢？由于@vue-cli/service是构建在webpack之上的，它是一个模块打包器，它将在启动、热重载和编译时打包整个Vue项目。由于@vue-cli/service构建在webpack之上，它是一个模块打包器，将在启动、热重载和编译时打包整个Vue项目。Webpack的工作方式是，它通过解析应用程序中的每个导入和需求，并在运行时转换文件（例如Sass、TypeScript、SFC），将整个应用程序构建成一个基于JavaScript的包。这都是在服务器端完成的，依赖项的数量与更改后构建/重建的时间之间大致呈线性关系。相比之下，Vite并没有捆绑应用服务器端。相反，它依赖于浏览器对JavaScript模块（又名ES模块，这是一个相对较新的功能）的原生支持。浏览器将在需要时通过HTTP请求任何JS模块，并在运行时处理它们。Vite开发服务器将按需转换任何文件（如Sass、TypeScript、SFC）。这种架构避免了整个应用程序的服务器端捆绑，并利用浏览器的高效模块处理，提供了一个显着更快的开发服务器。提示：当您对应用程序进行代码拆分和树摇动时，Vite速度更快，因为它只加载它需要的模块，即使在开发过程中也是如此。这与Webpack不同，在Webpack中，代码拆分只对生产包有利。要创建我们的第一个Vite项目，请运行以下命令：npminitvite-app然后我们只需要进入我们的项目文件夹，安装依赖项，然后运行我们的应用程序：cdnpminstallnpmrundev现在，如果我们导航到http://localhost:3000–我们应该会看到以下应用程序：您应该了解的一些VueVite功能1.将项目打包到生产环境Vite的目标之一是启用Vue开发和生产环境，如下所示尽可能简单。虽然在开发期间没有捆绑，但将您的项目捆绑到生产中非常容易。您所要做的就是运行npmrunbuild。如果你查看package.json，其实现是运行vitebuild——它与其他构建过程一样，被打包并放置在dist文件中。2.资产路径与其他Vue项目设置相同，Vite提供了两种引用资产的方式。绝对路径-使用公用文件夹。这些资源使用/file.extension引用，并在构建项目时复制到dist文件夹的根目录中。相对路径-例如，相对于文件夹的文件结构访问src/assets文件夹中的文件。构建项目时，整个文件夹作为_assets放在dist文件夹中。3.内置Typescript支持Vue3最大的变化之一是核心库已使用Typescript重写，允许根据IDE进行类型检查和更好的错误消息。Vite通过为.ts文件和SFC中的exportdefault{name:'HelloWorld',props:{msg:String},data(){return{count:0}}}这很棒，因为在Vue3中我们仍然可以使用vue2语法。在本教程中，我们将介绍如何在新的CompositionAPI中执行此操作，并从OptionsAPI中识别这些更改。CompositionAPI中的反应式数据我们首先从vue核心库中导入一些东西，以允许我们创建反应式变量。import{ref}from'vue'然后，让我们用设置函数替换数据选项，如下所示。import{ref}from'vue'exportdefault{setup(){return{}}}这个setup方法在组件创建时运行，在这里我们可以定义所有需要的响应数据、计算属性、方法等组件使用。此外，可以在模板中访问设置方法返回的任何内容。使用ref创建响应数据为了展示这一点，我们在模板中使用v-model创建了一个文本输入。我们使用ref创建响应式查询变量，然后从设置方法中返回它。setup(){constquery=ref('')return{query}}然后，如果您返回到应用程序，您将看到我们已经使用CompositionAPI获取了响应式数据。非常好！接下来，让我们向输入添加一个清除按钮，看看如何在CompositionAPI中创建一个方法。CompositionAPI中的方法在选项API中，Vue对象中有一个完整的属性专门用于方法。对于较大的文件，这意味着数据可能在数百行之外的方法中声明，使组件更难阅读和维护。在组合API中，一切都在setup方法中，这意味着我们可以按特性组织代码，甚至可以将公共特性提取到自己的代码模块中。我们创建一个重置方法，它接受我们的ref并将其设置为空字符串。setup(){constquery=ref('')constreset=(evt)=>{query.value=''//清除query}return{reset,query}}需要注意的一点是我们需要调用query.value访问数据的值。为什么？如果我们console.log(query)，我们看到它不仅仅是一个字符串值，而是一个Proxy。使用代理可以让我们轻松捕获数据更改，这就是我们需要在引用上调用.value的原因。然后，就像我们在选项API中使用的那样，我们可以向模板添加一个按钮，在单击时调用重置方法。Reset添加第二个组件到Vue3项目现在我们有了输入和查询数据，让我们创建一个组件来显示结果。这个组件被命名为SearchResults.vue要将它添加到我们的HelloWorld.vue组件，它必须首先被导入并在我们的导出默认值中声明。然后我们可以将它添加到模板中://HelloWorld.vue传递参数Vueprops允许父组件向其子组件传递数据。对于我们的示例，我们希望将查询字符串从HelloWorld.vue传递到SearchResults.vue。//HelloWorld.vue访问参数在SearchResults.vue里面，从JSON文件中导入所有文章信息。importtitlesfrom'../post-data.json'exportdefault{setup(props,context){}}然后，我们需要几个步骤来访问道具。首先，我们必须在props选项中声明它们。这告诉我们的组件它需要什么数据。//SearchResults.vueexportdefault{props:{query:String},setup(props,context){//...如果我们仔细观察setup方法，它接受两个参数。props-包含传递给组件上下文的所有props-包含attrs、slots和emit我们将使用props来访问setup方法中props的值。我们需要做的就是使用计算属性来过滤文章列表。计算属性//SearchResults.vueimport{computed}from'vue'然后，我们像这样设置它，我们的计算属性接受一个getter方法。每当我们的依赖项之一发生变化时，此方法将更新我们的计算属性。//SearchResults.vueimport{computed}from'vue'importtitlesfrom'../post-data.json'exportdefault{props:{query:String},setup(props,context){constfilteredTitles=computed(()=>{})return{filteredTitles}}}对于此方法，我们要使用查询过滤所有标题。一切都转换为小写，所以我们不必担心大小写。//SearchResults.vueconstfilteredTitles=computed(()=>{returntitles.filter(s=>s.Name.toLowerCase().includes(props.query.toLowerCase()))})好~剩下要做的了事情是实际使用我们的模板来显示数据！这是使用v-for循环完成的。//SearchResults.vue就是这个~![上传中...]()Vue3在开始使用Vue3之前，您需要了解的另一件事是如何使用Vue生命周期钩子。与CompositionAPI的其余部分一样，我们必须导入要使用的生命周期挂钩，并在设置方法中声明它们。//LifecycleExampleimport{computed,onMounted}from'vue'exportdefault{setup(){onMounted(()=>{console.log('mounted')})}}总结Vue有很多很棒的特性3、这些函数对于创建可扩展的Vue应用程序非常有用。希望本文能在您使用vue3时提供一些帮助。完了~，我是刷完智，我去洗碗了，我们下期再见~我们无法实时知道代码部署后可能存在的bug。之后为了解决这些BUG，我们花了很多时间在日志调试上。顺便给大家推荐一个好用的BUG监控工具Fundebug。原文：https://learnue.co/2020/12/se...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博文早一两篇），本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，本人整理我的很多文件。欢迎加星和改进。可以参考考点面试复习。另外，关注公众号，在后台回复福利，就可以看到福利，就知道了。