VUE3.0 一.安裝node.js、vue3.0腳手架
1.安裝nodejs
- 首先去官網下載nodejs
![在這裏插入圖片描述]()
- 查看npm和node版本，出現版本號即安裝成功。
npm -v
# 6.13.4
node -v
# cv10.16.0
2.全局安裝vue-cli3.0腳手架
1.全局安裝
如果之前安裝過 卸載之前的 沒有安裝過 直接執行下一步
npm uninstall -g vue-cli
# 卸載之前的
npm install -g @vue/cli
# 或
yarn global add @vue/cli
2.查看版本/是否安裝成功 vue -V
vue -V
3.構建vue項目，選擇指定文件夾，執行
vue create vue-demo
# vue-demo 項目名稱
? Please pick a preset:這裏上下鍵控制選擇默認(default)還是手動(Manually)
- default (babel, eslint) : vue-cli3.0默認使用yarn下載
- Manually select features : 手動
4.選擇默認，執行下一步：
將指令切換到 vue-demo文件中 執行yarn serve 項目構建成功
$ cd vue-demo
$ yarn serve
5.在瀏覽器打開 http://localhost:8080/ 出現：
6.若第三步選擇手動，則出現
- ❯◉ Babel ：將ES6編譯成ES5
- ◯ TypeScript： JS超集
- ◯ Progressive Web App (PWA) Support：漸進式WEB應用
- ◯ Router ：VUE路由
- ◯ Vuex ： VUE狀態管理（倉庫）
- ◯ CSS Pre-processors：css預編譯
- ◉ Linter / Formatter：代碼檢查工具和格式化
- ◯ Unit Testing：單元測試，開發過程中前端對代碼進行自運行測試
- ◯ E2E Testing 端對端測試，屬於黑盒測試，通過編寫實例用例，自動戶模擬用戶操作
- 選擇ESLint的代碼規範
- ❯ ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config
- ESLint + Prettier
- 選擇如何進行代碼檢測
- ❯◉ Lint on save ：保存時進行檢測
- ◯ Lint and fix on commit：fix和commit時進行檢查
- 選擇 Babel, ESLint等配置文件存放位置
- ❯ In dedicated config files ：單獨保存各自的配置文件中
- In package.json ： 保存在package.json文件中
- 是否保存選擇的配置
- 是: 下次構建項目時，可選此配置
- 否： 不保存
選擇完成後進入構建畫面，與第四步相同
