Vue/cli 構建專案
Vue/cli 構建專案
堅持寫作vue系列讓我自己收穫很多，對之前很多理解不透徹的地方又多了一些理解，也試圖將自己的理解變成文字分享給更多的人，無奈文字功底有限，有些地方可能表達的不是很清楚，還望各位讀者多多包含，同時希望大家能給予指摘改正。
掘金系列地址：https://juejin.cn/user/2963939080275613/posts
前14篇基本上寫完了vue2.6版基礎的所有內容，下來的幾篇將進入vue的生態周邊，vue-router以及vuex，當然下來的章節我們將不會單純的用html頁面來構建專案，而是通過@vue-cli以更切近真實專案的方式來構建dome，一窺vue元件化開發的全貌，接下來所有的dome都將以工程化的方式演示！
@vue/cli
有的人可能會好奇為什麼vue-cli前邊會有個@符號，其實3.x版本之前的版本都叫vue-cli，只是在3.x版本之後可能作者為了區別之前的版本變更名為@vue-cli！
老規矩，我們還是先來了解下@vue-cli是幹什麼的？
Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基於智慧的預設配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject。
那麼我們只要知道我們可以通過 @vue/cli 快速搭建出一個完整的互動式專案就可以了！更多描述參考官方解釋！
安裝vue/cli
安裝nodejs & npm
安裝@vue/cli需要先安裝nodejs和npm，Windows系統安裝非常簡單，去nodejs官網下載安裝包即可！
Windows系統安裝nodejs的時候npm也會自動安裝！
ubuntu系統安裝nodejs
執行檢查可更新的軟體：
sudo apt-get update
先用普通的apt工具安裝低版本的node，然後再升級最新。
sudo apt-get install nodejs
sudo apt install npm
更換淘寶的映象，這個是必須的，用過的node的人都知道。
sudo npm config set registry https://registry.npm.taobao.org
安裝更新版本的工具N，執行：
sudo npm install n -g
更新新node版本，執行：
sudo n stable
Ubuntu 解除安裝 Node.Js
sudo apt-get remove nodejs
其他系統大家自行解決！
安裝@vue/cli
安裝命令：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
檢查版本：
vue --version
升級：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
完成以上步驟之後就可以開始建立專案了！
vue/cli建立專案
在本地資料夾中開啟終端建立專案！終端執行如下命令：
vue create vueapp
vueapp為你專案的名稱。
終端看到這個，按上下箭頭鍵，空格鍵選中，回車確定，我們這裡選最後一個，自定義安裝！
按鍵盤上下箭頭鍵上下切換，空格鍵選中自己要安裝的項，全部選完之後回車即可
- Router (vue的路由外掛)
- Vuex (vue的狀態管理外掛)
- css Pre-processors (css預處理外掛)
- Linter (程式碼檢測外掛)
- Unit Testing (單點測試模組)
我這裡還是以vue2.x為基礎建立，vue3.x只是vue2.x的升級版，2.x整明白透徹以後，對比著學習會更快！
這裡問我們路由是不是採用 history 模式，我們輸入Y即可，選擇這個模式之後我們的路由中就不會出現#，顯得很好看！
選擇CSS前處理器，這裡我們選擇自己熟悉的一種，我這裡選擇Less，因為其他的我也不熟悉！
程式碼檢測我們選擇ESLint + Prettier模式!
檢測程式碼的時機選擇配置：
- Lint on save 儲存的時候檢測程式碼
- Lint and fix on commit 提交程式碼的時候檢測
這裡我們全部選中，都需要檢測！
測試執行器選擇Jest!
所有的配置檔案是儲存在一個package.json檔案中還是儲存為單獨檔案，我們選擇第一個，所有的配置檔案都儲存為對應的單獨檔案！
是不是把我們之前所有的這些步驟起個名字儲存起來，以便下次直接選用，就不用再一個一個選擇配置，這裡我們輸入Y，起個名字儲存起來即可！
等待安裝完成，專案即可安裝成功！
感謝您的閱讀，如果對您有幫助，歡迎關注"CRMEB"。碼雲上有我們開源的商城專案，知識付費專案，JAVA版全開源商城系統，學習研究歡迎使用，老鐵順手點個star唄，老闆獎勵五毛，分你兩毛五，