1. 程式人生 > >windows7 搭建Vue 開發環境

windows7 搭建Vue 開發環境

第一步:node.js 安裝

vue的安裝依賴於node.js,要確保你的計算機上已安裝過node.js。可進入cmd編輯器,輸入命令 node -v進行檢視。node儘量要用新一些的版本,否則後續安裝會提示node版本過低。去node官網下個新版的node重新安裝就可以。如已成功安裝node會出現如下:


第二步:淘寶cnpm 安裝

 npm install -g cnpm --registry=https://registry.npm.taobao.org
node的安裝在此就不再說明了。確定node安裝後,就可以開始vue的安裝了。這裡提一下淘寶映象,用淘寶映象的cnpm來代替npm的安裝,速度會快很多。淘寶映象推薦網址:
https://npm.taobao.org/。成功後同樣可檢視版本:


第三步:安裝Vue 框架

cnpm install -g vue-cli

如果使用淘寶映象安裝就輸入命令列    $  cnpm install -g vue-cli進行安裝,如果沒有安裝淘寶映象依舊用$ npm install -g vue-cli安裝:


到此vue已經安裝成功了。

建一個vue專案

這裡我們使用vue官網的命令列工具。Vue.js 提供一個官方命令列工具,可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需一分鐘即可啟動帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案:

# 全域性安裝淘寶cnpm 映象
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 判斷cnpm 是否安裝成功
cnpm -h
# 全域性安裝vue-cli
cnpm install -g vue-cli
# 判斷vue-cli 是否安裝成功
cnpm list
#建立一個基於webpack模板的新專案
vue init webpack d:\nodeworkspace\nodeone
# 切換至專案路徑
cd d:\nodeworkspace\nodeone
# 安裝專案依賴檔案
cnpm install
# 專案啟動
cnpm run dev 

接下來我的瀏覽器就彈出了搭建成功後的首頁,開心。