本文目錄：
- 1.什么是腳手架工具
- 什么是Vue-cli
- 3.安裝工具
- 4.基于3.x創(chuàng)建vue項目
- 5.項目的自定義配置
1.什么是腳手架工具
從百度百科摘抄過來的一段話： 腳手架是為了保證各施工過程順利進(jìn)行而搭設(shè)的工作平臺。如果明白了腳手架在現(xiàn)實生活中的作用溯警，那么蜜徽，再來理解編程中的腳手架就容易了珍促，有時我們聽說前端腳手架工具集惋，其實，這里的腳手架和現(xiàn)實中的腳手架類似，用人話講就是一種工具鱼填，工地上的腳手架幫助工人施工，前端中的腳手架幫助編程人員完成各種工作毅戈，例如：代碼編譯苹丸、打包、壓縮等苇经，各種工具組合成一套編碼環(huán)境赘理，這種自己一步一步搭建環(huán)境的重復(fù)性勞動可以交給給腳手架工具來完成，你只需要在這種腳手架工具上完成自己的業(yè)務(wù)代碼就行扇单，下面我們會介紹到等vue-cli就是集成了vue的一種腳手架工具商模，同理，react、angular等都有相應(yīng)的腳手架工具施流，例如：create-react-app凉倚、angular-cli等
2. 什么是Vue-cli
在沒有vue-cli之前，搭建一個開發(fā)環(huán)境你可能需要花幾天的時間嫂沉，如果你并不熟悉webpack的話稽寒，你還得再去把webpack的各種配置學(xué)習(xí)一遍，這樣幾天時間很快就過去了趟章，而你還沒有真正動手開始寫自己的應(yīng)用邏輯杏糙，為了讓開發(fā)者從配置中解放出來，vue官方提供了一套vue-cli腳手架蚓土，它不僅確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接宏侍，還提供了配置調(diào)整的靈活性。有了vue-cli之后蜀漆，你就可以專注于自己項目的業(yè)務(wù)邏輯的編寫了谅河。
從官方網(wǎng)站這樣介紹：
Vue CLI 是一個基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，提供：
通過 @vue/cli 搭建交互式的項目腳手架确丢。
通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)绷耍。
一個運(yùn)行時依賴 (@vue/cli-service)，該依賴：
- 可升級鲜侥；
- 基于 webpack 構(gòu)建褂始，并帶有合理的默認(rèn)配置；
- 可以通過項目內(nèi)的配置文件進(jìn)行配置描函；
- 可以通過插件進(jìn)行擴(kuò)展崎苗。
一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具舀寓。
一套完全圖形化的創(chuàng)建和管理 Vue.js 項目的用戶界面胆数。
3.安裝工具
如果從來沒有使用過vue-cli，首先需要安裝一下
npm install -g vue-cli
查看當(dāng)前vue-cli的版本
vue --version或者vue --V
注意：上面所有的通過npm install -g vue-cli安裝vue-cli的方式互墓，安裝的版本最高只能是2.9.6必尼，3以后的版本已不支持通過上面的這種方式進(jìn)行安裝了，升級方法：
1.首先需要卸載老版本
npm uninstall vue-cli -g
經(jīng)過實際操作驗證轰豆，僅僅是上面這種卸載還不行胰伍，必須要去安裝目錄中把安裝文件全部手動刪除才行齿诞，也可以在下面的安裝指令的后面加上--force來強(qiáng)制清除老版本酸休，安裝新版本
npm install @vue/cli -g --force
接下來再通過vue --V查看，就會是最新的版本了祷杈。
4.基于3.x創(chuàng)建vue項目
需求：創(chuàng)建一個項目（myProject）
通過vue-cli創(chuàng)建項目通常有以下三種方式：
1.基于交互式命令行的方式斑司，創(chuàng)建新版的vue項目
vue create my-project
2.基于圖形化界面的方式，創(chuàng)建新版的vue項目
vue ui
3.基于2.x版本的舊模板，創(chuàng)建舊版的vue項目
npm install -g @vue/cli-init
vue init webpack myProject
通常情況下我會選用第一種方式
輸入指令后宿刮，會出現(xiàn)一個交互式回答界面
接下來命令行工具會有一些選項需要我們進(jìn)行選擇互站，按需選擇即可。
接下來可以在項目根目錄下運(yùn)行
npm run serve
這時候就可以在本地訪問項目了
2.x版本項目文件介紹
項目下的文件夾：
build 存放webpack相關(guān)的配置文件
config 存放生產(chǎn)環(huán)境和開發(fā)環(huán)境的相關(guān)配置文件
node_modules 存放第三方依賴包
src 做項目的時候?qū)懙脑创a
static 放置一些第三方的資源僵缺，這個文件夾下的.gitkeep的作用是讓git能提交空文件夾胡桃，如果沒有這個文件，空文件夾是沒辦法提交的
項目下的文件：
.babelrc 這個是babel的配置文件
.editorconfig 編輯器配置文件
.eslintignore 設(shè)置代碼檢查的時候忽略的文件
.eslintrc eslint的配置文件
.gitignore 在使用git提交項目的時候磕潮，忽略一些文件
3.x版本項目文件介紹
node_modules 存放第三方依賴包
public 放置一些第三方的資源翠胰，相當(dāng)于2.x版本的static文件夾
src 做項目的時候?qū)懙脑创a
5.項目的自定義配置
1.通過package.json配置項目
注意：json文件的代碼必須要符合規(guī)范的json語法并且不能有注釋
"vue":{
"devServer":{
"port":"8888",
"open":true
}
}
不推薦使用這種配置方式。因為package.json主要是用來管理包的配置信息自脯，為了方便維護(hù)之景，推薦將vue腳手架相關(guān)的配置，單獨(dú)定義到vue.config.js配置文件中膏潮。
2.通過單獨(dú)的配置文件配置項目
①在項目的根目錄創(chuàng)建文件vue.config.js
②在該文件中進(jìn)行相關(guān)的配置锻狗，從而覆蓋默認(rèn)配置
module.exports = {
devServer:{
port:8888,
open:true
}
}
接下來，我們就可以快樂的進(jìn)行項目開發(fā)了焕参。
vue工程化（cli）項目中如何進(jìn)行webpack配置轻纪？
vue inspect > output.js 可以檢查vue cli工程項目中webpack配置，不能修改
修改的話叠纷，要通過工程目錄下的vue.config.js
