如何在2021年撰寫網路應用程式？-有解無憂

如何在2021年撰寫網路應用程式？

- 介紹
- - 免責宣告
- 語言能力
- 安裝
- - Vue
  - Bundler
  - Optionals
- Development
- - 添加視圖和組件
  - - Views
    - Components
  - 動態頁面
  - - 從API獲取
    - 用戶編輯
  - 組件庫
- 部署方式
- 故障排除
- 常見問題

介紹

在本文中，我將逐步向您介紹我使用的工具，您可以繼續學習，但是了解“我為什么要這樣做”比“我在做什么”更為重要，一個很好的建議是，嘗試在本教程中與我一起執行相同的步驟，然后，嘗試更改一些越來越大的東西，最后，在結尾您應該能夠自己再次進行所有操作，

免責宣告

首先，這確實很重要，所有這些都是我對開發的偏見，我們都有獨特的看待事物的方式，

Web開發是一個巨大而復雜的主題，這篇文章并不是要描述最簡單或最快的方法，

但是，這是我從小就喜歡的方法（出于我將要講到的原因），也是我最能詳細解釋的方法，

從這里開始，我假設您對Java和Vue有基本的了解，我也不會詳細介紹如何安裝Node.js以及如何使用NPM，

語言能力

讓我們從語言開始說起，

我已經使用Javascript大約十年了，它有很多貶低者，但過去和現在一直是我最喜歡的語言，

它易于使用，擁有最大的社區之一，并且可以支持龐大的應用程式，

當然，我也在用英語寫作，盡管這不是我的母語，但它被公認是國際語言，

安裝

Node.js已安裝在我的計算機上，因此我將使用NPM安裝所有JS依賴項，

開始新專案時，我總是做的第一件事是

$ npm run init

這將創建package.json檔案，然后，我們手動創建readme.md和.gitignore檔案以及src目錄，這將在后面使用，

我的專案檔案系統的預覽
在這里插入圖片描述

Vue

我喜歡Vue，這就是我最常使用的，安裝簡單

$ npm install vue

Bundler

我比較喜歡Vue提供的模塊化模板語法，但是，這不是瀏覽器可以理解的本機JS，因此，需要對其進行轉換才能使用，

我為此使用Webpack，安裝不是那么簡單，因為我們需要更多的模塊，首先，讓我們從Webpack本身及其CLI界面開始

$ npm install webpack webpack-cli

然后，我們需要使用其編譯器添加處理Vue檔案的插件

$ npm install vue-loader vue-template-compiler

最后，我們就可以撰寫CSS，現在我們需要另一對插件來處理CSS代碼

$ npm install css-loader style-loader

現在，需要配置Webpack，這是最無趣的部分，但是我們需要了解此步驟以解決將來可能出現的問題，

Webpack可以使用名為的檔案進行配置webpack.config.js，因此讓我們創建它，

這是最低要求，如果需要擴展它，我們稍后再回來，

// 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(),
    ],
};

這樣就都結束了，我們只需要在終端中運行

$ webpack

看到我的專案被完全壓縮和縮小，這將暫時失敗，但請放心，

Optionals

這些工具不在本文討論范圍之內，也許我會在下一個中詳細介紹，

我總是使用Eslint來檢查代碼中的潛在錯誤，
為了與我的個人配置一起使用，我運行

$ npm install eslint eslint-plugin-vue @gmartigny/eslint-config

我嘗試測驗我的代碼以趕上回歸，并確保我涵蓋了大多數用例，我使用AVA進行測驗，使用NYC進行代碼覆寫，

$ npm install ava nyc

Development

這已經有很多步驟了，我還沒有寫一行代碼，所有這些看起來很多，但是請相信我，它將使您將來的運行速度更快，

比較細心的人會記得，在我的Webpack配置中，入口檔案是./src/index.js，所以，讓我們從那里開始，
我們在其中創建一個index.js檔案，src并添加幾行代碼以呼叫Vue（帶有ESM），

// 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檔案，我就可以安全地運行

$ webpack --mode=development --watch

用watch（在我們每次更改代碼時都會重新構建）以開發模式（較慢，但對錯誤的描述性更高）觸發Webpack，
這將main.js在dist目錄中創建一個新檔案，這是我的最終用戶將使用的檔案，

現在，我們創建一個index.html檔案（通常在public目錄中，但這并不是必然要求），

<!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語言中的類，

<template>
    <h1>Home</h1>
</template>

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

為了進入該視圖，我必須告訴我的Vue實體進行渲染，在index.js檔案中，我將添加必要的行，

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目錄中創建一個新檔案，

<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，

<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組件添加屬性并在主視圖中寫入資料，這將允許我為每張卡定義值，

<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>

<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獲取資料，或者允許用戶編輯頁面（或同時選擇兩個😉），

從API獲取

首先，我將從在線模擬API中獲取資料，為了做到這一點，我首先清空資料陣列，
然后，根據Vue生命周期，mounted當視圖出現在螢屏上時，我可以使用函式執行代碼，

<template>
    <!-- ... -->
</template>

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

export default {
    name: "Home",
    components: {
        Film,
    },
    data () {
        return {
            // Emtpy film list
            films: [],
        };
    },
    async mounted () {
        // Fetch from mock API
        const response = await fetch("https://mock-film-api-t0jk5mabvwnt.runkit.sh/");
        if (response.ok) {
            // Load result into films list
            this.films = await response.json();
        }
    },
};
</script>

用戶編輯

同樣，我可以允許用戶將新film添加到串列中，提交時會推送新條目的小型HTML表單將看到修改反映在視圖上，

<template>
    <v-app>
        <Film v-for="(film, index) in films" :key="index"
              :title="film.title" :text="film.text"/>
        <!-- Form that will call addFilm when submitted -->
        <form @submit="addFilm">
            <div>
                <label for="title">Title</label>
                <!-- v-model link the input value to a variable -->
                <input type="text" v-model="inputTitle" id="title">
            </div>
            <div>
                <label for="text">Text</label>
                <input type="text" v-model="inputText" id="text">
            </div>
            <button type="submit">Add</button>
        </form>
    </v-app>
</template>

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

export default {
    name: "Home",
    components: {
        Film,
    },
    data () {
        return {
            films: [],
            // Holds the value of each input
            inputTitle: "",
            inputText: "",
        };
    },
    async mounted () {
        // ...
    },
    methods: {
        // New method
        addFilm (event) {
            // Stop the form from reloading the page (default behavior)
            event.preventDefault();
            // Add a new film to the list
            this.films.push({
                title: this.inputTitle,
                text: this.inputText,
            });
            // Clear out input fields
            this.inputTitle = "";
            this.inputText = "";
        },
    },
};
</script>

當然，這將不會在線保存任何內容，并且在重新加載頁面時所做的更改將丟失，
您可以通過將請求發送到將輸入保存在資料庫中的服務器來改進此示例，

組件庫

我很懶，成為高效的開發人員通常意味著要懶惰，
除了創建所有組件之外，我們還可以使用現有的組件庫，這樣，我們可以將更多精力放在內容上，而不是如何正確設計日期選擇器，

由于使用Vue，因此我選擇了Vue兼容庫Vuetify，

npm install vuetify

只需很少的更改即可激活它index.js，

import Vue from "vue/dist/vue.esm.js";
// Get Vuetify and its CSS
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

import Home from "./views/Home.vue";

// Prepare the usage of vuetify
Vue.use(Vuetify);
const vuetify = new Vuetify();

new Vue({
    // Pass the instance to Vue
    vuetify,
    el: "#app",
    components: {
        Home,
    },
    template: "<Home/>",
});

然后，我們可以在應用程式中的任何地方（在Film.vue）中使用它，

<template>
    <!-- All Vuetify components are prefixed with "v-" -->
    <v-col cols="12">
        <v-card shaped>
            <v-card-title>{{ title }}</v-card-title>
            <v-card-text>{{ text }}</v-card-text>
        </v-card>
    </v-col>
</template>

<script>
    // ...
</script>

<!-- I don't need my crappy style anymore -->

部署方式

我最近最喜歡的發現之一是無服務器，基本上，只要您的應用程式是無狀態的（總是使用相同的引數回傳相同的結果），就不需要擁有復雜且始終在運行的服務器，通過利用快取和資源共享的功能，您可以將服務器幾乎減少為零，

使用Vercel，我們只需單擊幾下就可以自由托管，部署和提供服務，只需要將該專案放在Github上即可，

故障排除

You are using the runtime-only build of Vue where the template compiler is not available.（您正在使用Vue的僅運行時版本，而模板編譯器不可用，）

您輸入的Vue錯誤，如果您還記得的話，有很多匯入Vue的方法，默認情況下，import "vue"將呼叫該vue.runtime.common.js檔案，
在這里的代碼中，將ESM與模板配合使用（因此需要vue.esm.js），

[Vuetify] Multiple instances of Vue detected / this.$vuetify is undefined（[Vuetify]檢測到多個Vue實體/ this，$ vuetify未定義）

您的應用程式和Vuetify沒有匯入“相同”的Vue，如上所述，匯入適合您的用法的Vue非常重要，一個好的解決方案是在webpack中創建一個別名，

// In webpack.config.js
module.exports = {
    // This will tell all your code to use the same Vue.
    resolve: {
        alias: {
            vue$: "vue/dist/vue.esm.js",
        },
    },
    // ...
};

常見問題

使用它們時，為什么不需要匯入每個Vuetify組件？

當我們執行操作Vue.use(Vuetify);在index.js中，它將在整個專案中將其激活，使用它們時，可能僅匯入Vuetify組件，但這需要做一些超出本教程范圍的作業，

為什么不使用X代替Y？

我習慣了，我相信您會找到我上面描述的任何工具或方法的更好替代方法，但是我熟悉他們，
歸根結底，deliver比無休止地學習新技術更重要，

我有什么選擇？

Vue:

React
Angular
Svelte

Vuetify:

Material-UI
Any CSS frameworks:
Bootstrap
Bulma
Tailwind

Webpack:

Rollup
Skypack

Vercel:

Netlify
Heroku

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258968.html

標籤：其他

上一篇：Java學習筆記第04期——Java基礎語法Part3

下一篇：HTML網頁標簽代碼基本教學