如何在2021年編寫網路應用程式？
如何在2021年編寫網路應用程式？
介紹
在本文中，我將逐步向您介紹我使用的工具。您可以繼續學習，但是瞭解“我為什麼要這樣做”比“我在做什麼”更為重要。一個很好的建議是，嘗試在本教程中與我一起執行相同的步驟。然後，嘗試更改一些越來越大的東西。最後，在結尾您應該能夠自己再次進行所有操作。
免責宣告
首先，這確實很重要，所有這些都是我對開發的偏見。我們都有獨特的看待事物的方式。
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- 然後，我們需要使用其編譯器新增處理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獲取資料，或者允許使用者編輯頁面（或同時選擇兩個