搜尋
首頁web前端Vue.js深入研究Vue CLI3

深入研究Vue CLI3

Oct 05, 2020 pm 04:07 PM
vue clivue.js

深入研究Vue CLI3

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設定)或手動選擇所需的功能。

如果選擇預設預設,則CLI將建立您的專案並安裝必要的插件以使其啟動並運行。

如果您選擇手動選擇功能,CLI會繼續向您顯示所有受支援的插件,並要求您選擇要新增至專案中的插件。

若要選擇,請使用鍵盤上的空白鍵或A鍵選擇所有外掛程式。

完成後,按下Enter鍵繼續。

根據所選的插件的不同,也會顯示其他提示,只需選擇所需的內容,然後按Enter鍵,然後讓CLI完成即可。

新的CLI的一項很酷的功能是,創建的專案還會自動在電腦上為您的專案建立一個新的儲存庫。

外掛程式支援開箱即用

  1. #Typescript 

    @vue/typescript

  2. 漸進式Web應用程式(PWA)

    @vue/pwa

  3. Vue Router

  4. Vuex

  5. CSS預處理器(postcss,css模組,sass,less和stylus)

  6. Linter / Formatters 

    @vue/eslint

  7. 單元測試 

    @ vue / mocha@ vue / jest

  8. #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 servevue build命令以开发或生产模式仅提供.vue或.js文件变得非常容易。

如果您只想测试自己的想法,而又不想打扰配置,那么这是完美的选择。

要使用此命令,您必须首先安装vue CLI全局服务。

为此,只需在您的终端中运行以下代码。

npm install -g @vue/cli-service-global

安装完成后,您可以使用vue servevue 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

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程入门!!

以上是深入研究Vue CLI3的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:logrocket。如有侵權,請聯絡admin@php.cn刪除
反應,vue和Netflix前端的未來反應,vue和Netflix前端的未來Apr 12, 2025 am 12:12 AM

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

前端中的vue.js:現實世界的應用程序和示例前端中的vue.js:現實世界的應用程序和示例Apr 11, 2025 am 12:12 AM

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

vue.js和React:了解關鍵差異vue.js和React:了解關鍵差異Apr 10, 2025 am 09:26 AM

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

vue.js vs.反應:特定於項目的考慮因素vue.js vs.反應:特定於項目的考慮因素Apr 09, 2025 am 12:01 AM

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

vue怎麼a標籤跳轉vue怎麼a標籤跳轉Apr 08, 2025 am 09:24 AM

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

vue怎麼實現組件跳轉vue怎麼實現組件跳轉Apr 08, 2025 am 09:21 AM

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

vue的div怎麼跳轉vue的div怎麼跳轉Apr 08, 2025 am 09:18 AM

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

vue跳轉怎麼傳值vue跳轉怎麼傳值Apr 08, 2025 am 09:15 AM

Vue 中數據傳遞有兩種主要方式:props:單向數據綁定,從父組件傳遞數據給子組件。事件:使用事件和自定義事件在組件之間傳遞數據。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

MantisBT

MantisBT

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SecLists

SecLists

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