vue新項(xiàng)目準(zhǔn)備：

1、安裝nodejs，官網(wǎng)下載傻瓜安裝

node -v 驗(yàn)證

2、npm包管理器，是集成在node中的，所以安裝了node也就有了npm

npm -v 驗(yàn)證

3、安裝cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org

（完成之后，我們就可以用cnpm代替npm來安裝依賴包了。如果想進(jìn)一步了解cnpm的，查看淘寶npm鏡像官網(wǎng)。）

4、安裝vue-cli腳手架構(gòu)建工具

npm install -g vue-cli

vue新項(xiàng)目構(gòu)建：

1、初始化項(xiàng)目模板：

vue init webpack-simple yunshi-approve

或者

vue init webpack yunshi-approve

2、安裝npm

cd yunshi-approve

3、安裝項(xiàng)目所需要的依賴：

npm install 或 cnpm install

4、運(yùn)行看效果：

npm run dev

介紹一下目錄及其作用：

build：最終發(fā)布的代碼的存放位置。

config：配置路徑、端口號(hào)等一些信息，我們剛開始學(xué)習(xí)的時(shí)候選擇默認(rèn)配置。

node_modules：npm 加載的項(xiàng)目依賴模塊。

src：這里是我們開發(fā)的主要目錄，基本上要做的事情都在這個(gè)目錄里面，里面包含了幾個(gè)目錄及文件：

assets：放置一些圖片，如logo等

components：目錄里放的是一個(gè)組件文件，可以不用。

App.vue：項(xiàng)目入口文件，我們也可以將組件寫這里，而不使用components目錄。

main.js ：項(xiàng)目的核心文件

static：靜態(tài)資源目錄，如圖片、字體等。

test：初始測試目錄，可刪除

.XXXX文件：配置文件。

index.html：首頁入口文件，可以添加一些meta信息或者同統(tǒng)計(jì)代碼啥的。

package.json：項(xiàng)目配置文件。

README.md：項(xiàng)目的說明文件。

以上這篇webstorm+vue初始化項(xiàng)目的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長站。