nodejs构建vue_使用Vue和NodeJS构建迷你发票应用程序：用户界面

nodejs构建vue

In the first part of this series, we looked at how to set up the backend server for the mini invoicing application. In this part, let’s take a look at how to build the part of the application users will interact with, the user interface.

在本系列的第一 部分中，我们研究了如何为小型发票应用程序设置后端服务器。 在这一部分中，我们来看一下如何构建用户将与之交互的应用程序部分，即用户界面。

先决条件 ( Prerequisites )

To follow through this article, you’ll need the following:

要继续阅读本文，您需要满足以下条件：

• Node installed on your machine
  安装在您机器上的节点
• NPM installed on your machine
  NPM安装在您的计算机上
• Have read through the first part of this series.
  阅读了本系列的第一部分 。

安装Vue ( Installing Vue )

To build the frontend of this application, we’ll be using Vue. Vue is a progressive JavaScript framework used for building useful and interactive user interfaces. To install vue, run the following command:

要构建此应用程序的前端，我们将使用Vue 。 Vue是一个渐进式JavaScript框架，用于构建有用的交互式用户界面。 要安装vue，请运行以下命令：

npm install -g vue-cli

To confirm your Vue installation, run the command:

要确认您的Vue安装，请运行以下命令：

vue --version

If you get the version number as your result then you’re good to go.

如果得到的结果是版本号，那么就很好了。

创建项目 ( Creating the Project )

To create a new project with Vue, run the following command and then follow the prompt:

要使用Vue创建新项目，请运行以下命令，然后按照提示进行操作：

vue init webpack invoicing-app-frontend

If you have followed the first part of the series, you can run this command in the same project directory. If not the command will create the project in your existing directory.

如果您已遵循本系列的第一部分 ，则可以在同一项目目录中运行此命令。 如果没有，该命令将在您现有的目录中创建项目。

This creates a sample Vue project that we’ll build upon in this article.

这将创建一个示例Vue项目，在本文中将以此为基础。

Installing Node Modules For the frontend of this invoicing application, a lot of requests are going to be made to the backend server. To do this, we’ll make use of axios. To install axios, run the command in your project directory:

安装节点模块对于此开票应用程序的前端，将对后端服务器提出许多请求。 为此，我们将使用axios 。 要安装axios ，请在您的项目目录中运行命令：

npm install axios --save

Adding Bootstrap To allow us get some default styling in our application, We’ll make use of Bootstrap. To add it to your application, add the following to the index.html file in the project:

添加Bootstrap为使我们在应用程序中获得一些默认样式，我们将使用Bootstrap 。 要将其添加到您的应用程序中，请将以下内容添加到项目中的index.html文件中：

// index.html
    [...]<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    [...]
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"crossorigin="anonymous"></script>
    [...]

配置Vue路由器 ( Configuring Vue Router )

For this application, we are going to have 2 major routes:

对于此应用程序，我们将有2条主要路线：

• / - To render the login page
  / -呈现登录页面
• /dashboard - To render the user dashboard
  /dashboard渲染用户仪表板

To configure these routes, open the src/router/index.js and update it to look like this:

要配置这些路由，请打开src/router/index.js并将其更新为如下所示：

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import SignUp from '@/components/SignUp'
import Dashboard from '@/components/Dashboard'
Vue.use(Router)
export default new Router({
     
  mode: 'history',
  routes: [
    {
     
      path: '/',
      name: 'SignUp',
      component: SignUp
    },
    {
     
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard
    },
  ]
})

This specifies the components that should be displayed to the user when they visit your application.

这指定了当用户访问您的应用程序时应向用户显示的组件。

创建组件 ( Creating Components )

One of the major selling points of Vue is the component structure. Components allows the frontend of your application to be more modular and reusable. For this application, we’ll have the following components:

Vue的主要卖点之一是组件结构。 组件使您的应用程序的前端更加模块化和可重用。 对于此应用程序，我们将具有以下组件：

• SignUp/SignIn Component
  注册/登录组件
• Header Component
  标头组件
• Navigation Component
  导航组件
• Dashboard Component
  仪表板组件
• View Invoices Component
  查看发票组件
• Create Invoice Component
  创建发票组件
• Single Invoice Component
  单一发票组件

Navigation Component This is the sidebar that will house the links of different actions. Create a new component in the /src/components directory:

导航组件这是侧边栏，将包含不同操作的链接。 在/src/components目录中创建一个新组件：

touch SideNav.vue

Now, edit the SideNav.vue like this:

现在，像这样编辑SideNav.vue ：

// src/components/SideNav.vue<script>
export default {
  name: "SideNav",
  props: ["name", "company"],
  methods: {
   setActive(option) {
      this.$parent.$parent.isactive = option;
    },
    openNav() {
      document.getElementById("leftsidenav").style.width = "20%";
    },
    closeNav() {
      document.getElementById("leftsidenav").style.width = "0%";
    }
  }
};
</script>

[...]

The component is created with two props : first the name of the user and second, the name of the company. The two methods are to add the collapsible functionality to the sidebar. The setActive method will update the component calling the parent of the SideNav component, in this case Dashboard, when a user clicks on a navigation link.

该组件由两个props创建：第一个是用户名，第二个是公司名。 这两种方法是将可折叠功能添加到侧栏。 当用户单击导航链接时， setActive方法将更新调用SideNav组件父级的组件，在本例中为Dashboard 。

The component has the following template:

该组件具有以下模板：

// src/components/SideNav.vue
[...]<template>
    <div>
        <span style="font-size:30px;cursor:pointer" v-on:click="openNav">&#9776;</span>
        <div id="leftsidenav" class="sidenav">
            <p style="font-size:12px;cursor:pointer" v-on:click="closeNav"><em>Close Nav</em></p>
            <p><em>Company: {
    { company }} </em></p>
            <h3>Welcome, {
    { name }}</h3>
            <p class="clickable" v-on:click="setActive('create')">Create Invoice</p>
            <p class="clickable" v-on:click="setActive('view')">View Invoices</p>
        </div>
    </div>
</template>
[...]

Styling for the component can be obtained from the Github repository.

可以从Github存储库中获取组件的样式。

Header Component The header component is simple, it displays the name of the application and side bar if a user is signed in. Create a Header.vue file in the src/components directory:

标头组件标头组件很简单，如果用户登录，它会显示应用程序的名称和侧栏。在src/components目录中创建Header.vue文件：

touch Header.vue

The component file will look l