webstorm怎么搭建vue項目

這篇文章給大家分享的是有關(guān)webstorm怎么搭建vue項目的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

首先我們來介紹幾個名詞。

Node.js：

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。

Node.js 使用了一個事件驅(qū)動、非阻塞式 I/O 的模型，使其輕量又高效。

Node.js 的包管理器 npm，是全球最大的開源庫生態(tài)系統(tǒng)。

npm：

npm全稱為Node Package Manager，是一個基于Node.js的包管理器，也是整個Node.js社區(qū)最流行、支持的第三方模塊最多的包管理器(類似于java中的Maven)。

npm的初衷：JavaScript開發(fā)人員更容易分享和重用代碼。

npm的使用場景：

• 允許用戶獲取第三方包并使用。

• 允許用戶將自己編寫的包或命令行程序進(jìn)行發(fā)布分享。

npm版本查詢：

npm -v

Webpack

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

下面進(jìn)入正題

首先現(xiàn)在webstorm，node.js

注意node的版本，只有支持和諧模式的node才會支持es6,在基于webpack構(gòu)建項目名稱時才不會報錯。推薦最新版本.

1.下載安裝包之后直接點擊安裝即可。

2.安裝淘寶鏡像（類似于阿里云的maven中央倉庫鏡像）

安裝時間有點長

安裝命令：

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

驗證命令：

cnpm -v

3.安裝webpack

利用cnpm安裝webpack 命令行語句為cnpm install webpack -g  。

4.接下來就是全局安裝vue-cli。時間略長

安裝語句為：

cnpm install --global vue-cli

驗證命令：

vue -V

5.下面開始使用WebStorm

重要的一點，想用WebStorm創(chuàng)建項目得安裝git。 安裝很簡單，官網(wǎng)找到下載安裝即可，否則可能出現(xiàn)安裝不了的情況

紅色為新建的順序，綠色為node.js地址（裝好了會自動尋找），藍(lán)色為vue.js包的地址，黃色為打包所用的打包模塊

填寫項目名，注意項目名中不能包含大寫字母。

一直點下一步就可以了，項目結(jié)構(gòu)

選中package.json 右鍵選擇 show npm scripts

選擇dev雙擊 即可進(jìn)行測試。開啟成功后會出現(xiàn)默認(rèn)的端口，贊帖到瀏覽器中打開。

感謝各位的閱讀！關(guān)于“webstorm怎么搭建vue項目”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！