介紹

在之前的教程中,我們學習瞭如何安裝 Vue 3 CLI 並看到了它附帶的一些新功能。

本文介紹了 JavaScript 框架世界中真正新的兩個特性。這些功能是插件和圖形用戶界面。

插入

插件允許您向項目添加新功能,無論您的程序是新的還是正在進行的。插件可以被認為是一個附加包。這類似於典型的項目依賴項,但增加了編輯項目配置源文件的能力。

您可以在 package.json 文件中看到它們

  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.0.5",   <----
    "@vue/cli-service": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }

所有插件的命名約定是:

cli-plugin-(插件名稱)

如何添加新插件?

這可以使用以下命令完成:

[[email protected] vue add ( name of the plugin ) 

在這種情況下,我添加了 ,

Vuetify 是 Vue 框架的 Material Design 組件框架。

https://lqwb.us/2ON2G4M

要安裝此插件,請使用以下命令:

[[email protected] lwvuejs-custom]$ vue add vuetify 📦 安装 vue-cli-plugin-vuetify... + [email protected] 添加了 7 个贡献者的 4 个包 9.021s 审计了 25170 个包 发现 0 个漏洞 ✔ 成功安装插件:vue -cli-plugin-vuetify ? 选择一个预设:(使用箭头键)❯默认(推荐)原型(快速开发)配置(高级)

對於此安裝,請選擇默認(推薦)選項。然後按“Enter”,輸出將是:

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

added 3 packages from 2 contributors and audited 27325 packages in 8.335s
found 0 vulnerabilities

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     babel.config.js
     src/assets/logo.svg
     src/plugins/vuetify.js
     vue.config.js
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js
     src/views/Home.vue

   You should review these changes with git diff and commit them.

 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

從上面的輸出中,您可以看到一些文件已更改。一開始我說插件可以修改文件。讓我們看看發生了什麼變化。示例文件:

src/components/HelloWorld.vue with vuetify
[[email protected] lwvuejs-custom]$ cat src/components/HelloWorld.vue
<template>
  <v-container>
    <v-layout
      text-center
      wrap
    >
      <v-flex xs12>
        <v-img
          :src="https://adatiya.com/post/require("../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-flex>

      <v-flex mb-4>
        <h1 class="display-2 font-weight-bold mb-3">
          Welcome to Vuetify
        </h1>
        <p class="subheading font-weight-regular">
          For help and collaboration with other Vuetify developers,
          <br>please join our online
          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
        </p>
      </v-flex>

回過頭來看,我看到默認站點是這樣的:

安裝 vuetify 插件後,默認頁面如下所示:

您可以看到該組件已使用材料設計皮膚進行了更新,並且該插件已在 package.json 文件中列出。

[[email protected] lwvuejs-custom]$ grep cli-plugin-vuetify package.json
  "vue-cli-plugin-vuetify": "^2.0.2",

您還可以在 src/plugins/ 文件夾中看到添加為 vutify.js 的插件。

[[email protected] plugins]$ cat vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

 default new Vuetify({
});

在您的域上啟動開發服務器

使用實時服務器,有一種更智能的方法可以在您的域上啟動開發服務器。為此,請將以下代碼添加到項目文件夾中的 vue.config.js 文件中:這是您需要添加的代碼。

[[email protected] lwvuejs-custom]# cat vue.config.js
module.s = {
  "transpileDependencies": [
    "vuetify"
  ]

}
module.s = {
  devServer: {
    host: 'lwvuejs.tk'

  }
}

添加代碼後,運行以下命令啟動開發服務器。

[[email protected] lwvuejs-custom]# npm run serve 

 DONE Compiled successfully in 18351ms                                                                                               8:29:26 AM

  App running at:
  - Local: https://lwvuejs.tk:8080/
  - Network: https://lwvuejs.tk:8080/

請注意,開發版本未優化。
要創建生產版本:

[[email protected] lwvuejs-custom]# run npm run build.

我可以看到開發服務器正在域上運行。

您還需要確保端口 8080 已打開。如果您無權訪問它,可以使用以下命令打開它:

[[email protected] lwvuejs-custom]# iptables -I INPUT -p tcp --dport 8080 -j ACCEPT ( Port open for all the traffic)

[[email protected] lwvuejs-custom]# iptables -I OUTPUT -p tcp --dport 8080-j ACCEPT ( Port open for all the traffic)

[[email protected] lwvuejs-custom]# Iptables-save 

CLI GUI 視圖

圖形用戶界面是 JavaScript 框架世界中的新事物。如果您不熟悉命令行,此選項允許您執行通常在 GUI 中從命令行執行的所有操作。

這些特點是:

  • 創建項目
  • 管理項目的能力
  • 能夠安裝插件
  • 能夠安裝其他依賴項
  • 能夠配置備用選項

下一節將詳細介紹 GUI。

開始查看 UI

通常,如果您使用的是本地開發服務器,請像這樣啟動您的 UI:

[[email protected] lwvuejs-custom]# vue ui 

此命令產生以下輸出:

[[email protected] ~]# vue ui
🚀 Starting GUI...
🌠 Ready on https://localhost:8000

單擊該鏈接會生成以下圖像。

vue-項目管理器-page2

如您所見,鍵入:

[[email protected] ~]# vue ui -h 

不幸的是,沒有在特定主機上運行 UI 的選項。

[[email protected] ~]# vue ui -h
Usage: ui [options]

start and open the vue-cli ui

Options:
  -p, --port <port>  Port used for the UI server (by default search for available port)
  -D, --dev          Run in dev mode
  --quiet            Don't output starting messages
  --headless         Don't open browser on start and output port
  -h, --help         output usage information

vue --version

3.0.5 

如果要在實時服務器上運行 UI,則需要進行次要版本升級,因為 UI 將無法與本教程中安裝的 3.0.5 版本的實時服務器一起使用。

所以更新到新的次要版本的命令是:

npm install -g @vue/[email protected] ( UI able to run on live server ) 

此命令的輸出如下所示:

[[email protected] ~]# npm install -g @vue/[email protected]
npm WARN deprecated [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
/usr/bin/vue -> /usr/lib/node_modules/@vue/cli/bin/vue.js

> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> @apollo/[email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/@apollo/protobufjs
> node scripts/postinstall


> [email protected].19.4 postinstall /usr/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate


> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@vue/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @vue/[email protected]
added 700 packages from 527 contributors and updated 3 packages in 23.288s

將 Vue 更新到 3.1.3 版後,您會發現在使用 Vue ui 命令時添加了一個主機選項。

[[email protected] ~]# vue --version
3.1.3
[[email protected] ~]# vue ui -h
Usage: ui [options]

start and open the vue-cli ui

Options:
  -H, --host <host>  Host used for the UI server (default: localhost)
  -p, --port <port>  Port used for the UI server (by default search for available port)
  -D, --dev          Run in dev mode
  --quiet            Don't output starting messages
  --headless         Don't open browser on start and output port
  -h, --help         output usage information

但是,在我們開始在我們的實時服務器上使用 UI 之前,我們需要為流量打開 8000 端口。這是因為 UI 偵聽該端口。

為此,您可以運行以下命令:

[[email protected] ~]# iptables -I INPUT -p tcp --dport 8000 -j ACCEPT ( Port open for all the traffic)

[[email protected] ~]# iptables -I OUTPUT -p tcp --dport 8000 -j ACCEPT ( Port open for all the traffic)

[[email protected] ~]# iptables-save

這將為所有流量打開端口 8000。更好的命令是將端口限制為特定的 IP 地址。

[[email protected] ~]# iptables -I INPUT -p tcp -s IP.ADD.RE.SS --dport PORT.NUMBER -j ACCEPT

[[email protected] ~]# iptables -I INPUT -p tcp -s IP.ADD.RE.SS --dport PORT.NUMBER -j ACCEPT

[[email protected] ~]# iptables-save 

最後,您可以使用以下命令啟動 UI:

[[email protected] ~]# vue ui -H lwvuejs.tk
🚀  Starting GUI...
🌠  Ready on https://lwvuejs.tk:8000

使用用戶界面

啟動 UI 後,第一個屏幕會顯示一些選項。

  • 商業
  • 創造
  • 進口

商業

項目顯示所有現有項目。在這種情況下,沒有列出任何項目,因為您沒有使用 UI 來創建它們。等一等! 我創建了兩個項目,lwvuejs-default 和 lwvuejs-custom。那麼為什麼他們沒有出現在項目頁面上呢?

它們是從命令行創建的,因此此處未顯示。

有沒有辦法讓它們出現在 UI 中? 您可以使用“導入選項”將它們導入 UI。單擊主頁上的導入選項後,您將看到以下屏幕。

查看項目經理頁面

在此屏幕中,您可以通過單擊右上角的黑色鋼筆圖標來輸入項目的路徑。在這種情況下,位置將是:

[[email protected] ~]# /home/lwvuejs/public_html/lwvuejs-default 

什麼時候

[[email protected] ~]# /home/lwvuejs/public_html/lwvuejs-custom 

按 Enter 進入項目文件夾。然後在底部[このフォルダーをインポート]單擊按鈕。

有了這個,[プロジェクト]兩個項目都出現在選項卡上。

查看項目經理頁面

如果您想管理您的項目,請按項目名稱,將出現一個新窗口,您可以在其中更改上述所有項目。

使用 UI 創建項目

要使用 UI 創建項目,您需要轉到 UI 主頁。 按“創建”選項卡時,將顯示以下屏幕。

create_tab2.4.20

你應該看到代表兩個項目的 vue 圖標。要創建一個新項目,[Create a new project here]單擊按鈕。

create_tab2.4.20

完成後,您將看到以下屏幕。

創建一個新項目

您的屏幕應該與您在本系列的第一個教程中從命令行運行的相同。

從以下選項中選擇:

項目.文件夾.2.4.20

[次へ]單擊 後,您將看到以下屏幕,您可以在其中選擇默認選項。

vuejs - 創建項目 - 歡迎

如果您選擇默認選項以外的選項,則會採取其他步驟來選擇另一個選項。然而,在這種情況下[プロジェクトの作成]您可以按下按鈕。幾分鐘後,項目創建完畢,您將被重定向到項目儀表板。

項目.dashboard.2.4.20

使用命令行運行命令時也應該小心

[[email protected] ~]# vue ui -H lwvuejs.tk 

您將看到一些額外的行,表明該項目已創建。

[[email protected] ~]# vue ui -H lwvuejs.tk
🚀 Starting GUI...
🌠 Ready on https://lwvuejs.tk:8000
✨ Creating project in /home/lwvuejs/public_html/lwvuejs-custom/lwvuejs-ui.
⚓ Running completion hooks...
📄 Generating README.md...

其餘的選項非常簡單。這比使用命令行版本要容易得多,因為它為 Vue JS 提供了一種全新的方式來管理您的 Javascript 框架。

立即預訂您的位置!

Javascript可以同時運行在前端和後端,因此它可以為多個框架提供底層機制。 Liquidweb 的混合雲服務非常適合希望利用 VueJS 技術來託管其開發和生產環境的中小型企業。