最詳細(xì)的vue-cli工具構(gòu)建VUE項(xiàng)目教程

一、安裝node環(huán)境

1. 進(jìn)入node 官網(wǎng)下載安裝 網(wǎng)址 https://nodejs.org/zh-cn/ 2. 默認(rèn)安裝（安裝在C盤） 3. 安裝完成后 win+R 鍵 在運(yùn)行當(dāng)中輸入 cmd 打開window命令行工具 4. 在命令行工作中輸入 npm -v (-v前有一個(gè)空格) 顯示版本號(hào)則表示安裝成功

二、安裝git

1. 打開鏈接 https://git-scm.com/downloads2. 點(diǎn)擊 Download 2.16.2 for Windows 按鈕下載 3. 默認(rèn)安裝

三、安裝 vue-cli構(gòu)建工具

1、win+R 鍵運(yùn)行cmd 2、在命令工具中輸入 npm install vue-cli -g （-g表示全局）

四、用vue-cli來創(chuàng)建vue項(xiàng)目

1. 在cmd中進(jìn)入想要放置項(xiàng)目的目錄2. 在命令行工具中輸入 vue init webpack 項(xiàng)目名稱 例如：vue init webpack abc 就會(huì)創(chuàng)建一個(gè)abc的項(xiàng)目（文件夾） 會(huì)出現(xiàn)一個(gè)“ ? Project name <abc> ” 3. 注意：項(xiàng)目名不要以數(shù)字或大寫字母開頭，會(huì)出現(xiàn)錯(cuò)誤

4. 以下是創(chuàng)建項(xiàng)目的時(shí)候提示配置的內(nèi)容： ？ Project name: 設(shè)置項(xiàng)目名稱 你可以隨便取一個(gè)（可以直接回車確認(rèn)）？ Project desciprtion: 設(shè)置項(xiàng)目的描述內(nèi)容 隨便寫（可以直接回車確認(rèn)） ？ Author：設(shè)置開發(fā)者 可以隨便寫（可以直接回車確認(rèn)） -> runtime + compiler：recommended for most users（選擇這個(gè)按回車確認(rèn)） Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere ? Install vue-Router? （選y） ? Use Eslint to link your code ? 使用使用ESlint來檢測(cè)你的代碼規(guī)范，不規(guī)范會(huì)報(bào)錯(cuò)（初學(xué)者建議選n） ? SET up unit test ? （選n） ? Setup e2e tests with Nightwatch? 選n ? Should we run `npm install` for you after the project has been created? (recommended) -> Yes, use NPM (選擇這個(gè)用npm 來加載項(xiàng)目) Yes, use Yarn No, I will handle that myself

五、執(zhí)行安裝依賴

1. cmd中進(jìn)入到新創(chuàng)建的項(xiàng)目目錄2. 執(zhí)行 npm install（新版本可省去此步驟）

六、運(yùn)行項(xiàng)目

在cmd中輸入npm run dev ?

轉(zhuǎn)載于:https://www.cnblogs.com/saint258/p/9621161.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的最详细的vue-cli工具构建vue项目教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。