搭建VUE開發環境

DayDreame發表於2018-04-25

一:vue依賴於node.js,所以第一步我們一定要確保安裝過node.js。具體下載教程就不一一講了。這裡附帶node.js下載地址nodejs.org/en/download…  在cmd總 我們使用node -v來檢視我們是否安裝了node.js和對應的版本

搭建VUE開發環境

二:接下來我們來安裝cnpm, 使用淘寶映象的cnpm來代替npm的安裝;命令列輸入nnpm install -g cnpm --registry=registry.npm.taobao.org 等待成功安裝即可。

然後使用cnpm -v  即可檢視版本

搭建VUE開發環境

三:接下來我們就可以搭建VUE專案了

#全域性安裝vue-cli
cnpm install -g vue-cli#建立一個基於webpack 模板的專案
vue init webpack first-project

#安裝依賴
cd first-project
cnpm install
#執行,啟動專案
cnpm run dev複製程式碼

四:啟動專案之後就能看到我們想要的效果了

搭建VUE開發環境


六:整個專案的結構如下

build資料夾是儲存一些webpack的初始化配置。config資料夾儲存一些專案初始化的配置;

node_modules是npm載入的專案依賴的模組

src目錄是我們要開發的目錄,這個資料夾中其中

           assets:用來放置圖片 

           components:用來放元件檔案
           app.vue:是專案入口檔案

搭建VUE開發環境

基本解讀就這樣拉,嘎嘎 ,趕緊自己動手測試一下吧

搭建VUE開發環境


相關文章