VSCode搭建vue項目的實現(xiàn)步驟
一、安裝環(huán)境：
1.默認(rèn)Vscode、nodejs已經(jīng)安裝好了
2.全局安裝vue-cli，vue-cli幫助我們快速構(gòu)建Vue項目。
npm install -g @vue/cli
3.安裝webpack (打包js的工具)
npm install -g webpack
二、建項目：
1.開始創(chuàng)建vue項目，首先創(chuàng)建一個文件夾用來存放項目，用vscode打開對應(yīng)的文件夾，并在終端cd到對應(yīng)的文件夾。比如我的文件夾就是VUE
注意：接下來的命令需要在cmd命令窗口，vscode默認(rèn)是powershell，需要自己改一下。
vue create 項目名
3.接著運行項目，先cd到項目文件夾（這里我的項目叫 myvue），cd myvue，然后輸入以下指令。（這部可能會報錯，解決方法在文章最下方）
npm run serve
4.接著在瀏覽器里輸入:http://localhost:8081（vscode給的鏈接，大家可能會有點不一樣），看到如下vue頁面就是成功啦。
5.項目打包發(fā)布上線
npm run build
完成之后，項目文件夾中會出現(xiàn)一個dist文件夾，里面就是打包之后的內(nèi)容，直接部署就好了。
問題：npm run serve時可能會報錯（關(guān)于eslint校驗的錯誤或警告，如下圖）
解決：注釋掉這一行
到此這篇關(guān)于VSCode搭建vue項目的實現(xiàn)步驟的文章就介紹到這了,更多相關(guān)VSCode搭建vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在本篇文章里小編給大家整理的是關(guān)于Vue開發(fā)中遇到的跨域問題及解決方法，需要的朋友們可以學(xué)習(xí)下。2020-02-02
這篇文章主要介紹了Vue跨端渲染實現(xiàn)多端無縫銜接，Vue跨端渲染是一種基于Vue框架的跨平臺開發(fā)技術(shù)，能夠?qū)崿F(xiàn)Web、iOS和Android三端的無縫銜接，提高開發(fā)效率和用戶體驗2023-05-05
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝與使用教程,需要的朋友可以參考下2023-03-03
Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)
本文主要介紹了Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
深入理解Vue-cli搭建項目后的目錄結(jié)構(gòu)探秘
本篇文章主要介紹了深入理解Vue-cli搭建項目后的目錄結(jié)構(gòu)探秘，具有一定的參考價值，有興趣的可以了解一下2017-07-07
MVVM模型主要是為了分離視圖(View)和模型(Model)，其優(yōu)點為：低耦合、可重用性、獨立開發(fā)以及可測試，視圖和模型分離的特點給了 Vue 很大的啟發(fā)，這篇文章主要介紹了MVVM模型在Vue中的使用,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-router路由模式詳解(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue中el-table實現(xiàn)自動吸頂效果(支持fixed)
本文主要介紹了vue中el-table實現(xiàn)自動吸頂效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09