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
打開(kāi)VScode的終端，調(diào)出命令輸入框。點(diǎn)擊終端-新建終端，輸入上述命令，回車(chē)，等待安裝完成。
3.安裝webpack，它是打包js的工具
安裝命令：
npm install -g webpack
安裝方法同上。
4.安裝完成之后就可以開(kāi)始創(chuàng)建vue項(xiàng)目，首先創(chuàng)建一個(gè)文件夾用來(lái)存放你的項(xiàng)目，用vscode打開(kāi)對(duì)應(yīng)的文件夾，并在終端cd到對(duì)應(yīng)的文件夾。比如我的文件夾就是myvue
創(chuàng)建項(xiàng)目命令，輸入回車(chē):
vue init webpack myvue
其中myvue就是項(xiàng)目名稱(chēng)，根據(jù)喜好自己取。
接著會(huì)出現(xiàn)一些配置項(xiàng)，可以根據(jù)需要配置，也可以默認(rèn)，直接按回車(chē)。
然后繼續(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，看到如下畫(huà)面就是成功了。
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)文章
Vue實(shí)現(xiàn)購(gòu)物車(chē)功能
本篇文章主要分享了Vue實(shí)現(xiàn)購(gòu)物車(chē)功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了vue引入Excel表格插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue源碼入口文件分析(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法
今天小編就為大家分享一篇vue動(dòng)態(tài)刪除從數(shù)據(jù)庫(kù)倒入列表的某一條方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Element input樹(shù)型下拉框的實(shí)現(xiàn)代碼
這篇文章主要介紹了Element input樹(shù)型下拉框的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內(nèi)容詳細(xì)，簡(jiǎn)單易懂，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2023-01-01
在vue項(xiàng)目中設(shè)置一些全局的公共樣式
這篇文章主要介紹了在vue項(xiàng)目中設(shè)置一些全局的公共樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
本文主要介紹了vue封裝tree組件實(shí)現(xiàn)搜索功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05