一、了解一下什么是Vue
Vue是:構建用戶界面的漸進式框架,可以自底向上逐層應用(大概是這個意思?由基層開始做起,把基礎的東西寫好,再逐層往上添加效果和功能。)
二、vue-cli腳手架安裝及運行過程:
(前期剛學時不建議直接安裝vue-cli腳手架,可以直接通過<script></script>引入,如:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 然后直接用就行了)
1.首先Windows+R 打開cmd;輸入npm -v 和node -v 檢測是否安裝了npm和node.js,沒安裝先去安裝node.js(npm是隨node.js一起安裝的包管理工具,就不用安裝了)附上node.js安裝地址:
2.然后還需要淘寶鏡像安裝cnpm和webpack支撐(有時候安裝依賴特別慢 就會用到cnpm)
淘寶鏡像安裝cnpm命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝之后 執行cnpm -v,如果出現相應的版本號就是安裝成功
webpack安裝命令:
npm install -g webpack?
安裝之后 執行webpack -v,它會問你:
Do you want to install 'webpack-cli' (yes/no):?
直接回車就可以,然后再執行webpack -v,如果出現相應的版本號就是安裝成功
3.最后就是安裝vue-cli腳手架了
vue-cli腳手架安裝命令:
cnpm install -g vue-cli?
安裝之后 執行 vue -V?,如果出現相應的版本號就是安裝成功
4.用vue-cli創建一個基于webpack的新項目并運行
首先可以在桌面新建一個文件夾,如:Vue
然后執行cd Vue 進入文件夾,然后輸入以下命令新建項目,回車
vue init webpack
然后根據提示一路回車,這時文件夾下就會有很多相關文件了
最后用cnpm安裝依賴:
cnpm install
最后的最后 就是運行項目啦 輸入以下命令:
cnpm run dev
或者以下命令也可以:
npm run dev
如果成功的話,一般就是提醒你可以在瀏覽器地址欄輸入以下地址就能正常訪問了
localhost:8080
至此,應該就可以正常訪問一個新建的項目了,接下來的就是在新項目中通過組件、事件、指令等等豐富項目。
本文根據vue.js官方文檔學習總結。附上官方文檔: