WEB前端搭建Vue腳手架并創(chuàng)建一個(gè)項(xiàng)目

IT那活兒發(fā)布于2023-01-11 13:20 / 2853人閱讀

點(diǎn)擊上方“IT那活兒”，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了?。?！

安裝node.js環(huán)境

官方網(wǎng)址：http://nodejs.cn/

根據(jù)自己電腦系統(tǒng)安裝，一直點(diǎn)下一步即可。

安裝完成后cmd，輸入：

node -v

npm -v

如果能看到node和npm的版本號(hào)了，說(shuō)明已經(jīng)安裝成功。

安裝vue-cli

下面整個(gè)過(guò)程是基于已經(jīng)安裝node.js和npm的基礎(chǔ)上，如何全局化安裝npm：

npm install -g

1）全局安裝 vue-cli。

npm install -g vue-cli

2）檢查是否安裝成功與版本。

出現(xiàn)以上提示表示vue-cli正常安裝成功，可以正式創(chuàng)建vue-cli工程項(xiàng)目了。

創(chuàng)建項(xiàng)目

安裝vue-cli成功后，通過(guò)cd命令進(jìn)入你想放置項(xiàng)目的文件夾，在命令提示窗口執(zhí)行創(chuàng)建：

vue init test_dm

*test_dm為項(xiàng)目名。

確認(rèn)創(chuàng)建項(xiàng)目后，后續(xù)還需輸入一下項(xiàng)目名稱(chēng)、項(xiàng)目描述、作者、打包方式、是否使用ESLint規(guī)范代碼等等，詳見(jiàn)上圖。

安裝順利執(zhí)行后會(huì)，生成如下文件目錄：

生成文件目錄后，使用 cnpm 安裝依賴(lài)：npm install。

最后需要執(zhí)行命令：npm run dev 來(lái)啟動(dòng)項(xiàng)目，啟動(dòng)完成后會(huì)自動(dòng)彈出默認(rèn)網(wǎng)頁(yè)：

到這一步，就算成功利用vue-cli搭建一個(gè)vue項(xiàng)目了~

注：

build webpack文件，配置參數(shù)，打包的代碼存放在這里。
config vue項(xiàng)目的基本配置文件。
node_modules 項(xiàng)目中安裝的依賴(lài)模塊。

本文作者：池思敏

本文來(lái)源：IT那活兒（上海新炬王翦團(tuán)隊(duì)）

GPU云服務(wù)器云服務(wù)器云服務(wù)器搭建vue項(xiàng)目阿里云服務(wù)器搭建vue項(xiàng)目 web前端項(xiàng)目 web前端開(kāi)發(fā)項(xiàng)目實(shí)例

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/129547.html

相關(guān)文章

vue + vuex + koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)

摘要：開(kāi)發(fā)既是一個(gè)練習(xí)如何在開(kāi)發(fā)環(huán)境中寫(xiě)代碼的過(guò)程，反過(guò)來(lái)，也是一個(gè)驗(yàn)證環(huán)境搭建的對(duì)不對(duì)好不好用的過(guò)程。前端調(diào)用后端接口示例為突出重點(diǎn)，排除干擾，方便理解。寫(xiě)在前面這篇文章的主要目的是學(xué)會(huì)使用koa框架搭建web服務(wù)，從而提供一些后端接口，供前端調(diào)用。搭建這個(gè)環(huán)境的目的是：前端工程師在跟后臺(tái)工程師商定了接口但還未聯(lián)調(diào)之前，涉及到向后端請(qǐng)求數(shù)據(jù)的功能能夠走前端工程師自己搭建的http路徑...

xioqua 2019-08-22 13:56 評(píng)論0 收藏0
前端相關(guān)大雜燴

摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開(kāi)發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開(kāi)發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評(píng)論0 收藏0
《從零構(gòu)建前后分離的web項(xiàng)目》實(shí)戰(zhàn) -5分鐘快速構(gòu)建炒雞規(guī)范的VUE項(xiàng)目骨架

摘要：可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴(lài)中可以寫(xiě)成放哪都行，可以寫(xiě)成可以寫(xiě)成看到這個(gè)畫(huà)面，安裝完成了。初步搭建腳手架 Tips 任何不錯(cuò)的開(kāi)源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。什么是 CLI 命令行界面（英語(yǔ)：command-li...

qieangel2013 2019-08-23 11:58 評(píng)論0 收藏0
《從零構(gòu)建前后分離的web項(xiàng)目》實(shí)戰(zhàn) -5分鐘快速構(gòu)建炒雞規(guī)范的VUE項(xiàng)目骨架

摘要：可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴(lài)中可以寫(xiě)成放哪都行，可以寫(xiě)成可以寫(xiě)成看到這個(gè)畫(huà)面，安裝完成了。初步搭建腳手架 Tips 任何不錯(cuò)的開(kāi)源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。什么是 CLI 命令行界面（英語(yǔ)：command-li...

kel 2019-08-19 11:10 評(píng)論0 收藏0
為什么我不推薦你使用vue-cli創(chuàng)建腳手架？

摘要：后來(lái)經(jīng)過(guò)排查你會(huì)發(fā)現(xiàn)是由于目前還沒(méi)有版本。可以使用該方式解決。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進(jìn)階中級(jí)的初級(jí)前端人員。最近在知乎看到一個(gè)問(wèn)題，原問(wèn)題如下：很奇怪，為什么現(xiàn)在能找到自己手動(dòng)創(chuàng)建vue腳手架的文章非常少，而且大家似乎對(duì)webpack4的熱情并不高，對(duì)于想基于vue2.0+webpack4搭建一個(gè)腳手架的我來(lái)說(shuō)資料真是少得可憐。難道現(xiàn)在一般的做...

trigkit4 2019-08-22 16:09 評(píng)論0 收藏0