如何在2021年编写网络应用程序？

2021-08-23 17:51:22 浏览数 (1)

如何在2021年编写网络应用程序？

    • 介绍
      • 免责声明
    • 语言能力
    • 安装
      • Vue
      • Bundler
      • Optionals
    • Development
      • 添加视图和组件
        • Views
        • Components
      • 动态页面
        • 从API获取
        • 用户编辑
      • 组件库
    • 部署方式
    • 故障排除
    • 常见问题

介绍

在本文中，我将逐步向您介绍我使用的工具。您可以继续学习，但是了解“我为什么要这样做”比“我在做什么”更为重要。一个很好的建议是，尝试在本教程中与我一起执行相同的步骤。然后，尝试更改一些越来越大的东西。最后，在结尾您应该能够自己再次进行所有操作。

免责声明

首先，这确实很重要，所有这些都是我对开发的偏见。我们都有独特的看待事物的方式。

Web开发是一个巨大而复杂的主题。这篇文章并不是要描述最简单或最快的方法。

但是，这是我从小就喜欢的方法（出于我将要讲到的原因），也是我最能详细解释的方法。

从这里开始，我假设您对Java和Vue有基本的了解。我也不会详细介绍如何安装Node.js以及如何使用NPM。

语言能力

让我们从语言开始说起。

我已经使用Javascript大约十年了。它有很多贬低者，但过去和现在一直是我最喜欢的语言。

它易于使用，拥有最大的社区之一，并且可以支持庞大的应用程序。

当然，我也在用英语写作。尽管这不是我的母语，但它被公认是国际语言。

安装

Node.js已安装在我的计算机上，因此我将使用NPM安装所有JS依赖项。

开始新项目时，我总是做的第一件事是

代码语言：javascript复制
$ npm run init

这将创建package.json文件。然后，我们手动创建readme.md和.gitignore文件以及src目录，这将在后面使用。

我的项目文件系统的预览

Vue

我喜欢Vue，这就是我最常使用的。安装简单

代码语言：javascript复制
$ npm install vue

Bundler

我比较喜欢Vue提供的模块化模板语法。但是，这不是浏览器可以理解的本机JS。因此，需要对其进行转换才能使用。

我为此使用Webpack。安装不是那么简单，因为我们需要更多的模块。首先，让我们从Webpack本身及其CLI界面开始

代码语言：javascript复制
$ npm install webpack webpack-cli

然后，我们需要使用其编译器添加处理Vue文件的插件

代码语言：javascript复制
$ npm install vue-loader vue-template-compiler

最后，我们就可以编写CSS，现在我们需要另一对插件来处理CSS代码

代码语言：javascript复制
$ npm install css-loader style-loader

现在，需要配置Webpack。这是最无趣的部分，但是我们需要了解此步骤以解决将来可能出现的问题。

Webpack可以使用名为的文件进行配置webpack.config.js，因此让我们创建它。

这是最低要求。如果需要扩展它，我们稍后再回来。

代码语言：javascript复制
// Get the vue-loader plugin
const VueLoaderPlugin = require("vue-loader/lib/plugin");

// This is what the file exports
module.exports = {
    // My entry point
    entry: "./src/index.js",
    module: {
        rules: [
            // All Vue files use the vue-loader
            {
                test: /.vue$/,
                loader: "vue-loader",
            },
            // All CSS files use css than style loaders
            {
                test: /.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
        ],
    },
    plugins: [
        // Register the vue-loader plugin
        new VueLoaderPlugin(),
    ],
};

这样就都结束了，我们只需要在终端中运行

代码语言：javascript复制
$ webpack

看到我的项目被完全压缩和缩小。这将暂时失败，但请放心。

Optionals

这些工具不在本文讨论范围之内。也许我会在下一个中详细介绍。

我总是使用Eslint来检查代码中的潜在错误。 为了与我的个人配置一起使用，我运行

代码语言：javascript复制
$ npm install eslint eslint-plugin-vue @gmartigny/eslint-config

我尝试测试我的代码以赶上回归，并确保我涵盖了大多数用例。我使用AVA进行测试，使用NYC进行代码覆盖。

代码语言：javascript复制
$ npm install ava nyc

Development

这已经有很多步骤了，我还没有写一行代码。所有这些看起来很多，但是请相信我，它将使您将来的运行速度更快。

比较细心的人会记得，在我的Webpack配置中，入口文件是./src/index.js。所以，让我们从那里开始。 我们在其中创建一个index.js文件，src并添加几行代码以调用Vue（带有ESM）。

代码语言：javascript复制
// Import Vue, I prefer the ESM syntaxe
import Vue from "vue/dist/vue.esm.js";

// Create a new Vue instance targeted at the element with the id "app"
new Vue({
    el: "#app",
});

有了这个基本的JS文件，我就可以安全地运行

代码语言：javascript复制
$ webpack --mode=development --watch

用watch（在我们每次更改代码时都会重新构建）以开发模式（较慢，但对错误的描述性更高）触发Webpack。 这将main.js在dist目录中创建一个新文件。这是我的最终用户将使用的文件。

现在，我们创建一个index.html文件（通常在public目录中，但这并不是必然要求）。

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<!-- My target element -->
<main id="app"></main>
<!-- The JS file from webpack -->
<script src="../dist/main.js"></script>
</body>
</html>

在浏览器中打开该文件将不会显示任何预期的结果，但这一切正常。到目前为止，这是我项目的状态。

添加视图和组件

你Vue的文件应该是视图之间拆分（个人屏幕，如：菜单，关于…）和组件（撰写你的意见，如：按钮，页脚…） 这两种工作方式相同，但不具有相同的关注。因此，让我们在其中添加两个目录（views和components）src进行排序。

Views

让我们从创建一个新视图开始。这将是主页，所以我将其称为文件Home.vue。

我在文件名中使用了大写字母，以表明它是Java等其他OOP语言中的类。

代码语言：javascript复制
<template>
    <h1>Home</h1>
</template>

<script>
export default {
    name: "Home",
};
</script>

为了进入该视图，我必须告诉我的Vue实例进行渲染。在index.js文件中，我将添加必要的行。

代码语言：javascript复制
import Vue from "vue/dist/vue.esm.js";
// Import the view
import Home from "./views/Home.vue";

new Vue({
    el: "#app",
    // Declare it as a components I'll use (I know, views are treated as components by Vue)
    components: {
        Home,
    },
    // Render the view
    template: "<Home/>",
});

为了拥有更多views，您需要在views之间进行导航，因此需要vue-router。我们暂时不谈论它。

Components

想象一下，我想为我想看的每部电影制作一张简单的卡片（标题 文字），我不想重复每张卡片的代码。一个很好的规则是DRY（Don’t Repeat Yourself）。 如果您写两次以上，则应将其分解为一处。

同样，我Film.vue在components目录中创建一个新文件。

代码语言：javascript复制
<template>
    <div class="film">
        <h2>Title</h2>
        <p>Text</p>
    </div>
</template>

<script>
export default {
    name: "Film",
};
</script>

<!-- scoped because I don't want to interfere with any other component -->
<style scoped>
.film {
    border: 1px solid blue;
}
</style>

并在中使用它Home.vue。

代码语言：javascript复制
<template>
    <div>
        <!-- Use the component -->
        <Film />
        <Film />
        <Film />
    </div>
</template>

<script>
// Import the component
import Film from "../components/Film.vue";

export default {
    name: "Home",
    components: {
        // Declare the component
        Film,
    },
};
</script>

正如您已经看到的那样，我有3张卡片具有相同的标题和文本。 这不是我想要的。 如果我向card组件添加属性并在主视图中写入数据，这将允许我为每张卡定义值。

代码语言：javascript复制
<template>
    <div class="film">
        <!-- Use properties here -->
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
    </div>
</template>

<script>
export default {
    name: "Film",
    // Properties list declaration
    props: ["title", "text"],
};
</script>

<style scoped>
.film {
    border: 1px solid blue;
}
</style>
代码语言：javascript复制
<template>
    <div>
        <!-- Loop through my data -->
        <Film v-for="(film, index) in films" :key="index"
              :title="film.title" :text="film.text"/>
    </div>
</template>

<script>
import Film from "../components/Film.vue";

export default {
    name: "Home",
    components: {
        Film,
    },
    // data should be a function
    data () {
        // that return a set of values
        return {
            films: [
                {
                    title: "Alien",
                    text: "It follows the crew of the commercial space tug Nostromo, who encounter the eponymous Alien, an aggressive and deadly extraterrestrial set loose on the ship.",
                },
                {
                    title: "Interstellar",
                    text: "In a dystopian future where humanity is struggling to survive, it follows a group of astronauts who travel through a wormhole near Saturn in search of a new home for mankind.",
                },
                {
                    title: "Reservoir Dogs",
                    text: "Diamond thieves whose planned heist of a jewelry store goes terribly wrong.",
                },
            ],
        };
    },
};
</script>

设置好之后，应用于我的数据的任何更改都会反映在屏幕上。

动态页面

例如，我可以从API获取数据，或者允许用户编辑页面（或同时选择两个

vue.js 网站 webpack 打包 api

0 人点赞