快捷導(dǎo)航

詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)

更新時(shí)間：2018年12月06日 10:57:45 作者：蘇黎世寶貝

這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

人一旦上了年紀(jì)，記憶力就變得越來(lái)越不好。

最近寫了許多的博文，倒不是為了給誰(shuí)看，而是方便自己來(lái)搜索，不然一下子又忘記了。

如果恰巧幫助到了你，也是我的榮幸~~~~~~~~~~~~

廢話不多說(shuō)，看正題~~~~

首先打開你的webstorm。這里插一句話，盡量保證你的webstorm是比較新的版本，在webstorm的右下角會(huì)有提示你更新的。因?yàn)榫湍壳皝?lái)看,我們的angualr2.0項(xiàng)目是采用typescript來(lái)編寫的，而最新版本的webstorm都只能支持到typescript2.0.8，而typescript已經(jīng)發(fā)布到typescript2.0.9。也就是如果你的webstorm版本更低的話，你所能支持的語(yǔ)法就更少。

1.首先需要?jiǎng)?chuàng)建一個(gè)project。

可以看到圖片上有兩個(gè)關(guān)于Angular的選擇。一個(gè)是AngularJS,這個(gè)創(chuàng)建的是基于Angular1.0版本類的project。另一個(gè)Angular CLI創(chuàng)建的才是基于Angular2.0的項(xiàng)目。

WebStorm有這點(diǎn)的好處就是會(huì)自動(dòng)鏈接到你電腦里已經(jīng)安裝的路徑上。從圖片可以看出：Node interpreter：就是鏈接到我電腦里面安裝node的路徑下。

如果你的Angular CLI沒有自動(dòng)鏈接那就是說(shuō)明你沒有安裝。

angular是用typescript編寫的，所以先安裝typescript，再安裝angularjs-cli

npm install -g typescript typings
npm install -g angular-cli --ignore-scripts
npm install

可能安裝會(huì)有點(diǎn)慢，不過(guò)都是可以安裝成功的。三條命令，如果有些你安裝過(guò)了就不需要安裝了。~~~

點(diǎn)擊Create之后

這樣就創(chuàng)立了一個(gè)名為Yue的project。你這時(shí)候就會(huì)發(fā)現(xiàn)node-modules已經(jīng)下載好了。package.json和tsconfig.js都已經(jīng)創(chuàng)建好了。

其實(shí)這些也是需要一個(gè)過(guò)程的~~~~剛開始create之后，我的名為Yue工程的項(xiàng)目里面什么都是沒有的，文件夾根本點(diǎn)不開，但是webStorm會(huì)自動(dòng)給我們下載好，可能得大概等個(gè)20秒?？吹浇K端出現(xiàn)done說(shuō)明下載完成了。

你會(huì)發(fā)現(xiàn)webStorm是如此的貼心，app文件夾都給我們創(chuàng)建好了，不僅如此，文件夾里還有app.module.ts和app.component.ts。你需要改動(dòng)什么直接在這些ts文件里改動(dòng)就可以了。