十分鐘上手 搭建vue開發環境(新手教程)

2022-09-02 14:03:12 字數 2274 閱讀 1115

想寫一些關於vue的文章已經很久了,因為這個框架已經火了很久,在公司裡用的框架都比較老舊,但怎麼也得跟上前端發展變化的潮流,這不,開始使用vue開發專案了,一遍開發一邊踩坑中,今天要記錄的是五分鐘搭建vue開發環境,執行github上的開源專案。步驟很簡單,只是在搭建環境的過程中會遇到各種各樣奇怪的報錯,十分讓人頭疼。

輸入命令: node -v
由於npm是國外的,使用起來比較慢,我們這裡使用**的cnpm映象來安裝vue.

**的cnpm命令管理工具可以代替預設的npm管理工具。

輸入命令:npm install -g cnpm --registry=

**映象安裝成功之後,我們就可以全域性vue-cli腳手架,輸入命令:cnpm install --global vue-cli 回車;驗證是否安裝成功,在命令輸入vue,出來vue的資訊,及說明安裝成功;

輸入命令:cnpm install --global vue-cli

輸入命令:vue init webpack my-project-first
回車,my-project-first是我自己的資料夾的名字,是基於webpack的專案,輸入之後就一直回車,直到出現是否要安裝vue-route,

這個我們在專案要用到,所以就輸入y 回車

下面會出現是否需要js語法檢測,這個我們暫時用不到,就可以直接輸入no,後面的都可以直接輸入no,都是我們暫時用不到的

開啟d盤查看一下,會發現多了乙個剛剛建立的資料夾

輸入命令:cd my-project-first
因為各個模板之間都是相互依賴的,所以現在我們要安裝依賴,在專案裡輸入以下命令。

輸入命令:cnpm install

一切環境依賴安裝準備就緒,我們來測試一下自己新建的vue專案的運**況,輸入命令:cnpm run dev直接回車。會彈出乙個瀏覽器訪問位址預設為localhost:8080。(我將位址修改為8081進行訪問)

輸入命令:cnpm run dev

8080是預設的埠,要訪問的話,直接在瀏覽器輸入localhost:8080就可以開啟預設的模板了;(我的電腦上8080埠有需要,被另外乙個專案占用,故而使用8081的埠)

在瀏覽器輸入localhost:8081,顯示如下,到此為止,vue開發環境搭建完畢。

但是在最後一步的時候,有些人會遇到這樣的報錯:

不要著急,我也遇到過這樣的情況,總結了乙個非常完美的解決方案。

解決方案:

1:在專案裡執行這樣的命令

npm

iprettier@~1.12.0

:2:重新開啟執行即可成功:

npm run dev
既然提到自己修改了預設的埠,那就說明一下。根目錄下有乙個config資料夾,看名字就知道與配置有關,開啟config目錄下的index.js,這裡不僅可以改變埠,還可以根據需要改變其他配置資訊。

十分鐘上手 搭建vue開發環境(新手教程)

想寫一些關於vue的文章已經很久了,因為這個框架已經火了很久,在公司裡用的框架都比較老舊,但怎麼也得跟上前端發展變化的潮流,這不,開始使用vue開發專案了,一遍開發一邊踩坑中,今天要記錄的是五分鐘搭建vue開發環境,執行github上的開源專案。步驟很簡單,只是在搭建環境的過程中會遇到各種各樣奇怪的...

十分鐘快速上手使用MySQL

本文旨在快速學會如何使用mysql進行增刪改查,主要是簡單的sql命令的學習,通用的sql命令適用於各類資料庫操作。本文內容只是最粗淺的使用,如果有精力可以進行系統學習 同時,本人也整理了mysql的基礎知識筆記 關於本專欄,後續還會進行更新,包含但不僅僅包含 各語言如何使用mysql 高效能mys...

課間十分鐘

時間限制 1000 ms 記憶體限制 128 mb 兩人都是數學愛好者,便發明了乙個遊戲。在遊戲開始前,他們先約定乙個正整數n,同時令m 1。遊戲過程中,每個人都可以將m的值擴大2到9中的任意倍數。第乙個使m n的人就是最後的贏家。181818181818和zbt都十分聰明,並且遊戲過程中都使用最佳...