Hey Guys~我是AC
這篇文章要教大家如何建立Vue.Js的環境
首先我們先進入Vue.js的安裝頁面:
在開始之前呢,要先跟大家說明Vue.js共有兩種版本,
一種為開發版(Development Version),
一種為生產版(Production Version),
差異在於開發版會顯示編譯錯誤的內容,
而思路清晰的同學馬上就會發現Javascript不是一種直譯式語言嗎?
為什麼還需要編譯呢?
這就是Vue.js相當矯情的地方呢XD
如何編譯(正確來說是預編譯)及查看錯誤訊息,
在後面的文章有更詳盡的教學敬請期待囉^_^
而今天我們主要使用生產版就可以囉!
(因為不需要用到編譯的部分)
———–我是分隔線———–
接下來要來教大家如何安裝,
第一種方式
我們將以下程式碼嵌入HTML內
第二種方式(使用Webpack)
#注意:新手請勿使用此方式,因為你根本不知道npm是什麼對吧!
#建議:有建置模組化網頁需求者使用(進階)
於終端機輸入以下指令至所需要建置環境的資料夾
#注意:新手請勿使用此方式,因為你根本不知道npm是什麼對吧!XD
#注意:電腦需要有Node.js環境與NPM
#建議:有建置模組化網頁需求者使用(進階)
於終端機輸入以下指令至所需要建置環境的資料夾
//更新npm
$ npm install vue
//安裝Vue環境
$ npm install -g vue-cli
//全域安裝Vue
$ vue init webpack AC’s vue website
//快速建立專案「AC’s vue website」
接下來會顯示一些基本的專案設定,依序完成即可~
———–我是分隔線———–
很高興我們已經建置完環境(其實超簡單)
未來將使用第一種安裝方式來完成之後的教學
而第二種安裝方式也會在之後向大家詳細介紹
敬請期待吧:D