1. 程式人生 > >Vue-cli的安裝步驟詳細版本

Vue-cli的安裝步驟詳細版本

條件:
node在4.以上,npm在3以上

安裝步驟:
1、cmd開啟命令列視窗
2、輸入cnpm install vue-cli -g,然後回車等待(想在哪個目錄建立vue專案就要在進入到對應目錄再輸入命令)
3、安裝結束後輸入vue 如果顯示版本號繼續下一步操作
4、執行vue init webpack demo(注:專案名稱)回車
5、顯示Project nanme 目錄名 回車 project description 後面可以寫上描述,或者直接回車
Author 後面可以寫作者也可以回車 
6、Install vue-router? 選擇Y
7、User ESLint to lint your code? 選Y
8、Setup unit tests with Karma + Mocha? 問的是否要測試 選n
9、Setup e2e tests with Nightwatch? 選n
10、這個時候在你建立的目錄下就有你的目錄了,然後cd 你的目錄名進去cnpm install回車等待,這一步是安裝依賴的,安裝完成後會在專案資料夾下自動生成node-module檔案來存放安裝的依賴檔案,如果這個資料夾沒有那麼專案是沒辦法跑

起來的
11、建立結束後在建立目錄裡面按住shift+右鍵 選擇 在此處開啟命令視窗 輸入npm run dev啟動應用,啟動成功它會自動開啟一個vue頁面
12、每次這樣啟動是很麻煩的,用開發工具載入整個專案,裡面有個package.json,它我整個專案的配置和資訊的描述,裡面有個scripts,這是定義的一些指令碼,剛才用的就是裡面的dev,它會執行後面的東西,就是用node跑一個JSON檔案
13、在專案中,右擊package.json選擇show npm scripts,顯示npm後,雙擊命令即可


main.js的介紹
el是掛載點,router是路由

App.vue 是整個檔案的入口,有三部分,template模板 script 邏輯 style樣式