iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
3
Modern Web

跨平台開發利器- ASP.NET Core 系列 第 22

(Day 22) 要陥害一個程式設計師,就勸他去學習JavaScript

  今天的標題有些奇特,是的,我個人深深覺得,JavaScript入門難,精通更難,所以,一般來說,如果有一定的必要,非用JavaScript不可的工作,否則,能避免深入JavaScript就避免。
  如果免不了要使用JavaScript,就盡量使用Google能找到的範例來使用,會比較自行刻代碼來的省事。
  當然,如果你立志做JavaScript大師,那麼這兩句話就當廢話來看可以。
  為什麼我要下這個標題,因為JavaScript經過這些年的發展,Node.js的興起和各JavaScript門派的大神們的刻苦創新招式,JavaScript己經成為百花齊放,各種套件、框架、控件層出不窮的大千世界。你開始學習其中一個招式,馬上就有大神文告訴你,還要學會這個,那個,如果會這個,要不要在學一學這個的那(ㄋㄟ)個和那(ㄋㄚ)個。
  啊,扯遠了,就當我在抱怨吧。
  今天我們要再來談談Vue.js和ASP.NET Core的整合。
  一開始,我們打開Visual Studio的新增專案對話窗,然後注意對話窗左邊中門下方一點點有一串藍色字連結:
https://ithelp.ithome.com.tw/upload/images/20181027/20017649pIjAlleg4u.png
  [開啟Visual Studio安裝程式],找到了就點下去,打開Visual Studio的安裝程式。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649ZdGyq7spfK.png
  Visual Studio安裝程式啟動以後,找一下Node.js開發,勾選這個安裝選項,然後點[修改],這是說要修改Visual Studio的環境的意思。因Visual Studio還啟動著,所以跳出下列訊息。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649THAmY822X2.png
  去把Visual Studio關閉,點[重試]就會完成安裝程序。為什麼要安裝Node.js,因為Vue.js。但接下來,大神們不滿足於你只會Node.js,你還要會NPM,要會GULP,如果可以,去看看什麼是TypeScript吧。等一下,還沒出門就把門檻加高到無法跨出去,是沒必要的吧。
  安裝好Node.js,VIsual Studio安裝程式顥示如下,
https://ithelp.ithome.com.tw/upload/images/20181027/20017649p1NnoBr28b.png
  唉,到底裝好了沒?先直接關掉這個安裝程式,然後打開Visual Studio,再次執行新建專案,然後在新增專案視窗左邊的範本集裏,可以看到JavaScript和TypeScript兩者下都有Node.js的範本集。如下兩圖所示,有看到Vue.js Web應用程式範本吧?
https://ithelp.ithome.com.tw/upload/images/20181027/20017649Gi4FyoH6Za.png
https://ithelp.ithome.com.tw/upload/images/20181027/20017649O6gTuFM4yR.png
  我們先選用JsvaScript裏的[基本Vue.js Web應用程式]範本(其實TypeScript裏的Vue.js專案範本也是一樣的),指派好專案名稱和資料夾後,就按下[確定]把專案建起來吧。
  建好的Vue.js專案,其方案總管中有看起來如下圖的資料夾及檔案。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649n7Tc2SUkmM.png
  好吧,看起來又是另外一回事了,似乎也沒了MVC架構,其實不是這樣子,因為這是[基本]的Vue.js專案,[基本],再強調一次,[基本],也就是說,請你開始自行刻MVC程式囉。
  沒問題的話,就從NPM開始吧。打開npm資料夾,可以發現三個npm套件都有驚嘆號的標示,
https://ithelp.ithome.com.tw/upload/images/20181027/20017649NQ4msvhucG.png
  也被註記(遺漏)字眼,請先由Vue套件開始,游標指向Vue套件,按右鍵然後選擇[安裝遺漏的NPM套件]。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649ixpqRfOcQO.png
  但是,報錯了。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649EXlu9PYuTZ.png
  這是因為Node.js還沒安裝啟動,或者是環境沒指派到Node.js在資料夾,Visual Studio沒法自動啟動Node.js。所以,接下來,我們來安裝Node.js資料夾。
  在繼續下去之前,我們先看一下main.ts,這是TypeScript檔案,也是專案的啟始檔案。檔案的內容,如下圖,
https://ithelp.ithome.com.tw/upload/images/20181027/20017649cgNl78Bvsy.png
  你可以看見[找不到模組Vue]的訊息,這是因為NPM裏,還沒有Vue模組的完整下載。
  現在,讓我們來完成安裝Node.js,奇怪那剛才執行的Visual Studio安裝動作,在裝什麼?喔,那只是安裝專案範本而己。在Visual Studio的功能表下,可以看到一行黃底警告,說是沒找不到Node.js的執行階段,我們點一下右邊的[下載Node.js],Node.js的官網下載頁面被打開,我的電腦是WIndows 10 64位元版本,所以選擇Windows Installer 64bits。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649IRqh7KDBcL.png
  然後問你要如何處理下載檔案,我選擇[執行]
https://ithelp.ithome.com.tw/upload/images/20181027/20017649PTbbVAzhYY.png
  下載完成時,就自動啟動安裝程序:
https://ithelp.ithome.com.tw/upload/images/20181027/20017649cElPkSPMkg.png
(咚、咚、咚)
https://ithelp.ithome.com.tw/upload/images/20181027/20017649o71rivVjZM.png
  安裝過程我就不再詳細截圖了,總之就是接受版權限制,下一步下一步就行了。最後,出現Node.js安裝精靈完成,就行了。
  Node.js安裝完成後,回到Visual Studio,再次執行Vue的[安裝遺漏的NPM套件]的動作,這回沒有報錯,靜止幾秒鐘,Visual Studio的輸出視窗顥示下列訊息,表示Vue套件安裝完成了,
https://ithelp.ithome.com.tw/upload/images/20181027/200176490q1E8uGY1Y.png
  我們再去看方案總管,可以看到vue@2.5.17的驚嘆號消失,變成可用的套件,
https://ithelp.ithome.com.tw/upload/images/20181027/20017649LnFMcXObX2.png
  而main.ts檔中的vue也不再是找不到的模組了。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649GX8kET7TOf.png
  接下來,我們再去把方案綏總管中,另外,兩個遺漏失的NPM套件安裝起來。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649ViJaOxQ9e7.png
  現在,我們來執行網站看看,如下圖所指點選[網頁伺服器];
https://ithelp.ithome.com.tw/upload/images/20181027/20017649EUaIFL09LS.png
  結果還是報錯,
https://ithelp.ithome.com.tw/upload/images/20181027/20017649f8BXhpYXTH.png
  說是找不到Node類型定義檔案,如下圖錯誤清單所示。
https://ithelp.ithome.com.tw/upload/images/20181027/20017649pejz1d19J9.png
  我今天先談到這裏,明天再來告訴各位怎麼排除這個問題。意思就是欲知後事如何,請看下回分解。


上一篇
(Day 21) 像蟑螂一樣的JavaScript
下一篇
(Day 23) 要成為大神,基本上,運氣和神力是不可或缺的。
系列文
跨平台開發利器- ASP.NET Core 30

2 則留言

0
海綿寶寶
iT邦大神 1 級 ‧ 2018-10-27 19:01:59

「師父師父,我研究了市面上所有的 javascript framework,發明出一套完美的 framework」
「那叫什麼?」
「還是 javascript」
/images/emoticon/emoticon73.gif

Node.js之父談Node.js的十大技術債
還好我還沒學
/images/emoticon/emoticon05.gif

froce iT邦大師 1 級 ‧ 2018-10-27 19:30:22 檢舉

不學沒辦法搞前端啊...嗚嗚。
JS真的很難學。
不過DENO似乎不是為了取代NODE的東西,方向性好像不太相同。

賽門 iT邦超人 1 級 ‧ 2018-10-27 20:19:35 檢舉

海綿寶果然深得JavaScript精髓啊!

0
SunAllen
iT邦高手 1 級 ‧ 2018-11-04 11:23:47

這跟,在台灣,要陥害一個人,就鼓勵他/她,去開民宿一樣.../images/emoticon/emoticon10.gif

賽門 iT邦超人 1 級 ‧ 2018-11-04 11:39:55 檢舉

/images/emoticon/emoticon01.gif

我要留言

立即登入留言