VueCLI3-創(chuàng)新互聯(lián)

小編給大家分享一下Vue CLI3，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

10多年的南溪網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整南溪建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“南溪網(wǎng)站設(shè)計”,“南溪網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

Vue CLI是一個簡單而強(qiáng)大的工具，用于搭建Vue.js項(xiàng)目。它可以確保各種構(gòu)建工具與合理的默認(rèn)設(shè)置一起順利運(yùn)行，因此您可以專注于編寫應(yīng)用程序，而不必花時間在配置上進(jìn)行斗爭。

Vue CLI 3是目前為止Vue生態(tài)系統(tǒng)中發(fā)生的好事情，原因如下：

1、基于插件的架構(gòu)

新的CLI實(shí)現(xiàn)了我們所謂的基于插件的體系結(jié)構(gòu)，這是對以前使用基于模板的體系結(jié)構(gòu)的版本的重大改進(jìn)。

這意味著，現(xiàn)在只有一個模板，您需要的所有其他功能都將作為插件添加。

2、靈活性

新的CLI使超級容易地開始一個新項(xiàng)目，而不必考慮將來可能需要的所有功能。

您可以創(chuàng)建項(xiàng)目，直接進(jìn)行編碼，然后在需要功能時，只需添加即可！

3、Zero-config快速原型

這樣，您就可以像處理html文件一樣來提供vue應(yīng)用或組件。

4、Vuex

新的CLI允許您將vuex添加到項(xiàng)目中，就像在以前版本中添加vue路由器一樣。

5、Typescript

現(xiàn)在正式的cli支持引導(dǎo)typescript vue.js應(yīng)用程序

6、自定義插件

如果還不夠完善的CLI官方插件，則可以創(chuàng)建您自己的自定義插件（當(dāng)然，還可以發(fā)布您的插件，以便其他人可以使用它們）。

安裝Vue CLI 3

要安裝CLI，請運(yùn)行以下代碼。

npm install -g @vue/cli

這將安裝新版本的Vue CLI。 完成后，您可以通過運(yùn)行以下命令確認(rèn)已安裝的版本：

vue -V

更改CLI命令

與以前的版本相比，CLI命令略有變化，并且新命令已添加到好東西包中。

  • vue create myproject創(chuàng)建一個名為myproject的新項(xiàng)目。

  • vue serve <文件名>以零配置在開發(fā)模式下提供.js或.vue文件。

  • vue build <文件名>使用零配置從.js或.vue文件構(gòu)建生產(chǎn)就緒的捆綁包。

  • vue invoke <pluginname>調(diào)用已安裝的插件生成器以創(chuàng)建插件正常工作所需的文件。

  • vue inspect會顯示應(yīng)用程序的webpack配置，因?yàn)樗驯煌耆橄蟆?/p>

  • Vue init是為仍希望使用舊版本2的用戶保留的，但要使用此命令，您必須安裝一個全局網(wǎng)橋

為此，請?jiān)诮K端中運(yùn)行以下代碼。

npm install -g @vue/cli-init

安裝完成后。 現(xiàn)在，您隨時可以在版本3中直接開始使用版本2。

vue init webpack newapp

創(chuàng)建一個新項(xiàng)目

要創(chuàng)建一個新項(xiàng)目，請?jiān)谀慕K端中運(yùn)行以下代碼

vue create projectname

其中projectname是要創(chuàng)建的應(yīng)用程序的名稱。

系統(tǒng)將提示您選擇一個預(yù)設(shè)，默認(rèn)預(yù)設(shè)（包含babel＆eslint配置）或手動選擇所需的功能。

如果選擇默認(rèn)預(yù)設(shè)，則CLI將創(chuàng)建您的項(xiàng)目并安裝必要的插件以使其啟動并運(yùn)行。

如果您選擇手動選擇功能，則CLI會繼續(xù)向您顯示所有受支持的插件，并要求您選擇要添加到項(xiàng)目中的插件。

若要選擇，請使用鍵盤上的空格鍵或A鍵選擇所有插件。

完成后，按Enter鍵繼續(xù)。

根據(jù)選擇的插件的不同，還會顯示其他提示，只需選擇所需的內(nèi)容，然后按Enter鍵，然后讓CLI完成即可。

新的CLI的一項(xiàng)很酷的功能是，創(chuàng)建的項(xiàng)目還會自動在計算機(jī)上為您的項(xiàng)目創(chuàng)建一個新的存儲庫。

插件支持開箱即用

  1. Typescript@vue/typescript

  2. 漸進(jìn)式Web應(yīng)用程序（PWA）@vue/pwa

  3. Vue Router

  4. Vuex

  5. CSS預(yù)處理器（postcss，css模塊，sass，less和stylus）

  6. Linter / Formatters@vue/eslint

  7. 單元測試@ vue / mocha或@ vue / jest

  8. E2E測試@ vue / cypress或@ vue / nightwatch

預(yù)設(shè)值

在使用CLI創(chuàng)建新項(xiàng)目并手動選擇功能時，會創(chuàng)建一個預(yù)設(shè)。

CLI使用此創(chuàng)建的預(yù)設(shè)來創(chuàng)建項(xiàng)目文件。

它使用JSON編寫，包含創(chuàng)建新應(yīng)用時選擇的所有功能。

預(yù)設(shè)可以重復(fù)使用，從而使您可以輕松地直接跳入應(yīng)用程序，而無需在創(chuàng)建將來的應(yīng)用程序時經(jīng)歷整個功能選擇過程。

要使用CLI從先前保存的預(yù)設(shè)創(chuàng)建新項(xiàng)目，請將目錄更改為預(yù)設(shè)的位置，然后運(yùn)行以下代碼

vue create -p presetname newproject

這將使用指定的預(yù)設(shè)文件來創(chuàng)建名為newproject的項(xiàng)目名稱。

將CLI插件添加到現(xiàn)有項(xiàng)目

要將插件添加到已創(chuàng)建的項(xiàng)目中，只需運(yùn)行以下命令

vue add @vue/pwa

其中@ vue / pwa是要添加的插件的名稱，在這種情況下為Progressive Web App插件。

需要注意的一件事是，新的CLI現(xiàn)在接受軟件包的簡寫名稱，例如@ vue / pwa是CLI軟件包@ vue / cli-plugin-pwa的簡寫。

CLI將名稱@ vue / value解析為@ vue / cli-plugin-value以安裝軟件包。

Zero-config快速原型

新的CLI使得使用vue serve和vue build命令以開發(fā)或生產(chǎn)模式僅提供.vue或.js文件變得非常容易。

如果您只想測試自己的想法，而又不想打擾配置，那么這是完美的選擇。

要使用此命令，您必須首先安裝vue CLI全局服務(wù)。

為此，只需在您的終端中運(yùn)行以下代碼。

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

安裝完成后，您可以使用vue serve或vue build。

服務(wù)視圖

vue serve app.vue

其中app.vue是要提供服務(wù)的組件或文件的名稱。

serve命令還提供了一個選項(xiàng)，可以在運(yùn)行完命令后啟動瀏覽器，而不僅僅是向您顯示當(dāng)前正在向其提供應(yīng)用程序的網(wǎng)址。

為此，請運(yùn)行vue serve -o app.vue

Vue build

vue build app.vue

其中app.vue是要提供服務(wù)的組件或文件的名稱。

vue build命令將構(gòu)建可用于生產(chǎn)環(huán)境的捆綁軟件，它還允許您指定是將其構(gòu)建為庫還是Web組件。

要構(gòu)建為庫，請使用vue build -t lib app.vue，而要構(gòu)建為Web組件，請使用vue build -t wc app.vue。

環(huán)境變量

新的CLI現(xiàn)在允許您在項(xiàng)目根目錄中使用.env文件來使用環(huán)境變量。

該文件由鍵=值對組成。

每個人至少需要管理2個環(huán)境，這意味著我們需要為此環(huán)境指定變量。

為了有效地做到這一點(diǎn)，CLI引入了我們所說的模式。

模式只是環(huán)境的別稱，它指定您是處于開發(fā)，生產(chǎn)還是測試模式。

創(chuàng)建僅由特定模式使用的變量。 您必須將模式名稱作為后綴添加到.env文件名中。

.env.development用于開發(fā)模式，.env.production用于生產(chǎn)模式。

注意：要使CLI將變量嵌入客戶端捆綁軟件代碼中，該變量必須以VUE_APP_名稱為前綴。

現(xiàn)在添加變量seckey變?yōu)?code>VUE_APP_SECKEY

調(diào)整Webpack配置

Vue CLI提供了一種非常簡單靈活的方法來調(diào)整內(nèi)部Webpack配置。

為此，您必須在vue.config.js中使用configureWebpack選項(xiàng)

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

以防萬一您在項(xiàng)目根目錄中沒有vue.config.js文件。 您將必須手動創(chuàng)建它。

您可能想知道：“我如何知道內(nèi)部Webpack配置中已經(jīng)存在的內(nèi)容，所以我知道需要添加什么？”

好了，這是vue inspect命令變得方便的地方。

此命令將所有內(nèi)部Webpack配置輸出到您的終端。

要將其輸出到文件，只需指定這樣的文件名

vue inspect > outpu

看完了這篇文章，相信你對“Vue CLI3”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：VueCLI3-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://muchs.cn/article10/dsgcgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、用戶體驗(yàn)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)