.jpg)
本文的目的是為首次使用webstorm搭建vue項(xiàng)目的新手介紹具體的搭建流程。
首先我們來介紹幾個(gè)名詞。
Node.JS：
node.js 是一個(gè)基于 chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。?
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型，使其輕量又高效。?
Node.js 的包管理器 npm，是全球最大的開源庫生態(tài)系統(tǒng)。
npm：
npm全稱為Node Package Manager，是一個(gè)基于Node.js的包管理器，也是整個(gè)Node.js社區(qū)最流行、支持的第三方模塊最多的包管理器(類似于java中的maven)。
npm的初衷：JavaScript開發(fā)人員更容易分享和重用代碼。
npm的使用場(chǎng)景：
-
允許用戶獲取第三方包并使用。
-
允許用戶將自己編寫的包或命令行程序進(jìn)行發(fā)布分享。
npm版本查詢：
npm?-v
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（scss，typescript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
下面進(jìn)入正題
首先現(xiàn)在webstorm，node.js
?注意node的版本，只有支持和諧模式的node才會(huì)支持es6,在基于webpack構(gòu)建項(xiàng)目名稱時(shí)才不會(huì)報(bào)錯(cuò)。推薦最新版本.
1.下載安裝包之后直接點(diǎn)擊安裝即可。測(cè)試安裝成功的界面如下：
2.安裝淘寶鏡像（類似于阿里云的maven中央倉庫鏡像）
安裝時(shí)間有點(diǎn)長(zhǎng)
安裝命令：
npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org
驗(yàn)證命令：
cnpm?-v
3.安裝webpack
利用cnpm安裝webpack 命令行語句為cnpm install webpack -g? 。時(shí)間略長(zhǎng)。測(cè)試安裝成功的界面如下：
4.接下來就是全局安裝vue-cli。時(shí)間略長(zhǎng)
安裝語句為：
cnpm?install?--global?vue-cli
驗(yàn)證命令：
vue?-V
（學(xué)習(xí)視頻分享：php視頻教程）
5.下面開始使用WebStorm
重要的一點(diǎn)，想用WebStorm創(chuàng)建項(xiàng)目得安裝git。 安裝很簡(jiǎn)單，官網(wǎng)找到下載安裝即可，否則可能出現(xiàn)安裝不了的情況
紅色為新建的順序，綠色為node.js地址（裝好了會(huì)自動(dòng)尋找），藍(lán)色為vue.js包的地址，黃色為打包所用的打包模塊
填寫項(xiàng)目名，注意項(xiàng)目名中不能包含大寫字母。
一直點(diǎn)下一步就可以了，項(xiàng)目結(jié)構(gòu)
選中package.json 右鍵選擇 show npm scripts
選擇dev雙擊 即可進(jìn)行測(cè)試。開啟成功后會(huì)出現(xiàn)默認(rèn)的端口，贊帖到瀏覽器中打開，出現(xiàn)下面頁面就是成功啦。這樣一個(gè)vue項(xiàng)目就創(chuàng)建成功了
相關(guān)推薦：php視頻教程
.png)
