vue-cli腳手架構建一個vue項目

寫在前面的話

 

在開始建立一個vue項目以前，須要具有如下的條件

 

環境：

 

Node.js: javascript運行環境,不一樣系統直接運行各類編程語言；

npm: Nodejs下的包管理器。國內使用npm會很慢,推薦使用淘寶NPM鏡像（http://npm.taobao.org/）；

 

工具：

 

WebPack:簡單的說是模塊打包器， 經過 CommonJS 的語法把全部瀏覽器端須要發佈的靜態資源作相應的準備，好比資源的合併和打包。；

 

cli-vue: 用戶生成Vue工程模板, 安裝一個全局的腳手架：

npm install -g vue-cli

 

這樣的速度比較慢，建議鏡像安裝：

cnpm install -g vue- cli

；

 

確保環境和工具，以及安裝過vue的話，開始步入正題

---

 

• 第一步：打開要構建項目的文件夾，shift+鼠標右鍵，打開命令窗口，輸入 

 

vue init webpack app005   

 

上面的指令的意思是：使用wenpack建立一個vue項目在app005 的文件夾裏面

 

若是一路回車，會有幾個基本的選項

 

 

回車結束以後，打開app005的文件夾，目錄下面會多出不少文件

 

打開其中的package.json,裏面會有描述咱們這個項目所須要的依賴，

那麼接下來，咱們須要安裝這些依賴

 

• 第二步：進入到app005目錄下(cd app005),安裝依賴

 

若是安裝了淘寶鏡像的話，用cnpm代替npm

 

命令：

cnpm install

 

 

 

 

第二步完成後，在咱們的app005目錄下面 會多出一個 node_modules的文件夾，裏面放的就是以前下載的依賴文件；

 

• 第三步，讓這個項目運行起來吧

 

在app005目錄下的命令行中輸入：

 

 npm run dev

 

以後會用熱加載的方式運行咱們的應用，熱加載能夠讓咱們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

 

npm run dev ： dev是package.json中的scripts字段中的dev，也就是 node build/dev-server.js命令的一個快捷方式。

 

 

項目運行成功後，瀏覽器會自動打開localhost:8080（若是瀏覽器沒有自動打開，能夠手動輸入）