1.為何需要腳手架：減少花在配置的時間，專注于開發
平常開發需要的：
開發服務器：模擬真實的開發環境，不是file://本地檔案
babel：將es6轉換成es5語法，再轉到服務器上
postcss后處理器 less / sass前處理器 高效
esLint代碼規范 不規范就報代碼規范的錯
前端自動化構建工具，配置babel，postcss，esLint
1.Webpack，需要配置webpack插件
2.Gulp
好文鏈接：為何要使用CLI3
腳手架 負責自動配置 ——“零配置”
Vue CLI2
Vue CLI3
2.安裝腳手架
npm install -g @vue/cli
先安裝node.js就有npm了—— nodejs.org
node.js 版本要求：> 8.9
npm install -g @vue/cli 安裝
vue --version版本號
npm uninstall vue-cli -g 卸載
3.創建自己的專案
在想要創建vue專案的目錄下：vue create + 專案名，
專案名不允許有大寫字母，支持橫桿，如vue-test
然后進入所需要的插件的頁面，可以選擇默認的bable和esLint，或者自定義，用空格選擇或取消
回車進入下一頁面
選擇使用哪種ESLint代碼規范？
ESLint with error prevention only 只是錯誤 ——本人選擇此項
ESLint + Airbnb config airbnb代碼規范
ESLint + Standard config 標準代碼規范
ESLint + Prettier
pick additional lint features：選擇lint特性？
lint on save ——默認
lint and fix on commit
babel，postcss，eslint等等的配置是分開單獨保存還是都保存在package.json里？：
in dedicated config files ——默認分開保存
in package.json
保存剛才的設定供之后使用嗎？y/N
等待安裝
打開專案并運行：
cd + 你執行的目錄：cd vue-test
運行腳本：npm run serve
給出兩個可訪問鏈接
復制到瀏覽器并打開
如：local: http://localhost:8080/
可以看到專案創建成功了
回到專案代碼，看到里面有一個package.json檔案：
里面的：
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
}
中的"serve"欄位就是我們剛剛運行的腳本"npm run serve“中的"serve”
“scripts"中的build欄位是用于專案打包（生產環境），命令：”npm run build"，
lint欄位 用于檢查和修復源檔案
其他欄位說明：
“dependencies”：運行依賴
“devDependencies”：開發依賴
修改配置，可以新建一個vue.config.js檔案，將配置的修改寫在里面
或者使用可視化工具，命令列輸入：vue ui（最好進入了專案目錄再輸入此命令，或者在ui界面手動輸入目錄，目錄跳轉比較快）
自動打開一個鏈接，埠8000
匯入創建的專案，在里面修改配置
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282726.html
標籤：其他
下一篇：藍牙除錯器上位機