创建你的第一个 Vue 应用程序hello world

Posted on by

在本教程中，我们将了解在 vue 中构建第一个应用程序所需的一切。我们将介绍开始制作第一个 vue 应用程序所需的内容。我们还将研究如何运行您的 vue 应用程序以便您可以在本地对其进行测试，以及为实时网站构建您的 vue 应用程序需要做什么。

创建你的第一个 Vue 应用程序#

要开始使用Vue，您首先需要安装 vue cli 工具。确保您的计算机上安装了 npm（或者如果您愿意，也可以在 yarn 中执行此操作），然后运行以下命令：

npm i -g @vue/cli

这将使我们能够访问使用 Vue 所需的大量工具。现在我们已经完成了，打开一个终端窗口并使用cd移动到要在其中创建 Vue 应用程序的目录。对我来说，那是在我的文档中，在一个名为“vue-app”的文件夹中，所以我做了这个：

cd ~/Documents/vue-app

然后运行以下命令创建一个新的 vue 应用程序：

vue create my-new-vue-app

上面的行创建了一个名为my-new-vue-app 的新应用程序。当你运行它时，你会被引导通过一组指令。使用箭头键并输入以选择您的偏好。在本教程中，我将使用Vue 3创建我们的第一个 vue 应用程序，它是 Vue 的最新版本。

我们的第一个 Vue 应用程序#

现在我们已经制作了我们的第一个应用程序，我们将拥有一个看起来有点像这样的文件夹结构：

| .git <-- 我们的 git 文件夹
| .gitignore <-- 我们希望 git 忽略的文件
| babel.config.js <-- babel 的配置，它为我们提供了额外的 JS 功能
| node_modules <-- 我们所有的 Javascript 依赖项
| package.json <-- 我们的 Javascript 依赖项列表
| package.lock.json <-- 我们的依赖项列表，以及它们的依赖项
| public <-- 我们所有公共文件和图像的位置，以及我们的索引文件
| src <-- 我们所有的 Vue 组件
| -> App.vue <-- 我们的主 Vue 应用程序文件
| -> assets <-- 存储我们应用中使用的所有图像和其他资产的地方
| -> main.js <-- 启动我们的 Vue 应用程序并创建它的文件
| -> components <-- 我们将在其中存储我们将在应用程序中使用的不同组件

太好了，现在我们有了一个功能齐全的 Vue 应用程序。只有它只有一页。大多数应用程序需要不止一页，所以接下来我们需要安装vue-router. 确保您在您的my-new-vue-app文件夹中，然后运行以下命令：

vue add router

Vue 会生成一堆新文件，让我们可以配置新页面。如果它询问您是否要使用历史模式，您可以选择Y，这意味着当用户单击链接时没有页面加载时间。Vue 现在将创建一些新文件：

| src
| -> router
| --> router.js <-- 我们不同页面的配置
| -> views <-- 一个存放我们所有不同页面的文件夹
| --> About.vue <-- 示例页面
| --> Home.vue <-- 示例页面

现在我们有了一个基本的 vue 文件结构，我们可以使用它来制作我们的第一个 Vue 应用程序。如果您想查看您的应用程序到目前为止的外观，请在my-new-vue-app文件夹中运行以下命令：

npm run serve

现在，如果您访问 http://localhost:8080/，您应该会看到您的 Vue 应用程序已准备就绪：

为你的 Vue 应用创建新页面#

如果您想向 Vue 应用程序添加新页面，请在您的视图文件夹中创建一个新文件。例如，如果我想创建一个联系页面，我会创建一个名为Contact.vue的文件。每个 vue 文件通常由三部分组成：

  • <template>区域 – 这包含该文件的 HTML 内容。
  • <script>标记 – 这包含与此文件相关的所有 Javascript。
  • <style>标签 – 这包含我们所有的 CSS。

例如，我的Contact.vue文件可能如下所示：

<template>
    <div class="contact">
        <img alt="Our Logo" src="../assets/logo.png">
        <div id="contact">
            <h2>Contact us</h2>
            <p>Contact us by phone on {{ phoneNumber }}, or via our address at 123 Fake Street, New York City.</p>
        </div>
        <footer>
    </footer></div>
</template>

<script>
export default {
    name: 'Contact',
    data() {
        return {
            phoneNumber: '123-123-123'
        }
    }
}
</script>
<style scoped="">
#contact {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 2rem;
    margin: 2rem;
    border: 1px solid #ddd;
    border-radius: 10px;
}
h2 {
    margin: 0 0 1.5rem 0;
}
</style>

Vue 中的所有 Javascript 通常都遵循相同的格式——export default {}包含我们所有的代码。在我们的示例中，我们还使用该data()函数来存储一些信息。我们在这里定义了一个电话号码，我们在模板中使用它。

在我们的模板中，我们可以使用双花括号来引用数据和道具，所以我们使用了参考我们的电话号码。如果我们以编程方式更改此数据属性，它将在我们的模板中自动更新，无需刷新！

文件的其余部分只是 HTML 和 CSS，这就是 Vue 如此容易上手的原因。

将新文件添加到我们的 router.js

为了确保我们可以访问我们的文件，我们需要将它添加到src/router/router.js中的 router.js 文件中。只需将我们的Contact.vue文件添加到路由器变量中，如下所示：

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('../views/About.vue')
    },
    {
      path: '/contact',
      name: 'Contact',
      component: () => import('../views/Contact.vue')
    }
]

现在我们有了一个全新的页面，我们可以通过http://localhost:8080/contact在浏览器中查看（假设您仍在运行npm run serve）：

更改 Vue 应用程序中的导航栏

您可能会注意到，在上面的页面中，我们有一个导航栏，我们从未将它添加到Contact.vue页面中。那是因为它在我们的App.vue文件中。我们所有的视图文件，即Home或About，都通过App.vue显示。

如果你打开你的App.vue文件，你可以在顶部的模板部分编辑导航栏：

<template>
    <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
    </div>
    <router-view>
</router-view></template>

构建你的第一个 Vue 应用程序#

当我们使用npm run serve它时，它正在运行我们网站的一个非常未优化的版本。如果我们想让我们的站点为生产做好准备，我们需要运行npm run build. 这将创建一个名为dist的新文件夹，其中包含标准的 Javascript、HTML 和 CSS 文件。该站点的优化版本需要一个 Web 服务器才能打开，但它应该与您在运行时看到的完全相同npm run serve。

如果您没有在其中运行此dist文件夹的 Web 服务器，则可以使用http-server，您可以通过以下行安装它：

npm install --global http-server

然后使用 my-new-vue-app 文件夹中的以下行运行 dist 文件夹：

npx http-server dist

结论#

现在我们已经介绍了基础知识，让我们快速看看到目前为止我们学到了什么：

  • 如何安装 vue，并创建你的第一个应用程序
  • 如何创建路由器，并将页面添加到您的 vue 应用程序
  • vue应用的基本结构，可以开始实验了
  • 如何在dist文件夹中构建你的第一个 vue 发行版
  • 如何使用http-server

在本系列的后续文章中，我们将介绍更多内容，从如何使用道具和数据，到构建您自己的基本应用程序。

推荐阅读：