快速開發 Vue.js 工具「Vue CLI」安裝教學

-

一、介紹

Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。

二、安裝

Vue CLI 安裝需透過 npm 或 yarn 套件管理工具來安裝，筆者會一同介紹 node.js 、 yarn 的安裝。

安裝步驟如下

  • node.js ( 會一同安裝 npm )
  • yarn ( 透過 npm 安裝 )
  • vue cli ( 透過 yarn 安裝 )

node.js 安裝

筆者使用環境為 windows 10 、 node.js(14.15.1)，因此筆者會介紹在 windows 10 安裝 v14.15.1，詳細安裝可參考 文章

  1. 進入 https://nodejs.org/download/release/v14.15.1/ 依據作業系統選擇不同版本


依照 作業系統 建議選擇

  • IOS 選擇 副檔名為 pkg 的檔案
  • Windows 選擇 副檔名為 msi 的檔案

依照 CPU 位元 建議選擇

  • 64位元 選 x64
  • 32位元 選 x86
  1. 安裝 node.js (一同安裝 npm)


  1. 開起 cmd 下指令 node -v、node -v 檢查是否安裝成功


yarn 安裝

快速安裝套件的管理工具 yarn，詳細參考文章

  1. 開起 cmd 下指令，即可安裝 yarn
npm install --global yarn
  1. 重開 cmd 下指令 yarn -v 檢查是否安裝成功


vue cli 安裝

安裝好 node.js、npm、yarn 後，就可以安裝 Vue Cli

  1. 開起 cmd 下指令，即可安裝 Vue Cli
yarn global add @vue/cli
  1. 重開 cmd 下指令 vue --version 檢查是否安裝成功


三、相關連結

  1. 「Visual Studio Code」安裝與擴充工具安裝
  2. 快速開發 Vue.js 工具「Vue CLI」安裝教學
  3. 快速的套件管理工具「Yarn」
  4. 讓 JavaScript 能在伺服器端執行的環境 「node.js」
  5. 使用「Vue Cli」建立、打包、安裝 專案

四、參考連結

  1. 安裝 node.js v14.15.1
  2. yarn
  3. node.js
  4. vue cli

留言

張貼留言

這個網誌中的熱門文章

「綠界(Ecpay)」金流介接教學

-
圖片
一、介紹 綠界科技Ecpay 是第三方支付，提供金流、信用卡代收代付的服務。 二、開發工具 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、綠界測試資訊 此教學只提供綠界測試環境，正式環境請參考 完整版-全方位金流API技術文件 1. 測試後台 網址： https://vendor-stage.ecpay.com.tw 特店編號：2000132 廠商管理後台登入帳號：stagetest1234 廠商管理後台登入密碼：test1234 身分證件末四碼/統一編號：53538851 HashKey：5294y06JbISpM5x9 HashIV：v77hoKGq4kWxNNIS 2. 測試信用卡 卡號：4311-9522-2222-2222 安全碼：222 信用卡測試有效月/年：MM/YYYY 值請大於現在當下時間的月/年 四、登入綠界測試後台 圖、開啟 https://vendor-stage.ecpay.com.tw ，輸入測試帳號 stagetest1234 ，按下 繼續 圖、輸入測試帳號、密碼後，在按 登入 圖、按 一般訂單查詢 ，按 全方位金流訂單 ，即可查詢 訂單資訊 五、範例程式碼 C# MVC的範例，有 產生訂單、取得訂單資訊、取得虛擬帳號 …等功能。 /// <summary> /// MVC Controller /// </summary> public class EcpayController : Controller { /// <summary> /// 取得付款資訊 /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult PayInfo(string id) { var cache = MemoryCache.Default; var cacheData = cache.Get(id);
閱讀完整內容

使用「NLog」來記錄應用程式的大小事吧

-
圖片
一、介紹 NLog 是 .net 下的日誌套件，因為只要一句程式碼即可紀錄日誌，因此筆者常使用它記錄應用系統的錯誤、資訊…等。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、 Nuget 安裝套件 NLog NLog.Config NLog.Schema 圖、套件清單 四、操作步驟 圖、修改 NLog.config 的 target 、 logger 元素 NLog.config 設定 < targets > < target xsi:type = "File" name = "f" fileName = "${basedir}/logs/${shortdate}.log" layout = "${longdate} ${uppercase:${level}} ${message}" /> </ targets > < rules > < logger name = "*" minlevel = "Debug" writeTo = "f" /> </ rules > 圖、使用 nlog 原始碼 c# public void LogTest() { var log = LogManager.GetCurrentClassLogger(); log.Info($"Test"); } 圖、執行後結果 五、相關連結 「NLog」與「Sql Server」資料庫的完美搭配 六、參考 NLog Tutorial NLog Nuget
閱讀完整內容

使用 Visual Studio 2019 實作「RESTful API」

-
圖片
一、介紹 REST 是Roy Thomas Fielding博士於2000年博士論文提出的一種軟體架構風格，目的是讓不同軟體、程式於網路互相傳遞資訊。因為它是一種風格而不是規範，依據筆者的經驗會依照當時的專案或公司規定而決定是否完全遵守。 二、專案架構 圖、Visual Studio 2019 專案架構 三、常用的 HTTP Method 代表用意 GET 讀取 PUT 更新 DELETE 刪除 POST 新增 四、RESTful 路由應用 五、使用 Visual Studio 2019 建置 RESTful API 圖、修改 WebApiConfig.cs 原始碼(C#) public static class WebApiConfig { public static void Register(HttpConfiguration config) { // 針對 JSON 資料使用 camel 案例。 config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); // Web API 設定和服務 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == &quo
閱讀完整內容

使用「ADO.NET」 進行資料庫的讀取、新增、修改、刪除的操作

-
圖片
一、前言 ADO.NET 是微軟旗下用來連接 資料來源 (例如 Sql Server、XML…等)，並且可以讀取、新增、修改、刪除其中資料的技術。而後 微軟以 ADO.NET 為基礎 推出 Entity Framework ，以筆者的經驗來說，新的專案較常使用 Entity Framework ，但舊的專案則使用 ADO.NET ，因此為了方便記憶而撰寫文章。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、範例資料庫 圖、範例資料庫 四、讀取 範例皆使用 參數型 方式操作資料庫，避免 Sql Injection 問題。 圖、範例程式碼 原始碼(C#) var cs = WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString; using (var sc = new SqlConnection(cs)) { sc.Open(); var cc = sc.CreateCommand(); cc.CommandText = $@"SELECT [a1],[a2] FROM [Test] where [Seq] = @Seq"; cc.Parameters.AddWithValue("@Seq", "1"); var ret = string.Empty; var reader = cc.ExecuteReader(); while (reader.Read()) { ret = $"a1={reader[0]}，a2={reader[1]}"; } reader.Close(); return ret; } 圖、執行結果 五、新增 範例皆使用 參數型 方式操作資料庫，避免 Sql Injection 問題。 圖、範例程式碼 原始碼(C#) var cs = WebConfigurationManager.ConnectionStrings[&q
閱讀完整內容

使用「LINE Messaging API」發送 line 訊息

-
圖片
一、介紹 LINE 是由LINE株式會社所開發的即時通訊平台，也是目前台灣目前最高使用率的社群平台。 二、登入 LINE console 圖、打開瀏覽器，進到 LINE Developers Console 登入頁 三、建立 Provider 和 Channel 圖、按下 Create ，輸入 Provider name ，再按下 Create 圖、按下 Create a Message API Channel 圖、輸入 Channel name 圖、Channel 資訊 四、webhook 每當LINE用戶加您的 Channel 為好友或是發送訊息，LINE平台透過 HTTP POST 發送 webhook 事件資訊 至您 LINE Developers Console 中所指定的 webhook URL 。 圖、點 Messaging API ，往下拉即可看到 webhook 相關設定 webhook 事件資訊 webhook 事件資訊為JSON格式的資料 點 webhook 的 Verify 按鈕，則會收到如下格式的 webhook 事件資訊。 圖、Verify 按鈕 {“events”:[],“destination”:“XXX”} 被加入好友，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“follow”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”}],“destination”:“XXX”} 其中 userId 為 加入您好友的用戶ID，此ID會使用於發送訊息。 發送訊息時，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“message”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”,“message”:{“type”:“sticker”,“id”:“XXX”,“stickerId”:“XXX”,“packageId”:“XXX”,“stic
閱讀完整內容

「Selenium」前端 UI 自動化測試、爬蟲程式 最佳利器

-
圖片
一、介紹 「Selenium」 讓瀏覽器自動化的工具，可運用於爬蟲程式、前端 UI 自動化測試、Web 應用程式管理..等，支援多種語言如 C#，Java，Perl，PHP，Python..等。 範例程式將介紹如何使用 C# 語言運用 Selenium 撰寫 自動載圖程式 (簡易爬蟲)，讓應用程式開啟瀏覽器，前往 Google 圖片 ，下載 5 張 JPEG 圖檔。 二、 Nuget 套件 Selenium.WebDriver Selenium.WebDriver.ChromeDriver 三、教學步驟 圖一、安裝 Selenium 套件 。 圖二、貼上範例程式 var driver = new ChromeDriver(); //瀏覽器 轉址至 Google圖片 driver.Url = @"https://www.google.com.tw/imghp?hl=zh-TW"; //輸入關鍵字 "Selenium" var searchInput = driver.FindElementByCssSelector(@".gLFyf"); searchInput.SendKeys("Selenium"); //按下 Enter searchInput.SendKeys(Keys.Enter); //抓取圖片清單 var imgTags = driver.FindElementsByTagName("img").ToList(); //取得 5張 jpeg 圖片 var images = imgTags.Select(x => x.GetAttribute("src")).Where(x => x!=null && x.StartsWith("data:image/jpeg;base64,")).Take(5).ToList(); //下載圖片 foreach(var image in images) { byte[] bytes = Convert.FromBase64String(image.Replace("data:image/jpe
閱讀完整內容

「Katalon Recorder」簡化測試腳本撰寫的工具

-
圖片
一、介紹 「Katalon Recorder」 是一款錄製 Web UI 測試 工具，安裝於 Chrome、FireFox 瀏覽器。 Katalon Recorder 錄製瀏覽器的操作過程，並可產生 C#, Java, Python 的測試原始碼，讓工程師更易撰寫 WEB UI 測試。 此文章將介紹使用 Katalon Recorder 錄製腳本，並把腳本移至 Visual Studio 2019 做單元測試。 二、腳本內容 開啟 Google 搜尋關鍵字 測試 ，檢視第二筆搜尋結果的描述是否為 「這是一個根據弗洛伊德焦慮類型理論…」 。 三、 Nuget 套件 MSTest.TestAdapter ( 測試專案預設會安裝 ) MSTest.TestFramework ( 測試專案預設會安裝 ) Selenium.WebDriver Selenium.WebDriver.ChromeDriver 四、教學步驟 圖一、安裝套件。 圖二、 Chrome 瀏覽器安裝 Katalon Recorder 。 圖三、開啟 Katalon Recorder ( 注意右上角的 ICON ) 圖四、開始錄製腳本 圖五、操作瀏覽器(此時 Katalon Recorder 就會錄製腳本) 圖六、停止錄製 圖七、產生 C# 程式碼 圖八、將程式碼貼到 測試專案 圖九、將 FirefoxDriver 改成 ChromeDriver ，讓單元測試使用 Chrome 瀏覽器。 圖十、執行 測試 。 圖十一、測試結果。 四、相關連結 Selenium 前端 UI 自動化測試、爬蟲程式 最佳利器 五、參考 Katalon Recorder Katalon Recorder 下載 ( Chrome 擴充功能 )
閱讀完整內容

如何傳送訊息至「Teams」的 Channel

-
圖片
一、介紹 Microsoft Teams 為微軟旗下的通訊軟體，它整合聊天、視訊、Office 365、Execel、Word、OneNote…等功能。 比爾蓋茲提出 Skype for Business 的想法，因此有了 Microsoft Teams 這個產品，為了與 Slack…等商用軟體相抗衡。 二、 Nuget 安裝 Newtonsoft.Json 12.0.3 三、Incoming WebHook 設定 訊息可藉由 Teams 的應用程式 Incoming WebHook 傳輸訊息 圖、點擊 … > 搜尋 Incoming WebHook > 點擊 Incoming WebHook 圖、點擊 新增至團隊 圖、選擇 你的頻道 > 點擊 設定連結器 圖、輸入 WebHook 名稱 > 點擊 建立 圖、複製 WebHook Url > 點擊 完成 四、操作步驟 圖、貼上範例碼，修改成你的 WebHook Url，執行後即可在 Teams 看到 測試訊息 的訊息 範例碼 using (var wc = new WebClient()) { wc.Headers.Add("Content-Type", "application/json"); var data = new { text = "測試訊息" }; var jsonStr = JsonConvert.SerializeObject(data); var bytes = System.Text.Encoding.UTF8.GetBytes(jsonStr); var res = wc.UploadData("https://你的 WebHook Url", bytes); Console.WriteLine(System.Text.Encoding.UTF8.GetString(res)); } 圖、執行結果 五、相關連結 使用「Visual Studio 2019」建置 主控台 Console 應用程式 使用「LINE Messaging API」發送 line 訊息
閱讀完整內容

在Visual Studio 2019 使用 Subversion 的客服端工具「AnkhSVN2019」

-
圖片
前言 使用 Subversion 版控，大多數是使用客服端工具 TortoiseSVN ，如果開發人員的IDE 是使用 Visual Studio 2019 則可考慮使用 AnkhSVN2019 。 安裝 圖、延伸模組 > 管理延伸模組 圖、下載 AnkhSVN2019 圖、按下 關閉 圖、關閉 Visual Studio 2019 圖、安裝 圖、按下 Modify 操作步驟 圖、檢視 > Repository Explorer 圖、新增 SVN Server 圖、輸入網址 圖、按下 Checkout from Subversion 圖、輸入 To Path 圖、下載中 圖、開啟資料夾 > 按下 XXX.sln 圖、工具 > 選項 圖、Source Control > 選擇 AnkhSVN2019 圖、跑出 Pending Changes 圖、修改檔案 > 滑鼠右鍵 > Open in Visual Studio 圖、結果 相關連結 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站 「Git」基礎操作 「Git」安裝 參考 subversion tortoisesvn AnkhSVN2019
閱讀完整內容