介紹
在之前的教程中，您學習瞭如何安裝 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 插件後，默認頁面如下所示：
您現在可以看到該組件已更新為 Material Design 皮膚，並且該插件已記錄在 package.json 文件中。
[[email protected] lwvuejs-custom]$ grep cli-plugin-vuetify package.json
"vue-cli-plugin-vuetify": "^2.0.2",您還可以看到該插件已作為 vutify.js 添加到 src/plugins/ 文件夾中。
[[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點擊鏈接查看下圖。
輸入後，它將如下所示：
[[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 版本時，你會看到使用 Vueui 命令時有額外的主機選項。
[[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 主頁。 按“創建”選項卡，將顯示以下屏幕。
您現在應該看到一個代表兩個項目的 vue 圖標。創建一個新項目[ここに新しいプロジェクトを作成]按下按鈕。
完成後，您將看到以下屏幕。
此屏幕顯示了您在本系列的第一個教程中從命令行執行的相同操作。
從以下選項中選擇：
[次へ]單擊以顯示以下屏幕並選擇默認選項。
如果您選擇默認選項以外的選項，請執行其他步驟以選擇另一個選項。然而，在這種情況下，[プロジェクトの作成]您可以按下一個按鈕，幾分鐘後項目將被創建，您將被重定向到項目儀表板。
使用命令行執行命令時還需要小心。
[[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 技術託管開發和生產環境的中小型企業。