Vue CLI是一個簡單而強大的工具,用來建立Vue.js專案。它可以確保各種建置工具與合理的預設設定一起順利運行,因此您可以專注於編寫應用程序,而不必花時間在配置上進行鬥爭。
Vue CLI 3是目前為止Vue生態系統中發生的最好事情,原因如下:
##1、基於外掛程式的架構
新的CLI實現了我們所謂的基於插件的體系結構,這是對先前使用基於模板的體系結構的版本的重大改進。 這意味著,現在只有一個模板,您需要的所有其他功能都將作為插件添加。2、靈活性
新的CLI使超級容易開始一個新項目,而不必考慮將來可能需要的所有功能。 您可以建立項目,直接進行編碼,然後在需要功能時,只需添加即可!3、Zero-config快速原型
#這樣,您就可以像處理html檔案一樣來提供vue應用或元件。4、Vuex
新的CLI允許您將vuex新增至專案中,就像在先前版本中新增vue路由器一樣。5、Typescript
現在正式的cli支援引導typescript vue.js應用程式6、自訂插件
如果還不夠完善的CLI官方插件,則可以創建您自己的自訂插件(當然,還可以發布您的插件,以便其他人可以使用它們)。安裝Vue CLI 3
要安裝CLI,請執行下列程式碼。npm install -g @vue/cli這將安裝最新版本的Vue CLI。完成後,您可以透過執行以下命令確認已安裝的版本:
vue -V
更改CLI命令
與先前的版本相比, CLI命令略有變化,並且新命令已添加到好東西包中。vue create myproject
建立一個名為myproject的新專案。
vue serve
以零配置在開發模式下提供.js或.vue檔。
vue build
使用零配置從.js或.vue檔案建立生產就緒的捆綁包。
vue invoke
呼叫已安裝的外掛程式產生器以建立外掛程式正常運作所需的檔案。
vue inspect
會顯示應用程式的webpack配置,因為它已經完全抽象化。
Vue init
是為仍希望使用舊版2的使用者保留的,但要使用此命令,您必須安裝一個全域網橋
npm install -g @vue/cli-init安裝完成後。現在,您隨時可以在版本3中直接開始使用版本2。
vue init webpack newapp
建立一個新項目
要建立一個新項目,請在您的終端機中執行以下程式碼vue create projectname其中
projectname是要建立的應用程式的名稱。
babel&eslint設定)或手動選擇所需的功能。
外掛程式支援開箱即用
- #Typescript
@vue/typescript
- 漸進式Web應用程式(PWA)
@vue/pwa
- Vue Router
- Vuex
- CSS預處理器(postcss,css模組,sass,less和stylus)
- Linter / Formatters
@vue/eslint
- 單元測試
@ vue / mocha
或
@ vue / jest - #E2E測試
@ vue / cypress
或
@ vue / nightwatch
##預設值在使用CLI建立新專案並手動選擇功能時,會建立預設。
CLI使用此创建的预设来创建项目文件。
它使用JSON编写,包含创建新应用时选择的所有功能。
预设可以重复使用,从而使您可以轻松地直接跳入应用程序,而无需在创建将来的应用程序时经历整个功能选择过程。
要使用CLI从先前保存的预设创建新项目,请将目录更改为预设的位置,然后运行以下代码
vue create -p presetname newproject
这将使用指定的预设文件来创建名为newproject的项目名称。
将CLI插件添加到现有项目
要将插件添加到已创建的项目中,只需运行以下命令
vue add @vue/pwa
其中@ vue / pwa
是要添加的插件的名称,在这种情况下为Progressive Web App插件。
需要注意的一件事是,新的CLI现在接受软件包的简写名称,例如@ vue / pwa
是CLI软件包@ vue / cli-plugin-pwa
的简写。
CLI将名称@ vue / value
解析为@ vue / cli-plugin-value
以安装软件包。
Zero-config快速原型
新的CLI使得使用vue serve
和vue build
命令以开发或生产模式仅提供.vue或.js文件变得非常容易。
如果您只想测试自己的想法,而又不想打扰配置,那么这是完美的选择。
要使用此命令,您必须首先安装vue CLI全局服务。
为此,只需在您的终端中运行以下代码。
npm install -g @vue/cli-service-global
安装完成后,您可以使用vue serve
或vue build
。
服务视图
vue serve app.vue
其中app.vue是要提供服务的组件或文件的名称。
serve
命令还提供了一个选项,可以在运行完命令后启动浏览器,而不仅仅是向您显示当前正在向其提供应用程序的网址。
为此,请运行vue serve -o app.vue
Vue build
vue build app.vue
其中app.vue是要提供服务的组件或文件的名称。
vue build
命令将构建可用于生产环境的捆绑软件,它还允许您指定是将其构建为库还是Web组件。
要构建为库,请使用vue build -t lib app.vue
,而要构建为Web组件,请使用vue build -t wc app.vue
。
环境变量
新的CLI现在允许您在项目根目录中使用.env文件来使用环境变量。
该文件由键=值对组成。
每个人至少需要管理2个环境,这意味着我们需要为此环境指定变量。
为了有效地做到这一点,CLI引入了我们所说的模式。
模式只是环境的别称,它指定您是处于开发,生产还是测试模式。
创建仅由特定模式使用的变量。 您必须将模式名称作为后缀添加到.env文件名中。
.env.development
用于开发模式,.env.production
用于生产模式。
注意:要使CLI将变量嵌入客户端捆绑软件代码中,该变量必须以VUE_APP_
名称为前缀。
现在添加变量seckey变为VUE_APP_SECKEY
调整Webpack配置
Vue CLI提供了一种非常简单灵活的方法来调整内部Webpack配置。
为此,您必须在vue.config.js
中使用configureWebpack
选项
// vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } }
以防万一您在项目根目录中没有vue.config.js
文件。 您将必须手动创建它。
您可能想知道:“我如何知道内部Webpack配置中已经存在的内容,所以我知道需要添加什么?”
好了,这是vue inspect
命令变得方便的地方。
此命令将所有内部Webpack配置输出到您的终端。
要将其输出到文件,只需指定这样的文件名
vue inspect > output.js
相关推荐:
更多编程相关知识,请访问:编程入门!!
以上是深入研究Vue CLI3的詳細內容。更多資訊請關注PHP中文網其他相關文章!

Netflix主要使用React作為前端框架,輔以Vue用於特定功能。 1)React的組件化和虛擬DOM提升了Netflix應用的性能和開發效率。 2)Vue在Netflix的內部工具和小型項目中應用,其靈活性和易用性是關鍵。

Vue.js是一種漸進式JavaScript框架,適用於構建複雜的用戶界面。 1)其核心概念包括響應式數據、組件化和虛擬DOM。 2)實際應用中,可以通過構建Todo應用和集成VueRouter來展示其功能。 3)調試時,建議使用VueDevtools和console.log。 4)性能優化可通過v-if/v-show、列表渲染優化和異步加載組件等實現。

Vue.js適合小型到中型項目,而React更適用於大型、複雜應用。 1.Vue.js的響應式系統通過依賴追踪自動更新DOM,易於管理數據變化。 2.React採用單向數據流,數據從父組件流向子組件,提供明確的數據流向和易於調試的結構。

Vue.js適合中小型項目和快速迭代,React適用於大型複雜應用。 1)Vue.js易於上手,適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富,適合有高性能需求和復雜功能需求的項目。

實現 Vue 中 a 標籤跳轉的方法包括:HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數,並在 router 選項中配置路由以進行動態跳轉。

Vue 中實現組件跳轉有以下方法:使用 router-link 和 <router-view> 組件進行超鏈接跳轉,指定 :to 屬性為目標路徑。直接使用 <router-view> 組件顯示當前路由渲染的組件。使用 router.push() 和 router.replace() 方法進行程序化導航,前者保存歷史記錄,後者替換當前路由不留記錄。

Vue 中 div 元素跳轉的方法有兩種:使用 Vue Router,添加 router-link 組件。添加 @click 事件監聽器,調用 this.$router.push() 方法跳轉。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Atom編輯器mac版下載
最受歡迎的的開源編輯器

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。