vue cli腳手架之搭建環境全過程

2021-08-14 16:13:40 字數 2983 閱讀 7730

大家有沒有苦苦為搭建vue的腳手架vue-cli而煩惱過呢?作者本著總結經驗,分享經驗,讓迷弟迷妹們少走彎路錯路的態度為大家總結一下,大家按照我的步驟一步一步的走下去,最後一定會安裝成功的,我的辦法一定是最簡單,傻瓜式的,一看就會。

第一步,安裝node環境

流程:2、檢測到底有木有安裝成功呢?很簡單,一共兩條準則:

(1)直接輸入node -v(注意中間有空格),按「回車鍵(enter)」,此時顯示node版本

(2)輸入npm -v(注意中間有空格),按「回車鍵(enter)」,此時顯示npm版本

(!)下面是截圖,如果出現版本號,則證明node安裝成功了!嗨森

第二步,安裝**映象npm install -g cnpm --registry=

流程:

安裝**映象 :這裡是因為我們用的npm的伺服器是外國,有的時候我們安裝「依賴」的時候很很慢很慢超級慢,所以就用這個cnpm來安裝我們說需要的「依賴」。安裝完成之後輸入 cnpm -v,如下圖,如果出現相應的版本號,則說明安裝成功。

第三步:安裝webpack

流程:

開啟命令列工具輸入:npm install webpack -g,安裝完成之後輸入 webpack -v,如下圖,如果出現相應的版本號,則說明安裝成功。結果如下圖

第四步:安裝vue-cli腳手架構建工具流程:

開啟命令列工具輸入:npm install vue-cli -g,安裝完成之後輸入 vue -v(注意這裡是大寫的「v」),如下圖,如果出現相應的版本號,則說明安裝成功。

二、通過以上四步,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建專案

流程:

2、安裝vue腳手架輸入:vue init webpack exprice ,注意這裡的「exprice」 是專案的名稱可以說是隨便的起名,但是需要主要的是「不能用中文」。

$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令 this will install vue 2.x version of the template. ---------------------這裡說明將要建立乙個vue 2.x版本的專案 for vue 1.x use: vue init webpack#1.0 exprice ? project name (exprice) ---------------------專案名稱 ? project name exprice ? project description (a vue.js project) ---------------------專案描述 ? project description a vue.js project ? author datura --------------------- 專案建立者 ? author datura ? vue build (use arrow keys) ? vue build standalone ? install vue-router? (y/n) --------------------- 是否安裝vue路由,也就是以後是spa(但頁面應用需要的模組) ? install vue-router? yes ? use eslint to lint your code? (y/n) n ---------------------是否啟用eslint檢測規則,這裡個人建議選no ? use eslint to lint your code? no ? setup unit tests with karma + mocha? (y/n) ? setup unit tests with karma + mocha? yes ? setup e2e tests with nightwatch? (y/n) ? setup e2e tests with nightwatch? yes vue-cli · generated "exprice". to get started: --------------------- 這裡說明如何啟動這個服務 cd exprice npm install npm run dev

安裝好之後,進入你新建的檔案中(exprice),然後安裝npm依賴包(

npm install),安裝成功後,執行npm,即執行指令 

npm run dev

如果出現下圖所示,則說明腳手架環境就搭建成功了,

現在你就可以訪問doc中的鏈結http://localhost:8080了,執行結果如下圖

到了此處,那麼恭喜你,腳手架終於大功告成了,mmp太不容易了有木有?練了三遍,才變得很熟練了哈哈

參考文章:

搭建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...