首先要明白幾個名詞(概念)。
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.下載安裝包之後直接點選安裝即可。測試安裝成功的介面如下:
安裝時間有點長
安裝命令: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專案就建立成功了