vue cli腳手架的搭建

2021-08-04 23:47:27 字數 1453 閱讀 1200

說起 vue ,估計腳手架的搭建也是很令人頭疼的問題吧。。。

剛開始接觸腳手架,自己也有一種很矇圈的感覺,現在專案寫多了,慢慢對腳手架的搭建環境也熟悉了。。。

搭建腳手架,第一步要先檢查 node js 的版本問題,可以使用 node -v 指令來檢查版本!

我的版本是 6.2.0 ,版本只要是 4.0 以上就可以正常使用~

第二步,全域性安裝 vue-cli

安裝方法和 vue ,vue-router , vue-resource 的方法是一樣的,通過 npm install  -g vue-cli  來進行全域性安裝,在安裝的過程中很考驗安裝者的耐心,因為安裝過程會進行的很    慢,很慢!但是如果等了很長時間沒反應或者安裝到一半突然卡住不動了!只需要 ctrl+c 取消本次安裝,然後重新安裝即可!

等等等,終於安裝完成了~

從上圖第三行可以看出,我安裝的 vue-cli 是 2.8.2 版本的!

接下來,第三步要進行初始化專案階段了;

我是自己先建好資料夾,直接在資料夾下面進行安裝的,如果安裝的時候還沒有建好資料夾,那要先通過 cd 命令進入想要建立新專案的資料夾下面,然後再使用 vue init 命令進行初始化;

vue init 模組名稱 新專案名稱

模組型別基本就以上幾種,建議使用 webpack-****** ;專案名稱我就暫時使用 project ;

輸入 vue init webpack-****** project

一路 enter 到底,到了 sass 這裡,如果專案中使用到就輸入 y ,不使用就輸入 n 即可。

直到看到最後三行的命令,根據命令一步一步往下進行,出現vue 頁面則證明安裝成功。

安裝成功後的資料夾就是這個樣子~

搭建 vue-cli 腳手架的基本步驟就是以上這些,剛開始搭建不熟練很正常,搭建多次就慢慢熟悉了。希望不熟悉 vue-cli 搭建環境的小夥伴們看完這篇部落格後,會對大家有所幫助吧。。。。。

搭建vue cli腳手架

前期工作準備 2.安裝 映象,因為我們用的npm的伺服器是外國,有的時候我們安裝 依賴 的時候會超級慢,所以就用這個cnpm來安裝我們說需要的 依賴 命令列輸入 npm install g cnpm registry 安裝完成後,就可以用cnpm 代替 npm 速度會快很多。3.安裝webpack,...

搭建vue cli腳手架

腳手架 cd xz vue 先進入專案資料夾 vue create後的那個資料夾 xz vue npm run serve 執行live server babel的效果。是先將腳手架中瀏覽器不懂的 翻譯為瀏覽器能懂的 然後,再將翻譯後的頁面執行在乙個臨時的開發伺服器中。強調 npm run serv...

vue cli腳手架搭建

是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將專案需要的環境 依賴等資訊都配置好。檢查npm 版本,建議安裝到最新版本。命令列檢視版本號 node v npm v 公升級npm 可選操作 npm install g npm 修改為 映象 可選操作 npm config set regist...