介紹
在之前的教程中，我們學習瞭如何安裝 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單擊該鏈接會生成以下圖像。
如您所見，鍵入：
[[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 主頁。 按“創建”選項卡時，將顯示以下屏幕。
你應該看到代表兩個項目的 vue 圖標。要創建一個新項目，[Create a new project here]單擊按鈕。
完成後，您將看到以下屏幕。
您的屏幕應該與您在本系列的第一個教程中從命令行運行的相同。
從以下選項中選擇：
[次へ]單擊 後，您將看到以下屏幕，您可以在其中選擇默認選項。
如果您選擇默認選項以外的選項，則會採取其他步驟來選擇另一個選項。然而，在這種情況下[プロジェクトの作成]您可以按下按鈕。幾分鐘後，項目創建完畢，您將被重定向到項目儀表板。
使用命令行運行命令時也應該小心
[[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 技術來託管其開發和生產環境的中小型企業。