谈谈创建你的第一个Vue3项目

本文已获得原作者Shadeed授权翻译。Vue3于2021年2月15日正式发布！在尤雨熙的发言中，他宣布了新框架最大的变化，并谈到了整个Vue团队所做的伟大工作。很长一段时间以来，开发人员一直在等待Vue3中宣布的真正酷炫的功能，例如Typescript支持、大型项目的更好组织以及Vue应用程序更好的渲染优化。在本文中，我们将执行以下操作，使用CompositionAPI构建两个组件。有几个不同的选项可以开始将Vue3添加到现有项目或创建您自己的Vue3项目。在这里，我使用我最喜欢的两个选项：VueCLIViteVueCLI如果您使用Vue进行开发，您可能已经使用VueCLI来设置您的项目。首先，我们必须确保我们拥有最新版本的VueCLI，这可以通过在终端上运行npmupdate-g@vue/cli来完成。接下来，创建项目，运行vuecreate，如果CLI是最新的，我们可以选择Vue3。选择Vue3选项后，我们的应用程序将构建。完成后，我们只需要进入我们的项目，然后运行我们的Vue应用，命令为：cdnpmrunserve现在，在浏览器中输入http://localhost:8080/，就会看到我们的Application!ViteVite（法语中“quick”的意思，发音为/vit/）是一款全新的前端构建工具，可以显着提升前端开发体验。它主要由两部分组成：一个开发服务器，它利用原生ES模块提供丰富的内置功能，例如惊人的快速热模块更新（HMR）。一组构建指令，将你的代码与Rollup捆绑在一起，预先配置为输出高度优化的生产静态资产。您现在可能想知道为什么要使用Vite？那么Vite与现有的vue-cli究竟有何不同？由于@vue-cli/service是建立在webpack之上的，它是一个模块打包器，它会在启动、热重载和编译时打包整个Vue项目。由于@vue-cli/service构建在webpack之上，它是一个模块打包器，将在启动、热重载和编译时打包整个Vue项目。Webpack的工作方式是通过解析应用程序中的每个导入和需求，将整个应用程序构建成一个基于JavaScript的包，并在运行时转换文件（例如Sass、TypeScript、SFC）。这都是在服务器端完成的，依赖项的数量与更改后构建/重建的时间之间大致呈线性关系。相比之下，Vite并没有捆绑应用服务器端。相反，它依赖于浏览器对JavaScript模块（又名ES模块，这是一个相对较新的功能）的原生支持。浏览器将在需要时通过HTTP请求任何JS模块，并在运行时处理它们。Vite开发服务器将按需转换任何文件（如Sass、TypeScript、SFC）。这种架构避免了整个应用程序的服务器端捆绑，并利用浏览器的高效模块处理，提供了一个显着更快的开发服务器。提示：当您对应用程序进行代码拆分和树摇动时，Vite速度更快，因为它只加载它需要的模块，即使在开发过程中也是如此。这与Webpack不同，在Webpack中，代码拆分只对生产包有利。要创建您的第一个Vite项目，请运行以下命令：npminitvite-app然后，我们只需要进入我们的项目文件夹，安装依赖项，然后使用以下命令运行我们的应用程序：cdnpminstallnpmrundev现在，如果我们导航到http://localhost:3000–我们应该看到以下应用程序：关于Vite你应该了解的一些Vue功能1.将项目打包到生产Vite的一个目标是使Vue的开发和生产尽可能简单.虽然在开发期间没有捆绑，但将您的项目捆绑到生产中非常容易。您所要做的就是运行npmrunbuild。如果你查看package.json，其实现是运行vitebuild——它与其他构建过程一样，被打包并放置在dist文件中。2.资产路径与其他Vue项目设置相同，Vite提供了两种引用`asset``的方式。绝对路径-使用公用文件夹。这些资源使用/file.extension引用，并在构建项目时复制到dist文件夹的根目录中。相对路径-例如，相对于文件夹的文件结构访问src/assets文件夹中的文件。构建项目时，整个文件夹作为_assets放在dist文件夹中。3.内置Typescript支持Vue3最大的变化之一是核心库已使用Typescript重写，允许根据IDE进行类型检查和更好的错误消息。通过在SFC中提供对.ts文件和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=''//clearsthequery}return{reset,query}}需要注意的一点是我们需要调用query.value来访问数据的值。为什么？如果我们console.log(query)，我们看到它不仅仅是一个字符串值，而是一个Proxy。使用代理可以让我们轻松捕获数据更改，这就是我们需要在引用上调用.value的原因。然后，就像我们在选项API中使用的那样，我们可以向模板添加一个按钮，在单击时调用重置方法。重置向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的值。我们需要做的就是使用计算属性来过滤文章列表。Computedproperty//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')})}}总结Vue3有很多很棒的特性，这些功能非常对于创建可扩展的Vue应用程序很有用。希望本文能在您使用vue3时提供一些帮助。完了~，我是刷完智，我去洗碗了，下次见~作者：Shadeed译者：FrontendXiaozhi来源：dmitripavlutin原文：https://learnue.co/2020/12/setting-up-your-first-vue3-project-vue-3-0-release/本文转载自微信公众号“大招天下”，可通过以下二维码关注。转载本文请联系大千世界公众号。