用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

利用cnpm安裝webpack 命令行語句為cnpm install webpack -g  。時間略長。測試安裝成功的界面如下:

  

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

安裝語句為:cnpm install --global vue-cli

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

 

5.下面開始使用WebStorm

重要的一點,想用WebStorm創建項目得安裝git。 安裝很簡單,官網找到下載安裝即可,否則可能出現安裝不了的情況

  

紅色為新建的順序,綠色為node.js地址(裝好了會自動尋找,無需修改),藍色為vue.js包的地址(裝好了會自動尋找,無需修改),黃色為打包所用的打包模塊(默認即可,無需修改)

注意:項目存儲路徑一定要和webstorm工具安裝的所在系統盤一直,比如你前面把webstorm工具安裝在D盤下面,那么這里路徑就應該是D盤下面路徑而不是默認的C盤

  

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

一直點下一步就可以了,項目結構

 

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

 

選擇dev雙擊 即可進行測試。開啟成功后會出現默認的端口,直接點擊地址打開,或者復制粘貼地址到瀏覽器中打開,出現下面頁面就是成功啦。這樣一個vue項目就創建成功了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM