一. 首先安裝node環(huán)境，并配置：

? ?地址：https://nodejs.org/en/

安裝完成后執(zhí)行：node --version?

在這里我安裝的是：12.2.0版本

二、安裝Git

? ? ? ? 直接到以下地址?https://git-scm.com/download/win下載安裝Git，安裝完成后找到bin路徑，將路徑添加單PATH中，

保存返回，CMD中運行?git --version?確認安裝是否成功，在這里我安裝的是2.21.0版本。

?

三、安裝npm環(huán)境

在舊版本中沒有集成安裝npm，在新版本中已經(jīng)安裝npm

? 可以通過如下命令升級npm

npm install npm -g

當沒有安裝npm時，我們可以通過命令

? ? ? ? git clone --recursive git://github.com/isaacs/npm.git 安裝npm，在安裝之前需將node和Git加入環(huán)境中

在這里我安裝的是

測試安裝情況：

四、vue環(huán)境得到安裝和配置

? ? ?執(zhí)行命令：cnpm install -g vue-cli

? ? ?創(chuàng)建vue項目并且初始化：vue init webpack my-project

然后通過vscode軟件打開項目

? ? ?如下：

項目文件夾的作用：

build文件夾：針對打包命令npm run build或者其他命令中的打包配置和工具

config文件夾：項目的基本配置、相關(guān)的測試、生產(chǎn)環(huán)境的啟動端口，不同的配置有自己的不同方式。

node_modules文件夾：由命令npm install自動打包生成的node使用插件的所在地。

src文件夾（assets文件夾，components文件夾，router文件夾）：為開發(fā)者編寫的代碼

assets文件夾：主要存放靜態(tài)文件中的圖片或其他靜態(tài)資源。

component文件夾：編寫的組件代碼存放位置，自動生成helloVue.js

router文件夾：存放項目的路由

?

?

?

?

安裝依賴：cnpm install

啟動項目：cnpm run dev

瀏覽器打開結(jié)果如下：

?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/hkMblogs/p/10896241.html

總結(jié)

以上是生活随笔為你收集整理的vscode 中搭建Vue.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。