1. 程式人生 > >Vue 安裝及執行

Vue 安裝及執行

環境介紹:
Win10+WebStorm

一,Vue.js簡介
    Vue (讀音 /vjuː/,類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類庫結合使用時,Vue 也完全能夠為複雜的單頁應用提供驅動。
    本文的主要內容是如何在windows10環境下正確安裝Vue.js並執行專案。
二,安裝的node.js

訪問node.js官網https://nodejs.org/en/,下載最新版本node,根據提示安裝。
安裝成功之後,通過執行開啟命令列程式的cmd.exe,輸入命令

node -v

安裝成功之後,通過執行開啟命令列程式的cmd.exe,輸入命令若安裝成功,則會顯示對應版本號。

在下載的node.js的的同時,計算機會安裝npm包管理器,輸入命令

npm -v

若安裝成功,會顯示出npm的版本資訊

三,安裝cnpm

由於使用npm安裝外掛是從國外伺服器上獲取的,國內使用會出現下載速度較慢,下載失敗等問題,因此我們可以使用npm的國內映象–cnpm。
在cmd.exe中輸入命令

npm install cnpm -g --registry = https://registry.npm.taobao.org

等待安裝完成,我們就可以使用cnpm代替npm管理安裝包了。
關於cnpm,若想了解更多,請訪問淘寶團隊官方網址http://npm.taobao.org

四,安裝Vue-cli

在cmd.exe中輸入命令

npm install -g vue-cli

等待完成

五,構建專案

在CMD.EXE中將目錄移動至選定目錄,即專案建立的位置。
在選定目錄下輸入命令

vue init webpack Vuename為專案名稱

在選定目錄下輸入命令之後按照提示輸入專案名稱,描述,作者等資訊。
建立的專案資料夾如圖所示:
目錄結構

六,執行專案
開啟WebStorm(軟體需下載安裝) /file/open 再選擇專案 new window 現在只是打開了專案而已,要執行得配置一下如圖:(在webStorm 軟體檢視右上角有一個 Edit Configurations )
在這裡插入圖片描述


配置
如圖配置就好了,開啟控制檯:
開啟控制檯

將位置移動至專案目錄,輸入命令
npm run dev

等待載入完成,開啟瀏覽器,輸入localhost:8080,若執行成功,則會顯示以下頁面
hello-world