乐趣区

关于html5:Vue3教程创建你的第一个Vue-3项目

jiezi

作者：Shadeed
译者：前端小智
起源：dmitripavlutin

点赞再看 ，微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

2021 年 2 月 15 日 Vue 3 正式公布! 在 尤雨溪 的申明中，他发表了新框架中最大的变动，并议论了整个 Vue 团队所做的杰出工作。

长期以来，开发者始终在期待 Vue 3 发表的真正酷的个性，比方 Typescript 反对、对大型项目更好的组织、及使 Vue 应用程序更好的渲染优化。

本文中咱们要做以下的内容，应用组合 API 构建了两个组件。

开始

有几种不同的选项可用于将 Vue 3 增加到现有我的项目或创立本人的 Vue 3 我的项目。

这里，我用本人最喜爱的两个选项：

  1. Vue CLI
  2. Vite

Vue CLI

如果你用过 Vue 开发，那么很可能应用了 Vue CLI 来设置我的项目。

首先，咱们必须确保领有 Vue CLI 的最新版本，能够通过在终端上运行 npm update -g @vue/cli 来做到这一点。

接下来，创立我的项目，运行 vue create < 我的项目名 >，如果 CLI 是最新的，咱们就能够抉择 Vue 3。

抉择了 Vue 3 选项，咱们的应用程序便会构建。实现后，咱们只须要进入咱们的我的项目，而后运行咱们的 Vue 利用, 该命令是：

cd < 我的项目我 >
npm run serve

当初，在浏览器中输出http://localhost:8080/，就会看到咱们的应用程序！

Vite

Vite (法语意为 “ 疾速的 ”，发音 /vit/) 是一种新型前端构建工具，可能显著晋升前端开发体验，它次要由两局部组成：

  • 一个开发服务器，它利用 原生 ES 模块 提供了 丰盛的内建性能，如速度快到惊人的 模块热更新（HMR）。
  • 一套构建指令，它应用 Rollup 打包你的代码，预配置输入高度优化的动态资源用于生产。

为什么应用 Vite

你当初可能会有疑难？，那么 Vite 与现有的 vue-cli 到底有什么不同呢?

因为 @ vue-cli / service 是在 webpack 之上构建的，因而它是一个模块捆绑程序，它将在启动，热重载和编译时捆绑整个 Vue 我的项目。

因为 @vue-cli/service 是在 webpack 之上构建的，因而它是一个模块捆绑程序，它将在启动，热重载和编译时捆绑整个 Vue 我的项目。

Webpack 的工作形式是，它通过解析应用程序中的每一个 import 和 require，将整个应用程序构建成一个基于 JavaScript 的捆绑包，并在运行时转换文件（例如 Sass、TypeScript、SFC）。

这都是在服务器端实现的，依赖的数量和扭转后构建 / 从新构建的工夫之间有一个大抵的线性关系。

相同，Vite 不捆绑利用服务器端。相同，它依赖于浏览器对 JavaScript 模块的原生反对（也就是 ES 模块，是一个比拟新的性能）。

浏览器将在须要时通过 HTTP 申请任何 JS 模块，并在运行时进行解决。Vite 开发服务器将按需转换任何文件（如 Sass、TypeScript、SFC）。

这种架构防止了服务器端对整个利用的捆绑，并利用浏览器高效的模块解决，提供了一个显著更快的开发服务器。

提醒：当你对应用程序进行 code-split 和 tree-shake 动时，Vite 的速度会更快，因为它只加载它须要的模块，即便是在开发阶段。这与 Webpack 不同，在 Webpack 中，代码拆分只对生产包无利。

创立第一个 Vite 我的项目

运行上面命令即可：

npm init vite-app < 我的项目名 >

而后，咱们只需进入咱们的我的项目文件夹，装置依赖项，而后应用以下命令运行咱们的应用程序:

cd < 我的项目名 >
npm install
npm run dev

当初，如果咱们导航到http://localhost:3000 –咱们应该看到以下应用程序：

一些你应该晓得的 Vue Vite 个性

1. 将我的项目打包到生产中

Vite 的一个指标是使 Vue 的开发和生产尽可能容易。尽管在开发过程中没有捆绑，然而将你的我的项目捆绑到生产中是非常容易的。

你所要做的就是运行npm run build。

如果查看 package.json，实现是运行 vite build –与其余构建过程一样，打包后会放在dist 文件中。

2.asset 门路

与其余 Vue 我的项目设置一样，Vite 提供了两种援用asset` 的办法。

  1. 绝对路径 – 应用专用文件夹。这些资源应用 /file.extension 援用，并且在构建我的项目时将复制到 dist 文件夹的根目录中。
  2. 相对路径 – 例如，依据文件夹的文件构造来绝对拜访 src/assets 文件夹中的文件。构建我的项目时，整个文件夹都将作为 _assets 搁置在 dist 文件夹中。

3. 内置 Typescript 反对

Vue3 最大的变动之一是应用 Typescript 重写了外围库，容许依据 IDE 进行类型检查和更好的谬误音讯。

通过提供对 .ts 文件和 SFC 中的 <script lang =“ts”> 的内置 Typescript 反对，Vite 再次与 Vue 3 顺利集成。

了解 Vue3 组件

当初咱们曾经设置好了 Vue 3 应用程序，并且了解了 Vue 3 Vite 工具，让咱们来看看这些组件是如何工作的。

Vue 3 中最大的变动是引入了组合 API。在这个新的构造中，咱们可能依据个性来组织代码，而不是仅仅通过 data、computed 等来拆散代码。

这容许咱们创立更多模块化、可读性和可伸缩性的代码，因为单个个性的代码都能够在代码的一个区域中编写。

如果关上 src/components/HelloWorld.vue 文件，咱们将看到与咱们在 Vue2 中编写的代码看起来雷同的代码 - 这称为Options API。

<script>
export default {
  name: 'HelloWorld',
  props: {msg: String},
  data() {
    return {count: 0}
  }
}
</script>

这很棒，因为在 Vue3 中，咱们依然能够在其中应用 vue2 的语法。

在本教程中，咱们将介绍如何在新的 Composition API 中实现这一点，并从 Options API 中辨认出这些变动。

组合 API 中的响应性数据

咱们首先从 vue 外围库导入一些货色，以容许咱们创立响应式变量。

import {ref} from 'vue'

而后，让咱们用如下所示的 setup 函数替换 data 选项。

import {ref} from 'vue'
  export default {setup () {return {}
    }
  }

这个 setup 办法在组件创立时运行，在这里咱们能够定义所有须要组件应用的响应数据、计算属性、办法等。

还有，该 setup 办法返回的任何内容都能够在模板中拜访。

应用 ref 创立响应式数据

为了显示这一点，咱们在模板中应用 v-model 创立一个文本输出。

<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    {{query}}
   </div>
</template>

咱们应用 ref 创立响应式 query 变量，而后从 setup 办法返回它。

setup () {const query = ref('')

      return {query}
}

而后，如返回到应用程序，会看到咱们应用 Composition API 取得了响应式数据。

很好！接下来，咱们在 input 中增加一个 clear 按钮，看看如何在 Composition API 中创立一个办法。

组合 API 中的办法

在 选项 API中，Vue 对象中有一个残缺的属性专门用于办法。对于较大的文件，这意味着数据可能在数百行之外的办法中申明，这使得组件更难读取和保护。

在 组合 API中，一切都在 setup 办法中，这意味着咱们能够依据个性组织代码，甚至将通用个性提取到它们本人的代码模块中。

咱们创立一个 reset 办法，它获取咱们的 ref 并将其设置为一个空字符串。

setup () {const query = ref('')

      const reset = (evt) => {query.value = '' // clears the query}
      
      return {
        reset,
        query
      }
}

须要留神的一件事是，咱们须要调用 query.value 能力拜访数据的值。

为什么？

如果咱们应用 console.log(query)，咱们看到它不仅仅是一个字符串值，而是一个 Proxy。应用 Proxy 容许咱们轻松地获取数据变动，这也是为什么咱们须要在援用上调用.value 的起因。

而后，就像在 选项 API应用的一样，咱们能够在模板中增加一个按钮，在单击时调用这个 reset 办法。

<button @click='reset'> Reset </button>

向 Vue3 我的项目增加第二个组件

当初咱们曾经有了输出和查问数据，接着，创立一个组件显示后果。

这个组件取名为SearchResults.vue

要将其增加到咱们的 HelloWorld.vue 组件中，首先必须将其导入并在咱们的导出默认值中申明它。

<script>
  import {ref} from 'vue'
  import SearchResults from './SearchResults.vue'
  export default {
    components: {SearchResults},
    // ...
  }
</script>

而后，咱们能够像这样将它增加到模板中:

// HelloWorld.vue
<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    <br>
    <button @click='reset'> Reset </button>
    <search-results/>
   </div>
</template>

传递参数

Vue props 容许父组件将数据传递给其子组件。对于咱们的例子，咱们心愿从 HelloWorld.vue 传递 query 字符串给SearchResults.vue。

// HelloWorld.vue
<search-results :query='query'/>

拜访参数

在 SearchResults.vue 外部，从 JSON 文件导入所有的文章信息。

import titles from '../post-data.json'
export default {setup (props, context) {}}

而后，咱们须要几个步骤来拜访 props。

首先，咱们必须在 props 选项中申明它们。这通知咱们的组件须要什么数据。

// SearchResults.vue
export default {
  props: {query: String},
  setup (props, context) {// ...

如果咱们仔细观察 setup 办法，就会发现它承受两个参数。

  1. props – 蕴含传递给组件的所有 props
  2. context– 蕴含 attrs，slot和emit

咱们将应用 props 在 setup 办法中拜访咱们的 props 的值。

咱们所须要做的就是应用计算属性来过滤使文章列表。

计算属性

// SearchResults.vue
import {computed} from 'vue'

而后，咱们这样设置它，其中咱们的 computed 属性承受一个 getter 办法。每当其中一个依赖项产生更改时，此办法将更新咱们的 computed 属性。

// SearchResults.vue
import {computed} from 'vue'
import titles from '../post-data.json'
export default {
  props: {query: String},
  setup (props, context) {const filteredTitles = computed(() => {})

    return {filteredTitles}
  }
}

对于这个办法，咱们心愿应用 query 过滤所有的题目。所有内容都转换为小写，所以咱们不用放心大小写。

// SearchResults.vue
const filteredTitles = computed(() => {return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))
    })

很好~

剩下要做的就是理论应用咱们的模板来显示数据! 这是应用 v-for 循环实现的。

// SearchResults.vue
<template>
  <div class='root'>
    <p> Showing {{filteredTitles.length}} results for "{{query}}" </p>
    <ul>
      <li v-for='title in filteredTitles' :key='title.Page'>
        {{title.Name}}
      </li>
    </ul>
  </div>
</template>

就这~

![上传中 …]()

Vue3 生命周期钩子

在开始应用 Vue3 之前，还须要晓得的另一件事是如何应用 Vue 生命周期钩子。

像 Composition API 的其余局部一样，咱们必须导入咱们想要应用的生命周期钩子，并在 setup 办法中申明它们。

// Lifecycle Example 
import {computed, onMounted} from 'vue'
export default {setup () {onMounted(() => {console.log('mounted')
    })
  }
}

总结

Vue 3 中有很多很棒的性能，这些性能对于创立可扩大的 Vue 应用程序十分有用。

心愿本文本对你在应用 vue3 时提供一些帮忙。

完~，我是刷碗智，我要去刷碗了，咱们下期见~

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://learnue.co/2020/12/se…

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版