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


免責聲明!

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



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