Vue.js(讀音 /vjuː/, 類似於 view) 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層, 采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue 學習起來非常簡單,本教程基於 Vue 2.1.8 版本測試。
Vue當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也完全能夠為復雜的單頁應用程序提供驅動。
vue安裝
1 獨立版本 之間下載vue.js <script》標簽引入
2 NPM:在用vue構建大型項目應用時推薦使用NPM.
前提是安裝了node npm webpack vue
查看node node -v
表明 node安裝成功
查看 npm npm -v
表明 npm安裝成功
升級npm npm install npm -g
使用npm安裝模塊,因為國外的網絡不穩定,會很慢,所以建議是用淘寶的鏡像,安裝cnpm
查看cnpm cnpm -v
cnpm 安裝成功
查看vue 版本
vue -V(V是大寫的)
安裝vue
cnpm install vue
vue-cli是vue提供的一個官方命令行工具,可用於快速搭建大型單頁應用
全局安裝 vue-cli
cnpm install --global vue-cli
下面按照正常的步驟新建項目:
vue init webpack my-project//新建基於webpack的項目 my-first-vue-demo,如下:
這是在目錄下生成項目 my-first-vue-demo項目
執行下面的命令,進入 my-first-vue-demo中
安裝項目依賴
安裝完之后,運行項目
報錯:
默認是8080端口,改端口被占用,打開項目,進入 config>index.js中
修改端口號,再次運行 npm run dev 運行項目
運行成功,打開頁面:
有的會報錯,如下:
這個是因為版本的問題,我之前就遇到了,搞了半天才明白,哎
查看自己的node npm 版本是不是太低了,更新到新版本,應該就沒問題了。
window更新node的版本,需要重新安裝node,在node的官網上下載最新版本的node,安裝第一次安裝的步驟進行安裝,重新新建項目,按照以上的步驟,應該就沒有問題了