iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

菜鳥學前端,一起vue起來 !系列 第 5

Day 5. 怎麼開始Vue起來

  • 分享至 

  • xImage
  •  

Vue 的官網提供了三種不同的方式供我們使用,我們可以依照自己需求選擇不同的方式開始我的與vue的旅程!
1. 直接在Html中用引入Vue.js 庫

  • 使用Vue官網提供的vue.js下載包
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400mB17dW9ql9.png

  • 使用CDN方法載入
    CDN
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400UY2lvIGo2T.png

    unpkg
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400Be2No1bUkX.png

    cdnjs
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400S6jXedYwZp.png

2. 使用 npm或yarn 安裝使用

在用 Vue 構建大型應用時推薦使用 NPM 安装。NPM 能很好地和 webpack 或 Browserify 模塊打包器配合使用。

npm
https://ithelp.ithome.com.tw/upload/images/20210916/20131400cuZpeuDRkv.png

yarn
https://ithelp.ithome.com.tw/upload/images/20210916/20131400nj19PTK8rY.png

3. 使用Vue CLI
什麼是CLI?
CLI 全名為 Command-Line Interface,命令行工具,是在圖形使用者介面得到普及之前使用最為廣泛的使用者介面,它通常不支援滑鼠,使用者通過鍵盤輸入指令,電腦接收到指令後,予以執行。也有人稱之為文字使用者介面(character user interface, CUI)。

那Vue CLI呢?
Vue CLI 是一個全局安裝的 npm 包,提供終端機(terminal)有關 vue 的指令,幫助開發者把常用到的資源都打包起來,讓開發者可以快速建立一個即裝即用的專案。
以官網的一句話總結, Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。
在安裝 Vue CLI 之前,必須先安裝 Node.js,接下來就來安裝Vue CLI,在終端機(或 cmd 指令列)輸入:
https://ithelp.ithome.com.tw/upload/images/20210916/20131400a1RCNTcqmI.png

官方建議新手可以從第一種方式(引入)開始使用,在還不熟悉Node.js構件工具時不建議一開始就使用Vue CLI歐!所以我們也先從第一種方式開始吧o(`ω´ )o

參考資料
VUE官網
Vue三種安裝方式
CLI
Vue CLI


上一篇
Day 4.環境預備備(二)- Node.js
下一篇
Day 6.來建立第一個專案吧
系列文
菜鳥學前端,一起vue起來 !30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言