iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ系列 第 1

Day01 - Vue3 環境設置 Vue CLI 幫我準備手術室卡關筆記

這次主要跟著三位大神學習 Vue3
重新認識 Vue.js | Kuro Hsu
Vue3.0学习教程与实战案例
竹白記事本 Vue3 學習資源

大神說學過 Vue2 的朋友可以從過往專案改寫練習 Vue3
今天第一天上工就先歡樂的跟著 重新認識 Vue.js | Kuro Hsu 的 3-1 Vue CLI 介紹 一文來建立環境

我使用 Mac 開發環境
在 Terminal 確認 Node version

node -v

參考文章 Node.js 與 npm 更新的方式
更新 Node.js 到目前 stable 版本

sudo npm install -g n
n stable
node -v

確認 Vue 版本,最後那個 V 是大寫的

vue -V

更新 Vue 版本

sudo npm install -g @vue/cli
vue -V

在 Please pick a preset 選擇了 Manually select features 後,出現
Check the features need for your project?
這提的選項由好多半生不熟的套件名稱組成,參考 手把手教大家搭建一个vue-cli3 的项目 文中對個套件的簡單說明(之後還是要各自查查這些套件的功能阿

  • Babel
    babel 會幫我們把我們寫的 JS 解析成瀏覽器看得懂的代碼,讓寫 JavaScripts 的我們可以快樂的使用 ES6 語法
    參考資料: 深入現代前端開發 - Babel 簡介
  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

後面一路按 y
再跑 npm
https://ithelp.ithome.com.tw/upload/images/20210915/20140513ZRJC4leadV.png

以上是今日卡關筆記,如果有內容不正確的地方,希望大大能提點一波,感謝感謝!
感謝能跟大家一起努力(っಠ‿ಠ)っ


下一篇
Day02 - 單一元件檔你好 Single Component File 初見面
系列文
Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言