启动并运行 VueJS 所需的一切。

2025-05-28

启动并运行 VueJS 所需的一切。

说到这儿,你很可能已经听说过一个叫Vue的 JavaScript 框架。如果你一直想尝试一下,但又不知道从何入手,我可以帮你。在本文中,我将告诉你我为什么喜欢 Vue,并提供四种不同的方法,让你可以编写你的第一个应用程序。

通常情况下,我避免为框架新手提供太多选项来完成相同的操作,但在这种情况下,我认为这很重要。您可能喜欢使用命令行,也可能更喜欢在 GUI 中工作。还有一些方法,无需 CLI,只需在 HTML 页面中添加一个脚本标签即可开始编写 Vue 应用程序。最后,您可能不想费心设置开发环境,而是直接开始尝试。无论哪种选择最适合您,我都能满足您的需求。

在您阅读本文的过程中,我会为您提供一些资源,当您读到最后时,我会告诉您我认为您下一步应该关注的内容。本文不会深入探讨 Vue 是什么,也不会深入讲解如何使用我提供的每个选项,所以请记住这一点。

进入门槛低

对我来说,Vue 的真正强大之处在于它作为一个框架的受欢迎程度。核心团队做了出色的工作,确保各种技能水平的开发者都能轻松上手并高效工作。只要你熟悉 HTML、CSS 和 JavaScript,就可以立即开始构建一些功能强大的应用程序。

我还认为,在三大顶级框架(Angular、React 和 Vue)中,Vue 的入门门槛最低。这其中有很多原因,但对我来说,主要有以下三点:

  • 出色的文档
  • 很棒的社区
  • 渐进式框架

出色的文档

当你问大多数喜欢使用 Vue 的开发者时,我想他们首先会告诉你的一件事就是它的文档有多棒。如果你访问 Vue.js 网站,你会发现文档被分成了几个部分。

指导

在本指南,您将找到 Vue.js 入门所需的一切。指南以清晰的逻辑流程,讲解了构建基于组件的应用程序所需的概念。

API

在API,您将找到开始使用 Vue API 所需的一切。如果您在 Vue 中看到某个方法,但不太清楚它的作用,这里应该能帮您找到答案。

风格指南

在《代码风格指南》中,你会发现一些很棒的建议,可以帮助你避免错误和反模式。重要的是,这些建议并非规则,而更像是指南。在你熟练掌握一些应用程序的编写技巧后,我会开始逐步讲解,因为我发现它非常宝贵。

示例

在示例,您将找到使用 Vue 构建的示例应用程序。我打算将此资源留到以后使用,并专注于构建简单的组件。但当您准备好了解完整应用程序的组成方式时,可以查看它。

食谱

Cookbook中,你会找到一些常见问题的答案。这些问题可能是“如何进行表单验证”或“如何对组件进行单元测试”。这同样是一个宝贵的资源,但我建议你等到开始问这类问题的时候再来找。

工具和核心库

关于工具和核心库也有很多很棒的资源和文档。我不会深入讲解这些,因为我想深入研究并开始编写一些代码。我建议你先把它们留作资源,看看有哪些资源可供你使用。

工具

核心库

很棒的社区

在我的开发生涯中,我曾参与过一些很棒的社区,Vue 社区也不例外。每个人都热情友好,乐于助人。想要了解社区里其他人正在构建什么或对什么感兴趣,一个简单的方法就是在 Twitter 上关注他们。以下是我认为你应该立即关注的 10 个人。

渐进式框架

如果你访问 Vue.js 的主页,你会看到它被称为“渐进式框架”。虽然乍一看这听起来像是营销噱头,但你很快就会意识到并非如此。让我们先从渐进式的定义开始。

逐渐或分阶段发生或发展;一步一步地进行。

稍后您将看到,您可以采用循序渐进的方式构建 Vue 应用程序。如果您已有项目,也想添加 Vue,没问题。您可以先添加一个 script 标签,然后编写几行代码。

如果您想使用 CLI 根据可能需要的功能搭建一个新项目,这也不是问题。当您的应用程序开始扩展并需要添加诸如路由或状态管理之类的功能时,这真的很容易做到。

我们之前讨论过,Vue 是一个易于上手的框架。如果你已经了解 HTML、CSS 和 JavaScript,现在就可以开始学习。如果是这样,那就让我们开始编写一些代码吧。

Vue JS 脚本

我们要研究的第一个选项是使用 script 标签。如果你以前用过 JavaScript,这对你来说并不陌生。你有一个 HTML 页面,需要添加一些功能,所以你需要添加一个 script 标签。这不仅仅是为了学习 Vue,因为它有一些实际的用途。

在工作中引入新的工具、库和框架通常非常困难。如果你真的很喜欢用 Vue,然后去找老板问他能否用 Vue 重写整个系统,他几乎会立刻否决你的想法。

如果你去找他们,让他们在你正在构建的新页面上介绍 Vue,那就更容易说服他们了。在这个例子中,我们将构建一个相当随意的应用程序,但它可以很好地解释几个不同的概念。

你好,Vue!

在这个应用中,你将显示文本“Hello, Vue!”以及其下方的当前日期和时间。然后,你将编写一些逻辑来更新当前日期/时间,以便用户能够实时看到时间变化。首先,创建一个目录,并将以下内容添加到一个新页面index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello, Vue.js</title>
</head>
<body>

</body>
</html>

现在您已经完成了页面设置的基本部分,是时候添加 Vue.js 脚本了。您可以在 body 结束标记之前添加以下代码行。

<!-- development version includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

</script>

我保留注释是因为需要注意这是脚本的开发版本。如果您要将其投入生产,则需要使用生产脚本。您可以在Vue.js 指南文档中阅读更多相关信息。

您需要做的第一件事是添加一个根元素来挂载您的 Vue 实例。

<div id="app">

</div>

然后创建一个新的 Vue 实例并告诉 Vue 你的根元素是什么。

<script>
  const app = new Vue({
    el: '#app'
  })
</script>

现在你需要创建几个变量来保存值,以便用于在页面上显示信息。你需要在数据对象上声明属性来实现这一点。

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      now: new Date()
    }
  })
</script>

现在您的数据已经设置好了,Vue 为我们提供了一种非常干净的方式在页面上显示该数据。

<div id="app">
  <h1>{{ message }}</h1>
  <p>{{ now }}</p>
</div>

给自己一个大大的鼓励,因为你刚刚创建了你的第一个 Vue 应用。运行这个应用,你应该会看到标题“Hello, Vue!”,以及它下方的当前日期/时间。我使用 Visual Studio Code 和Live Server 扩展来运行它。

这看起来没什么,但 Vue 实际上在后台为你做了很多事情。数据和 DOM 现在已关联,并且一切都是响应式的。我们怎么知道的?打开浏览器的 JavaScript 控制台(现在,在这个页面上),并将 app.message 设置为不同的值。你应该会看到上面的渲染示例相应地更新。

Vue 还允许您“钩住”组件的生命周期。这意味着您可以监听诸如 、 等等事件created。我不想对此进行过多的探讨,因为本文旨在向您展示创建 Vue 应用程序的不同方法,而不是其他所有内容。不过mounteddestroyed我确实想完成我们的应用程序。

以下代码将每秒更新变量 now 。Vue 挂载后,您将每秒使用该setInterval方法运行一个函数。就像在 Vue 实例上添加自己的数据一样,您可以通过将方法添加到 methods 对象来创建方法。

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      now: new Date()
    },
    methods: {
      updateDate() {
        this.now = new Date();
      }
    },
    mounted() {
      setInterval(() => {
        this.updateDate();
      }, 100);
    }
  })
</script>

现在运行应用程序,应该会得到相同的显示,但当前日期时间每秒都会更新。您无需手动更新 DOM,因为 Vue 已将数据变量绑定到 DOM,当它们更新时,DOM 也会更新。

Vue CLI

虽然在页面上放置 script 标签可以让我们快速启动并运行,但它的扩展性并不好。如果你想构建功能齐全的单页应用程序 (SPA) 并利用工具链,那么 Vue CLI 是一个不错的选择。

如果您不喜欢在命令行上执行所有操作,请不要担心,您在此处安装的相同 CLI 工具有一个 UI 版本。

安装 Vue CLI

首先需要安装 Vue CLI。前提是必须安装 NodeJS 和 npm,所以如果您是新手,请花点时间安装它们,并阅读一些相关知识,以便更好地了解它们的用途。要安装 Vue CLI,请运行以下命令:

    npm install -g @vue/cli

对于create新应用程序,您可以使用命令vue create。如果您不确定哪些命令可用,可以运行 vue -h

create 命令采用应用程序名称,因此让我们通过运行以下命令创建一个新的 vue 应用程序:

vue create hello-vue

这将在当前目录中创建一个名为 的新文件夹hello-vue。我将在以后的文章中详细介绍这一点,但现在,只需接受默认设置,系统就会为您创建一个新的应用程序。

打开src/components/HelloWorld.vue并将其中的所有内容替换为以下内容。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ now }}</p>
  </div>
</template>

<script>
export default {
  name: "Hello Vue",
  props: {
    msg: String
  },
  data() {
    return {
      now: new Date()
    };
  },
  methods: {
    updateDate() {
      this.now = new Date();
    }
  },
  mounted() {
    setInterval(() => {
      this.updateDate();
    }, 100);
  }
};
</script>

从命令行(或集成终端)使用以下命令运行您的应用程序

npm run serve

当您的应用程序启动时,命令行应该告诉您它在哪里运行,但默认情况下,它应该在http://localhost:8080/

这只是使用 CLI 的快速演练,但我希望您能够看到创建一个具有强大基础架构并可随着您的需求增长而扩展的新应用程序是多么容易。

视图界面

安装 Vue CLI 后,您可以通过从命令行运行以下命令来使用 UI

vue ui

这将在http://localhost:8000/dashboard打开一个新应用程序,如下所示

您可以使用 Vue UI 创建一个新项目,它将为您提供与命令行相同的选项。

当您的项目完成后,您可以使用项目任务直接从 UI 运行它。

CodeSandbox

虽然这些都是启动和运行 Vue 的好方法,但它们也需要你搭建一些开发环境。如果你还没有机会尝试,我在这里向你推荐一款很棒的 Web 在线代码编辑器,叫做CodeSandbox

首先,你需要使用你的 Github 账户登录,注册一个 CodeSandbox 账户。登录后,点击“创建沙盒”,然后你就可以从众多模板中进行选择。你可以从“常用模板”或“客户端模板”选项卡中选择 Vue。

只需几秒钟,您就能启动并运行一个新的 Vue 应用程序!左侧窗格中显示了所有项目文件、位于中间的编辑器以及正在运行的应用程序的浏览器预览。

打开src/components/HelloWorld.vue并将其中的所有内容替换为以下内容。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ now }}</p>
  </div>
</template>

<script>
export default {
  name: "Hello Vue",
  props: {
    msg: String
  },
  data() {
    return {
      now: new Date()
    };
  },
  methods: {
    updateDate() {
      this.now = new Date();
    }
  },
  mounted() {
    setInterval(() => {
      this.updateDate();
    }, 100);
  }
};
</script>

现在你应该能看到之前一直在用的应用程序了。CodeSandbox 的妙处在于,现在你可以把它分享给朋友们,炫耀一下或者寻求一些建议。

https://codesandbox.io/s/62o36qkmrr?fontsize=14

资源

这些是我最喜欢的一些资源,可以帮助你入门。想要深入了解 Vue 生态系统的所有内容,请查看Awesome Vue

播客

框架

接下来该去哪里?

无论你使用什么框架,你都需要保持你的 JavaScript 技能。你花在提升 JavaScript 技能上的时间越多越好。这将确保你能够使用任何你遇到的框架或库。

我之前提到过指南文档,但值得再次提及。我会从这里开始,尽可能多地阅读,同时也确保你在学习过程中不断练习示例。重复是学习过程中不可忽视的重要一步。在阅读文档时,我会重点讲解 Vue 的核心概念。

  • 组件基础知识
  • 数据绑定
  • 事件处理
  • 指令
  • 方法
  • 计算属性
  • Vue 组件生命周期
  • 道具

现在先不要着急构建大型应用程序。专注于构建组件,剩下的事情会慢慢到来。

结论

如果你在 Twitter 上关注我(如果你还没有,那就赶紧关注我吧),你就会知道我是 Vue 的忠实粉丝。我喜欢编写基于组件的应用程序,我认为 Vue 不仅让编写代码变得简单,而且让编写代码变得非常有趣。如果你在 Vue.js 的旅程中有任何疑问,请随时联系我们。朋友们,一如既往……

快乐编码

本文最初发布在我的博客https://www.danvega.dev/blog上。如果您觉得这篇文章有趣,请考虑订阅我的新闻通讯或在Twitter上关注我。

文章来源:https://dev.to/therealdanvega/everything-you-need-to-get-up-and-running-with-vuejs-8c4
PREV
面向开发人员的全新 MacBook 设置 Boot Camp Windows 10
NEXT
npm 创建包 JSon 创建你的第一个 npm 包