了解如何使用 Vue 3 + Vite 和 Pinia 创建、测试和部署单页应用

介绍

Vue.js创建于2014年，无疑是目前领先的前端框架之一，并且随着社区和生态系统的不断扩大，它的地位似乎在相当长的一段时间内是稳固的。几年前，我曾与 Vue 2 合作过一些项目，我发现这是一次愉快的经历。

我认为现在是时候用最新版本以及Vite和Pinia等较新的工具升级我的工具集了。

本指南将详细介绍使用 Vue 3 创建功能示例书店单页应用程序并使用 Vite 运行它的步骤。它还包括有关如何使用 Pinia（Vuex 后继者）添加状态管理和使用 Vue Router 进行路由的详细信息。

将涵盖的核心概念是：

使用 Vite 创建 Vue 3 单页应用程序
使用 Vue 路由器管理路由
使用 Pinia 管理应用程序状态
使用 Vite 运行、构建和部署应用程序
编写和运行 Vue 组件测试
使用 Nightwatch 编写和运行自动化的端到端测试.js

这可能看起来很多，但我认为完全有可能在不到20分钟的时间内完成所有这些工作。上面列出的一些主题可以扩展到它们自己的整个教程中，但现在我只介绍启动和运行所有内容所需的内容。

需要提到的最后一件事是，本教程中未介绍后端。虽然数据是使用浏览器Fetch API（XHR的后继者）加载的，但本身没有服务器端组件，因此可以轻松添加后端组件。

对于所有帐户和目的，我们将在此处构建的应用程序可以部署为静态网站。

如果您渴望直接开始编码，并且想立即进入其中，则可以通过以下方式启动并运行项目：

git clone https://github.com/beatfactor/middlemarch
npm install
npm run dev

或者在Github上fork项目：https://github.com/beatfactor/middlemarch

使用创建 vite 基架工具设置应用程序

我们将使用官方脚手架工具来设置项目结构，因此请确保您安装了NPM 6 +的Node 12 +。他们也支持 Yarn 和 PNPM 作为包管理器，但我们只介绍 NPM。create-vite

该工具还将为您创建项目文件夹，因此请确保先cd到父文件夹中：create-vite

cd /workspace

使用以下命令安装和初始化项目：Vite

npm init vite@latest

然后，系统将提示您输入项目名称并选择要使用的库。从列表中选择：vue

~/workspace % npm init vite@latest
npx: installed 6 in 1.051s
✔ Project name: … vue-bookstore
? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
❯   vue
    react
    preact
    lit
    svelte

然后选择，因为我们不会使用TypeScript：vue

? Select a variant: › - Use arrow-keys. Return to submit.
❯   vue
    vue-ts

看到以下输出：

npx: installed 6 in 1.051s
✔ Project name: … vue-bookstore
✔ Select a framework: › vue
✔ Select a variant: › vue

Scaffolding project in /Users/andrei/workspace/vue-bookstore...

Done. Now run:

  cd vue-bookstore
  npm install
  npm run dev

按照上述说明操作后，我们将从Vite获得以下输出，告诉我们该应用程序正在运行：

 vite v2.7.7 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 611ms.

让我们访问localhost：3000。欢迎页面如下所示：

使用 Vue 路由器添加路由，使用 Pinia 进行状态管理

让我们回顾一下该工具创建的项目的目录结构：create-vite

vue-bookstore/
 ├── public/
 |    ├── favicon.ico
 ├── src/
 |    ├── assets/
 |    |    └── logo.png
 |    ├── components/
 |    |    └── HelloWorld.vue
 |    ├── App.vue
 |    └── main.js
 ├─── package.json
 ├─── README.md
 └─── vite.config.js

在本指南的这一部分中，我们将向项目添加两个新的依赖项：和。让我们继续从NPM安装它们。vue-routerpinia

Vue 路由器

vue-router是 Vue.js 的官方路由器。我们需要安装与 Vue 3 兼容的版本 router-4：

npm install vue-router@4 --save

Pinia

Pinia是 Vue 生态系统中出现的最新项目之一，它是 Vue.js 应用程序的新官方状态管理工具。它的api与（Vuex）非常相似，它被设计得更快，更轻量级。

您可以使用以下命令从 NPM 进行安装：pinia

npm install pinia --save

设置路由

如果您不熟悉单页应用程序中的路由或状态管理，请不要担心;这两个概念都非常容易理解，一旦你看到它是如何工作的，它们就会自我解释。

什么是单页应用程序？

单页应用程序只是一个 Web 应用程序，当您导航到其另一个子页面时，它不会重新加载页面。但是，浏览器的URL被修改了，就好像页面已被重新加载一样，这是使用HTML5 History API完成的。

在 Vite 中使用 Vue 组件

使用该工具创建的基架添加了一个非常基本的 Vue 组件，

create-vite src/components/HelloWorld.vuesrc/App.vue

还有另外两个重要文件：

index.html
src/main.js

该文件是浏览器导航到我们应用程序的页面时看到的内容，也是 Vue.js 应用程序的入口点。index.html ,main.js

这些文件的内容如下：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

添加路由

现在是时候创建应用程序的主要路由了。在 Vue 中，每个路由都必须对应于一个组件。对于此应用程序，我们将考虑每个子页面的组件，如下所示：

Homepage主页 - 我们的书店主页
Cart购物车 - 购物车和结账页面
Sign-In登录 - 用户登录页面

对于基本的HTML和CSS，我也使用Bootstrap 5来处理UI下拉列表和表单等内容，但当然你可以使用任何你想要的UI库。

现在，我们将创建空的页面组件，以便设置路由。新的目录结构将如下所示：src

src/
  ├── components/
  |    └── TopNavbar.js
  ├── lib/
  |    ├── router.js   
  |    └── store.js
  ├── pages/
  |    ├── cart/
  |    |    ├── cart.css
  |    |    ├── cart.html
  |    |    └── Cart.vue
  |    ├── home/
  |    |    ├── home.css
  |    |    ├── home.html
  |    |    └── Home.vue
  |    ├── sign-in/
  |    |    ├── sign-in.css
  |    |    ├── sign-in.html
  |    |    └── SignIn.vue
  |    └── routes.js
  ├── App.vue
  └── main.js

我们添加了三个页面，每个页面都将保留非常基本。我们只需添加组件即可使导航在不重新加载页面的情况下正常工作。TobNavbar

为添加以下内容，然后：

src/pages/cart/Cart.vue
src/pages/home/Home.vue
src/pages/sign-in/SignIn.vue

<script setup>
import TopNavbar from '../../components/TopNavbar.vue';
</script>

<template>
  <TopNavbar />
</template>
<style></style>

<script>
export default {
  components: {
    TopNavbar
  },

  computed: {},
  
  mounted() {
  },
  
  data() {
    return {
    };
  },
};
</script>

TopNavbar组件将仅包含导航链接。

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/cart/">Cart</router-link>
  <router-link to="/sign-in/">Sign In</router-link>
</template>

pages/routes.js文件包含应用程序的所有路由声明。

import {createRouter} from 'vue-router'
import Homepage from './home/Home.vue';
import SignIn from './sign-in/SignIn.vue';
import Cart from './cart/Cart.vue';

const routes = [
  {
    path: '/',
    component: Homepage
  },

  {
    path: '/sign-in/',
    component: SignIn
  },

  {
    path: '/cart/',
    component: Cart
  },
]

export default function (history) {
  return createRouter({
    history,
    routes
  })
}

1）创建路由器并将其添加到主 Vue 应用程序实例中，在：src/main.js

import { createApp } from 'vue'
import { createWebHistory } from 'vue-router'

import createRouter from './pages/routes.js'
import App from './App.vue'

const router = createRouter(createWebHistory())
const app = createApp(App)
app.use(router).mount('#app')

2）添加组件：src/App.vue

<template>
  <router-view></router-view>
</template>

重新运行，然后导航到启用路由的 Vue 3 应用程序。npm run devhttp://localhost:3000

使用 Pinia 设置状态管理

Pinia 是 Vue 核心团队.js一个新项目，现在是使用应用程序状态的推荐方法。如果你已经熟悉Vuex，那么习惯Pinia会很简单。事实上，Pinia api比Vuex稍微容易一些，也不那么冗长。

使用Pinia，在Vue 3应用程序中，有一个根store，然后是任意数量的单个store。对于我们的书店应用，我们将仅使用两个store：

目录store：可用书籍的列表
购物车store：用户想要订购的图书

创建Pinia

"pinia"是我们必须首先创建的根存储，并将其传递给 Vue 实例。

我们将在其中执行此操作，并将其更新为：src/main.js

import { createApp } from 'vue'
import { createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'

import createRouter from './pages/routes.js'
import App from './App.vue'

const store = createPinia()
const router = createRouter(createWebHistory())
const app = createApp(App)

app.use(router).use(store).mount('#app')

下一步是创建单个目录和购物车store，并在组件中使用它们。

添加目录存储

创建Pinia store主要意味着两件事：

定义store
在一个或多个组件中使用存储

定义应用store

与 Vuex 一样，Pinia 存储包含状态和两种类型的方法：getter和actions。

关于store需要考虑的一些事项：

Getters是用于从状态中检索数据的同步函数
Actions也可以是异步的函数，用于更新状态
被定义为返回初始状态的函数state

在里面创建目录store了：src/stores/catalog.js

import { defineStore } from 'pinia'

export const useCatalog = defineStore('catalog-store', {
  state: () => {
    return {
      newArrivals: [],
      fetching: false
    }
  },

  getters: {
    results(state) {
      return state.newArrivals;
    },

    isFetching(state) {
      return state.fetching;
    }
  },

  actions: {
    async fetchNewArrivals() {
      this.fetching = true;
      const response = await fetch('/data/new-arrivals.json');
      try {
        const result = await response.json();
        this.newArrivals = result.books;
      } catch (err) {
        this.newArrivals = [];
        console.error('Error loading new arrivals:', err);
        return err;
      }

      this.fetching = false;
    }
  }
})

查看上面的源代码，您会注意到我们有两个 getter 和一个action。我们不是真正的后端，而是有一个json文件，其中包含一些我们将用作目录的书籍。/data/new-arrivals.json

我们的 getter 不会对数据做任何特殊的事情，所以他们有点不必要，但我认为展示如何定义它们仍然很好。

在template中使用"store"

将上述定义链接到模板也非常简单。

让我们创建一个调用的新组件，我们将在其中使用它作为页面组件。NewArrivals
src/components/NewArrivals.vueHome.vue

<script setup>
import {useCatalog} from '../../store/catalog.js'
</script>

<template>

</template>

<style scoped></style>
<script>
import { mapState, mapActions } from 'pinia'

export default {
  computed: {
    ...mapState(useCatalog, {newArrivals: 'results'})
  },

  methods: {
    ...mapActions(useCatalog, ['fetchNewArrivals']),

    addToCart() {
      // we'll populate this later
    }
  },

  created() {
    // when the template is created, we call this action
    this.fetchNewArrivals();
  }
};
</script>

组件变为：Home.vue

<script setup>
import TopNavbar from '../../components/TopNavbar.vue';
import NewArrivals from '../../components/NewArrivals.vue';
</script>

<template>
  <TopNavbar />
  <NewArrivals />
</template>

<style></style>

<script>
export default {
  components: {
    TopNavbar,
    NewArrivals
  },
  computed: {},
  mounted() {},
  data() {
    return {};
  },
};
</script>

下面是存储和组件如何在应用程序中协同工作的图：

我还为购物车编写了一个store和一个components，但我不会将其包含在教程中，因为机制是相似的，您可以检查存储库中的源代码，该源代码将所有内容添加到一起，甚至是某些样式。

测试 Vue.js 组件

组件测试是一种 UI 测试类型，其中组件在隔离状态下呈现，而不使用其他应用组件，以验证其功能。它通常是一种测试策略，发生在端到端测试步骤之前，我们将在下一节中详细阐述。

我们需要安装 Vue TestUtils 项目，这是 Vue 的官方单元测试库.js我们需要一个面向 Vue 3 的项目。您可以使用以下命令从 NPM 安装它：

npm install @vue/test-utils@next --save-dev

安装 Nightwatch.js 和 ChromeDriver

我们将使用 Nightwatch.js 进行组件测试和端到端测试。Nightwatch已经是Vue.js团队推荐的测试框架之一，并且与Vue同时发布。

vite-plugin-nightwatch获得了对Vue组件测试的支持。我们将继续安装Nightwatch（版本2.0）：

npm install nightwatch --save-dev

我们还需要前面提到的：vite-plugin-nightwatch

npm install vite-plugin-nightwatch --save-dev

Nightwatch使用W3C WebDriver API执行浏览器自动化任务，我们还需要安装NPM包，因为我们将使用Chrome来运行我们的测试。

npm install chromedriver --save-dev

测试<组件

其中包括一个测试渲染器页面，Nightwatch已经包含运行我们组件的初始测试所需的一切。vite-plugin-nightwatch

创建一个文件夹，并在其中添加两个子文件夹：test

component- 这将举行组件测试
e2e- 这将举行端到端测试

我们还需要一个配置文件nightwatch.conf.js，但是我们可以直接运行Nightwatch，并且将自动为我们创建配置文件。只需确保也安装了（当然还有Chrome浏览器）。

确保当前工作目录是项目根目录，然后只需运行与Nightwatch捆绑在一起的示例测试即可。我们将选择测试运行duckDuckGo

npx nightwatch examples/tests/duckDuckGo.js

项目结构现在应如下所示：

vue-bookstore/
 ├── public/
 |    ├── data/
 |    └── favicon.ico
 ├── src/
 ├── ...
 |    └── main.js
 ├── test/
 |    ├── component/
 |    └── e2e/
 ├─── nightwatch.conf.js
 ├─── package.json
 ├─── README.md
 └─── vite.config.js

我们将继续创建一个名为 inside 的新文件。在其中，我们只需添加一个基本测试，该测试将挂载组件并检查是否可以在页面中找到返回的元素（即组件已挂载）。

newArrivalsTest.js
test/component

describe('New Arrivals Component Test', function() {

  it('checks if the component has been mounted', async (browser) => {
    const component = await browser.mountVueComponent('/src/components/new-arrivals/NewArrivals.vue', {
      plugins: {
        router: '/src/lib/router.js'
      }
	});
    
    expect(component).to.be.present; 
  });
});

Nightwatch使用与Mocha相同的语法。如果您已经熟悉Mocha，您甚至可以将其用作测试运行程序，但我们现在不打算这样做。describe()

我们将使用Chrome运行Nightwatch，如下所示：

npx nightwatch test/component/newArrivalsTest.js --env chrome

将打开 Chrome 浏览器并呈现组件，然后执行测试。如果您不喜欢在测试期间看到浏览器窗口弹出，则可以传递参数，如下所示：--headless

npx nightwatch test/component/newArrivalsTest.js --env chrome --headless

测试输出应如下所示：

[New Arrivals Component Test] Test Suite
──────────────────────────────────────────────────────────────
ℹ Connected to ChromeDriver on port 9515 (652ms).
  Using: chrome (97.0.4692.99) on MAC OS X.


  Running tests the component:
──────────────────────────────────────────────────────────────
  ✔ Expected element <web element{e53f9b1e-11d3-4dc4-8728-4d3cd077343e}> to be present (1ms)

OK. 1 assertions passed. (781ms)

可以查阅 Nightwatch 跑步者提供的所有 CLI 选项，方法是转到文档页面或运行：

npx nightwatch --help

目录CONTENT