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


https://github.com/vuejs/vue-cli 官網 使用官方推薦的webpack

條件:
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樣式


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM