vue cli 腳手架開發環境搭建

2021-09-20 09:21:13 字數 1382 閱讀 2833

ps:node和git的安裝自己到官網檢視

開啟命令列工具輸入:npm install -g cnpm --registry=

(如果用git的命令列工具執行報錯,就換用cmd命令列工具去執行)

安裝完成之後輸入 cnpm-v,如下圖,如果出現相應的版本號,則說明安裝成功。

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

輸入:npm install --g vue-cli,安裝完成之後輸入 vue -v(注意-v大寫),如下圖,如果出現相應的版本號,則說明安裝成功。

在命令列輸入:vue init 模板名稱  專案名稱

(例如:vue init webpack-****** bxwmanger)

******  個人覺得一點用都沒有(就是乙個頁面引入vue.js)

webpack 可以使用(大型專案)

eslint 檢查**規範,

單元測試

webpack-****** 個人推薦使用, 沒有**檢查 √

browserify ->  自己看

browserify-******

成功之後進入專案資料夾安裝依賴:

cd bxwmanger

cnpm install

資料夾目錄

執行專案:npm run dev,如下圖,則說明安裝成功。

打包,因為不可能將這個專案就這樣部署上去,需要將頁面打包,打包命令為

打包打包完成後,會在根目錄下生成乙個dist資料夾,這就是最後的成品頁面

vue-devtools是一款基於chrome遊覽器的外掛程式,用於除錯vue應用,這可以極大地提高我們的除錯效率。接下來我們就介紹一下vue-devtools的安裝。

原文發布時間為:2023年01月15日

楊鵬飛乀

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