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

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

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

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

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

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

安裝完成后cmd，輸入：

node -v

npm -v

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

安裝vue-cli

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

npm install -g

1）全局安裝 vue-cli。

npm install -g vue-cli

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

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

創(chuàng)建項目

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

vue init test_dm

*test_dm為項目名。

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

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

生成文件目錄后，使用 cnpm 安裝依賴：npm install。

最后需要執(zhí)行命令：npm run dev 來啟動項目，啟動完成后會自動彈出默認網(wǎng)頁：

到這一步，就算成功利用vue-cli搭建一個vue項目了~

注：

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

本文作者：池思敏

本文來源：IT那活兒（上海新炬王翦團隊）

GPU云服務器云服務器云服務器搭建vue項目阿里云服務器搭建vue項目 web前端項目 web前端開發(fā)項目實例

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/129547.html

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

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

xioqua 2019-08-22 13:56 評論0 收藏0
前端相關大雜燴

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

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

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

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

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

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

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

trigkit4 2019-08-22 16:09 評論0 收藏0