第一篇:VUE的構建
阿新 • • 發佈:2018-11-14
最近的前端VUE以及React可以說是大火了,基本上每個群的討論都離不這兩個話題,本身自己是做後臺出身的,對前端的追求大概就在能看的水平線了,這次也跟一次風一起看看VUE這個東西到底是什麼吧。
構建
Vue官網
Vue中文社群
工欲善其事必先利其器,這兩個網站就是我們的學習手冊了。
關於Vue的構建方式的話分為兩種,一種是直接在頁面上通過js
的引用比如下面這種
<!-- 開發環境版本,包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本,優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
上面兩種引用任選一個即可
以及使用vue-cli
腳手架的方式構建,關於這個的教程比較多,在這裡我就不詳述了,簡單的羅列一下步驟。
- 由於
vue
是依賴於node.js
所以先去把node.js
安裝好 - 在
nodejs
的官網上下載好安裝包一路next
即可,注意現在npm
是直接包含在內的,如果看到之前的教程還需要去裝npm
的話,省略這步即可 - 如果沒有梯子的話可能會發現下載的時候特別慢,建議大家先換到國內映象https://npm.taobao.org
使用如下命令npm install -g cnpm --registry=https://registry.npm.taobao.org
- 接下來安裝
vue-cli
腳手架cnpm install -g vue-cli
- 安裝完畢後可以開始構建我們的專案了比如我們現在進入到F盤
vue init webpack 專案名
接下來的話會出現一些元件的安裝
image.png
不出意外的話,我們的專案已經構建完畢了。 - 執行
npm vue dev
執行我們的專案,訪問http://localhost:8080則會出現以下介面
image.png
能看到如上介面就代表我們的vue專案已經構建完畢啦