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