【Vue CLI】從安裝到構建項目再到目錄結構的說明

"Vue CLI是一個基於Vue.js進行快速開發的完整系統.

Vue CLI致力於將Vue生態中的工具基礎標準化。它確保了各類構建工具只需給予智能的默認配置即可平穩銜接.

這樣咱們就能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。於此同時，它還爲每一個工具提供了調整配置的靈活性.

Vue CLI的概念：
·
通俗的說，Vue Cli是咱們建立大型項目時的"腳手架".
所謂的腳手架，就是幫助咱們建設好了建造大廈的所需模塊，建設者只需往模塊裏面填入實質的內容，便可完成大廈的建設.
對於程序開發來講，腳手架使程序員只須要關注業務邏輯的實現上面，咱們不須要再關注兼容性問題，不須要再浪費時間在重複的工做上.
·
Vue Cli可以幫助咱們快速的構建大型Web應用，提高了咱們的開發效率.
Vue Cli是基於Webpack構建的，並帶有合理的默認配置.

 

Vue CLI的安裝：
·
這裏咱們將使用npm全局安裝Vue Cli 2版本.
Vue Cli 2和Vue Cli 3的安裝方式略有不一樣，由於Vue Cli 3將包名稱由vue-cli改爲了@vue/cli.
下面是使用npm方式全局和本地安裝Vue Cli 2和Vue Cli 3的命令：
·
全局安裝：
npm install -g vue-cli 版本2
npm install -g @vue/cli 版本3
·
本地安裝：
npm install vue-cli --save 版本2
npm install @vue/cli --save 版本3
·
npm的安裝命令可簡寫爲：npm i xxxx
·
補充：若是是Mac系統，可能須要加上sudo（權限問題，包括本文中後續的全部命令），即：sudo npm install -g vue-cli，回車後輸入當前用戶的密碼便可.

@

目錄

• 1. 構建咱們的項目
• 2. 目錄結構說明
  • 2.1 build目錄
  • 2.2 config目錄
  • 2.3 src目錄
  • 2.4 static目錄

 

---

1. 構建咱們的項目

步驟一：
首先，咱們打開終端，輸入安裝命令：npm i -g vue-cli.
（這裏咱們使用全局安裝方式安裝Vue Cli 2版本）.

步驟二：
而後，咱們進入本身的工做目錄，輸入vue init webpack vue-demo來構建一個名爲vue-demo的項目.
過程當中會提示咱們輸入一些信息，若是出現提示是否須要安裝VueRouter和單元測試等功能，那麼請根據你的項目實際需求輸入Yes/No，這裏咱們將按照下圖進行輸入：

步驟三：
構建完成以後，會在咱們的工做目錄中生成一個名爲vue-demo的文件夾.
咱們進入此文件夾，能夠看到項目結構以下：

此時，咱們打開終端，進入剛剛生成的vue-demo文件夾，輸入啓動命令：npm run dev.
最後，在瀏覽器中訪問：http://localhost:8080/ ，
到這裏，咱們的Vue項目已經構建完成了.
下面咱們來看看項目根目錄下的各目錄和文件的功能.

---

2. 目錄結構說明

2.1 build目錄

build目錄中的文件主要用於webpack配置.

重要的三個文件：

1. webpack.base.conf.js：用於基本webpack配置.
2. webpack.dev.conf.js：用於開發環境webpack配置.
3. web pack.prod.conf.js：用於生產環境webpack配置.

nom run build命令是用來構建生產環境的，而build.js文件就是該命令的入口配置文件，主要用於生產環境.

2.2 config目錄

config目錄中的文件是用來配置項目測試和運行環境的.

在index.js文件中有一個proxyTable屬性，該屬性的屬性值若是加上對應的後臺地址和端口，即可以和後臺進行聯調.

2.3 src目錄

src目錄存放的是咱們的項目源文件，它是整個項目使用頻率最高的文件夾.

assets目錄存放的是公共的資源，會被webpack當成模塊資源處理；
components目錄存放的是咱們整個項目的全部組件；
router目錄存放的是咱們整個項目的路由文件；
App.vue文件是全部vue文件的出口；
main.js文件對應App.vue文件，用於建立vue實例，也是入口文件，對應web pack.base.config.js文件裏的入口配置文件.

2.4 static目錄

該目錄用來存儲項目的靜態文件，它是真正的靜態資源，徹底不被webpack處理.