本文的目的是為首次使用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視頻教程