配置Vue CLI原理詳解

老手直接跳過這段話，新手可以看看,我大一接觸的時候也是很懵

想必能看到這篇文章，大家已經或多或少學習了vue,但你可能不太清楚node,webpack，npm,淘寶鏡像,CLI,

我在這里給大家簡單的梳理一下：

如果你只是簡單的寫幾個vue的Demo程式的話，那么你是不需要Vue CLI的，我們之前在簡單的寫vue的一些實體的時候，通常都是按照官方檔案的模式進行引入vue，但在實際的公司專案中，不可能采用這么簡單笨拙的的方式，我們會通過webpack
我們如果真的想要使用純html,css,js三件套來寫專案，你可以想象有多少JS檔案，互相參考，就算自己可以分清，后期維護呢，同樣也不利于別人學習你的代碼，這里就要接觸模塊化開發webpack

webpack是一個現代的JavaScript應用的靜態模塊打包工具

而webpack為了可以正常運行，必須依賴node環境，node環境為了可以正常執行很多代碼，必須其中包含各種依賴的包，而這種包可以用npm工具進行管理和使用（node package manager）所以俗稱webpack為打包工具
我們通常是使用webpack配置專案，webpack-loader引入各種檔案，或者搭建本地服務器，各種各種，如果我們公司每次寫一個專案都要進行各種冗雜的配置，效率簡直是太低，尤其是自己配置的代碼不夠規范，版本容易出錯以及各種問題，這是非常不可取的，這就由許多大公司創建了CLI,他們利用webpack等進行了絕大多數的配置供與其他人直接來使用

CLI 服務是構建于 webpack 和 webpack-dev-server 之上的，它包含了：

加載其它 CLI 插件的核心服務；
一個針對絕大部分應用優化過的內部的 webpack 配置；
專案內部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令，

我們使用CLI的簡單操作就可以省去以前幾十倍的配置時間

進入正題

Node.js

前提是需要安裝node.js

node.js安裝推薦文章：

node.js的安裝

如果我們事先安裝好了，不妨檢查一下node版本,這里建議node版本最好高一點
在這里插入圖片描述

檢查npm版本

在這里插入圖片描述

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OwPdUAKE-1607909110389)(D:/桌面/assets/1607764723816.png)]

、
、
、

webpack

同樣webpack也是使用cli的前提

At its core , webpack is a static module bundler for modern JavaScript applications

從本質來講，webpack是一個現代的JavaScript應用的靜態模塊打包工具

webpack全域安裝：

cnpm install webpack -g
cnpm是國內淘寶鏡像，沒有的話使用npm就好了

cnpm install webapck@5.10.0 -g(我安裝的指定版本)

然后我們檢查一下自己電腦的版本

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lpTMopZo-1607909110391)(D:/桌面/assets/1607764549219.png)]

、
、
、

CLI

準備作業已經完成，我們現在來全域安裝cli:

現在使用腳手架2的已經很少了，我們直接安裝3以上版本

cnpm install -g @vue/cli

下面這個命令可以讓我們在cli3的基礎上使用cli2

cnpm install @vue/cli -init -g

檢查版本

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QBZj5O5L-1607909110396)(D:/桌面/assets/1607764562438.png)]

·
·
·
·

安裝完成之后，我們初始化專案

Vue CLI2初始化專案

vue init webpack project01

這里我就不詳細講了直接放圖

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7x4NfWnQ-1607909110397)(assets/1607768464960.png)]

·
·
·

Vue CLI3初始化專案

vue create project01

①：

Defult是默認，我們選擇第三個手動配置

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6qS2rF1L-1607909110399)(assets/1607908090429.png)]

②：

空格進行選擇和取消我們所需的配置,需要什么就選什么就好了，剛接觸的話默認的就好

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8mzSBqOc-1607909110399)(assets/1607908182800.png)]

③：

我們選擇 vue3

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2VLlmLBz-1607909110400)(assets/1607908241607.png)]

④：

他問我們是否需要將ESLint等配置單獨放在一個json檔案，而不是package.json中

我們選擇第一個配置到單獨檔案中

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dNRQORoA-1607909110401)(assets/1607908281140.png)]

⑤：

還記得我上面自己的配置嗎，這里就是這個意思，我們可以自己手動配置然后保存起來

我們選擇No

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-98PBhVLZ-1607909110402)(assets/1607908382380.png)]

⑥：

cd project02

cnpm run serve

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LRJUuho5-1607909110403)(assets/1607908523012.png)]

打開默認埠8080的網頁

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wPfI6d3T-1607909110404)(assets/1607908555969.png)]

大功告成

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-49aDw323-1607909110405)(assets/1607908583257.png)]

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/234910.html

標籤：其他

上一篇：PHP實作簡單注冊登錄詳細全部代碼

下一篇：前端如何設定背景顏色的透明度 css中的 rgba() 函式詳解：background-color: rgba(255,192,203,0.3)

Vue CLI配置原理詳解

配置Vue CLI原理詳解

進入正題

Node.js

webpack

CLI