VSCode搭建Vue項目的方法
在vscode上搭建一個vue項目---初學(xué)總結(jié)。
1.假設(shè)Vscode、nodejs等已經(jīng)安裝好了。
2.全局安裝vue-cli，vue-cli可以幫助我們快速構(gòu)建Vue項目。
安裝命令：
npm install -g vue-cli
打開VScode的終端，調(diào)出命令輸入框。點擊終端-新建終端，輸入上述命令，回車，等待安裝完成。
3.安裝webpack，它是打包js的工具
安裝命令：
npm install -g webpack
安裝方法同上。
4.安裝完成之后就可以開始創(chuàng)建vue項目，首先創(chuàng)建一個文件夾用來存放你的項目，用vscode打開對應(yīng)的文件夾，并在終端cd到對應(yīng)的文件夾。比如我的文件夾就是myvue
創(chuàng)建項目命令，輸入回車:
vue init webpack myvue
其中myvue就是項目名稱，根據(jù)喜好自己取。
接著會出現(xiàn)一些配置項，可以根據(jù)需要配置，也可以默認(rèn)，直接按回車。
然后繼續(xù)等待安裝依賴項。完成之后，一個基本的 vue項目就搭建完了。完成之后的vscode左邊可以看到如下目錄，其中main.js就是入口。
5.接著運行項目，先cd到項目文件夾，cd myvue，然后輸入以下指令
npm run dev
成功之后，接著在瀏覽器里輸入:http://localhost:8080，看到如下畫面就是成功了。
6.項目打包發(fā)布上線
輸入命令：
npm run build
完成之后，項目文件夾中會出現(xiàn)一個dist文件夾，里面就是打包之后的內(nèi)容，直接部署就好了。
到此這篇關(guān)于VSCode搭建Vue項目的方法的文章就介紹到這了,更多相關(guān)VSCode搭建Vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要分享了Vue實現(xiàn)購物車功能的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了vue引入Excel表格插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue源碼入口文件分析(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
今天小編就為大家分享一篇vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Element input樹型下拉框的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內(nèi)容詳細(xì)，簡單易懂，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2023-01-01
這篇文章主要介紹了在vue項目中設(shè)置一些全局的公共樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本文主要介紹了vue封裝tree組件實現(xiàn)搜索功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05