本篇內(nèi)容主要講解“vue cli怎么配置和使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue cli怎么配置和使用”吧!

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站制作與策劃設(shè)計,大興安嶺網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:大興安嶺等地區(qū)。大興安嶺做網(wǎng)站價格咨詢:13518219792

一、Vue CLI

1.1.什么是Vue CLI

• 如果你只是簡單寫幾個Vue的Demo程序, 那么你不需要Vue CLI。

• 如果你在開發(fā)大型項目, 那么你需要, 并且必然需要使用Vue CLI

• 使用Vue.js開發(fā)大型應(yīng)用時，我們需要考慮代碼目錄結(jié)構(gòu)、項目結(jié)構(gòu)和部署、熱加載、代碼單元測試等事情。

• 如果每個項目都要手動完成這些工作，那無以效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

CLI是什么意思?

• CLI是Command-Line Interface, 翻譯為命令行界面, 但是俗稱腳手架.

• Vue CLI是一個官方發(fā)布 vue.js 項目腳手架

• 使用 vue-cli 可以快速搭建Vue開發(fā)環(huán)境以及對應(yīng)的webpack配置.

1.2.Vue CLI使用前提 - Node

安裝NodeJS
可以直接在官方網(wǎng)站中下載安裝.

檢測安裝的版本
默認(rèn)情況下自動安裝Node和NPM
Node環(huán)境要求8.9以上或者更高版本

什么是NPM呢?

NPM的全稱是Node Package Manager
是一個NodeJS包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)。
后續(xù)我們會經(jīng)常使用NPM來安裝一些開發(fā)過程中依賴包.

cnpm安裝
由于國內(nèi)直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。
你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm:npm install -g cnpm --registry=https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模塊了：
cnpm install [name]

1.3.Vue CLI使用前提 - Webpack

Vue.js官方腳手架工具就使用了webpack模板
對所有的資源會壓縮等優(yōu)化操作
它在開發(fā)過程中提供了一套完整的功能，能夠使得我們開發(fā)過程中變得高效。

Webpack的全局安裝

npm install webpack -g

1.4.Vue CLI的使用

安裝Vue腳手架

npm install -g @vue/cli

注意：上面安裝的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化項目時不可以的。

Vue CLI2初始化項目

vue init webpack my-project

Vue CLI3初始化項目

vue create my-project

二、Vue CLI2

2.1.Vue CLI2詳解

2.2.目錄結(jié)構(gòu)詳解

2.3.Runtime-Compiler和Runtime-only的區(qū)別

簡單總結(jié)

1.如果在之后的開發(fā)中，你依然使用template，就需要選擇Runtime-Compiler
2.如果你之后的開發(fā)中，使用的是.vue文件夾開發(fā)，那么可以選擇Runtime-only

2.4.render和template

Runtime-Compiler 和 Runtime-only

為什么存在這樣的差異呢？
我們需要先理解Vue應(yīng)用程序是如何運行起來的。
Vue中的模板如何最終渲染成真實DOM。
我們來看下面的一幅圖

2.5.Vue程序運行過程

2.6.render函數(shù)的使用

2.7.npm run build

2.8.npm run dev

2.9.修改配置：webpack.base.conf.js起別名

三、Vue CLI3

3.1.認(rèn)識Vue CLI3

vue-cli 3 與 2 版本有很大區(qū)別

1.vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3
2.vue-cli 3 的設(shè)計原則是“0配置”，移除的配置文件根目錄下的，build和config等目錄
3.vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化
4.移除了static文件夾，新增了public文件夾，并且index.html移動到public中

3.2.目錄結(jié)構(gòu)詳解

3.3.配置去哪里了？

UI方面的配置

啟動配置服務(wù)器：vue ui

3.4.自定義配置：起別名

到此，相信大家對“vue cli怎么配置和使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！