用webstorm搭建vue項目

本文只針對新手。

首先要明白幾個名詞（概念）。

Node.js：

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 

Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

npm：

 

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

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

npm的使用場景：

• 容許用戶獲取第三方包並使用。
• 容許用戶將本身編寫的包或命令行程序進行發佈分享。

npm版本查詢：npm -v 

 

Webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

下面進入正題

首先如今webstorm，node.js

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

1.下載安裝包以後直接點擊安裝便可。測試安裝成功的界面以下：

2.安裝淘寶鏡像（相似於阿里雲的maven中央倉庫鏡像）

安裝時間有點長

安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

驗證命令：cnpm -v

3.安裝webpack

利用npm安裝webpack 命令行語句爲npm install webpack -g  。時間略長。測試安裝成功的界面以下：

 

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

安裝語句爲：npm install --global vue-cli

驗證命令:vue -V (V要大寫)

5.下面開始使用WebStorm

重要的一點，想用WebStorm建立項目得安裝git。 安裝很簡單，官網找到下載安裝便可，不然可能出現安裝不了的狀況

 

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

 

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

一直點下一步就能夠了，項目結構

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

選擇dev雙擊 便可進行測試。開啓成功後會出現默認的端口，贊帖到瀏覽器中打開，出現下面頁面就是成功啦。這樣一個vue項目就建立成功了