VSCode搭建Vue項(xiàng)目的方法
在vscode上搭建一個(gè)vue項(xiàng)目---初學(xué)總結(jié)。
1.假設(shè)Vscode、nodejs等已經(jīng)安裝好了。
2.全局安裝vue-cli，vue-cli可以幫助我們快速構(gòu)建Vue項(xiàng)目。
安裝命令：
npm install -g vue-cli
打開VScode的終端，調(diào)出命令輸入框。點(diǎn)擊終端-新建終端，輸入上述命令，回車，等待安裝完成。
3.安裝webpack，它是打包js的工具
安裝命令：
npm install -g webpack
安裝方法同上。
4.安裝完成之后就可以開始創(chuàng)建vue項(xiàng)目，首先創(chuàng)建一個(gè)文件夾用來存放你的項(xiàng)目，用vscode打開對(duì)應(yīng)的文件夾，并在終端cd到對(duì)應(yīng)的文件夾。比如我的文件夾就是myvue
創(chuàng)建項(xiàng)目命令，輸入回車:
vue init webpack myvue
其中myvue就是項(xiàng)目名稱，根據(jù)喜好自己取。
接著會(huì)出現(xiàn)一些配置項(xiàng)，可以根據(jù)需要配置，也可以默認(rèn)，直接按回車。
然后繼續(xù)等待安裝依賴項(xiàng)。完成之后，一個(gè)基本的 vue項(xiàng)目就搭建完了。完成之后的vscode左邊可以看到如下目錄，其中main.js就是入口。
5.接著運(yùn)行項(xiàng)目，先cd到項(xiàng)目文件夾，cd myvue，然后輸入以下指令
npm run dev
成功之后，接著在瀏覽器里輸入:http://localhost:8080，看到如下畫面就是成功了。
6.項(xiàng)目打包發(fā)布上線
輸入命令：
npm run build
完成之后，項(xiàng)目文件夾中會(huì)出現(xiàn)一個(gè)dist文件夾，里面就是打包之后的內(nèi)容，直接部署就好了。
到此這篇關(guān)于VSCode搭建Vue項(xiàng)目的方法的文章就介紹到這了,更多相關(guān)VSCode搭建Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2.0 和 animate.css的結(jié)合使用
animate.css是一款前端動(dòng)畫庫，相似的有velocity-animate。這篇文章給大家介紹vue2.0 和 animate.css的結(jié)合使用，需要的朋友參考下吧2017-12-12
這篇文章主要為大家通過示例解析Ant?Design?Vue組件slots作用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue3應(yīng)用elementPlus table并滾動(dòng)顯示問題
這篇文章主要介紹了vue3應(yīng)用elementPlus table并滾動(dòng)顯示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法
這篇文章主要介紹了Vue使用vux-ui自定義表單驗(yàn)證遇到的問題及解決方法,需要的朋友可以參考下2018-05-05
vue引入js數(shù)字小鍵盤的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue引入js數(shù)字小鍵盤的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
本篇文章主要介紹了Vue.js結(jié)合Ueditor的項(xiàng)目實(shí)例代碼，這里整理了詳細(xì)的代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
vue+elementUI實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-10-10
vue mixins合并策略以及應(yīng)用場(chǎng)景分析
這篇文章主要介紹了vue mixins合并策略以及應(yīng)用場(chǎng)景,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08