使用vue-cli啓動項目出錯

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，安裝第一次安裝的步驟進行安裝，從新新建項目，按照以上的步驟，應該就沒有問題了