Wei 技術分享

前言 使用 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

一、介紹 Postman 是筆者時常拿來用於測試 API 的工具，支援 Get、Post、Delete、Put…等 Http Request Method。 二、操作步驟 圖、開啟瀏覽器 輸入 網址 https://www.postman.com/downloads/ > 按下 Download the App 圖、安裝 圖、按下 Skip signing in and take me straight to the app 圖、按下 File > 按下 Settings 圖、設定 SSL certificat verification 為 OFF 三、使用 Get 請求 Json 格式資料 圖、按下 ＋ > 輸入你的 測試網址 > 按下 Send > 即可於下方看到 結果 四、使用 Post 送出 Json 格式的資料 圖、按下 ＋ > 選擇 POST > 輸入你的 測試網址 > 選擇 Body > 選擇 raw > 選擇 JSON > 輸入 你的 JSON 測試資料 > 按下 Send > 即可於下方看到 結果 五、相關連結 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站 六、參考 postman

一、介紹 LESS 目的是擴充 CSS 語法，但無法直接被瀏覽器所使用，必須再經過 LESS 直譯器處理成 CSS 語法才可被瀏覽器支援，因此類似 CSS 的語法糖。 二、專案架構 圖、Visual Studio 2019 專案架構 三、安裝 圖、開啟 命令提攜字元 > 切換到 專案資料夾 > 輸入 指令 yarn add less less-loader css-loader style-loader 指令 yarn add less less-loader css-loader style-loader 四、操作步驟 圖、新增 main.less 原始碼 @width: 10px ; @height: @width + 10px ; #header { width : @width ; height : @height ; } 圖、修改 main.js 原始碼 const path = require ( 'path' ); const glob = require ( 'glob' ); let exps = [ { entry: glob.sync( "./Src/Less/**/*.less" ), output: { filename: 'main.css' , path: path.resolve( "./Content/Target/Css" ), }, module : { rules: [ { test: /\.less$/ , use: [ { loader: "style-loader" , }, { ...

JavaScript 程式碼品質檢測工具「Eslint」 一、介紹 Eslint 是 JavaScript 程式碼品質檢測工具，可與 webpack 整合，讓前端工程師所寫的語法較統一。 二、專案架構 圖、Visual Studio 2019 專案架構 圖、資料夾 三、安裝 圖、開啟 命令提攜字元 > 切換到 專案資料夾 > 輸入 指令 yarn add eslint-loader eslint 指令 yarn add eslint-loader eslint 四、操作步驟 圖、開啟 命令提攜字元 > 切換到 專案資料夾 > 輸入 指令 yarn run eslint --init 指令 yarn run eslint --init 圖、修改 main.js 原始碼 const path = require('path'); const glob = require('glob'); let files = glob.sync("./Src/Js/**/*.js"); let exps = []; for (let ind in files) { let fname = path.basename(files[ind]); let folder = path.dirname(files[ind]).replace('./Src/Js', './Content/Target/Js'); exps.push( { entry: files[ind], output: { filename: fname, path: path.resolve(folder), }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } ...

一、開發環境 整合開發環境：Visual Studio 2019 二、專案架構 圖、Visual Studio 2019 專案架構 圖、資料夾 三、Vue 安裝 圖、開啟 命令提攜字元 > 切換到 專案資料夾 > 輸入 指令 yarn add vue 四、操作步驟 圖、修改 main.js 原始碼 const path = require ( 'path' ); const glob = require ( 'glob' ); let files = glob.sync( "./Src/Js/**/*.js" ); let exps = []; for ( let ind in files) { let fname = path.basename(files[ind]); let folder = path.dirname(files[ind]).replace( './Src/Js' , './Content/Target/Js' ); exps.push( { entry: files[ind], output: { filename: fname, path: path.resolve(folder), }, resolve: { alias: { 'vue$' : 'vue/dist/vue.esm.js' } } }, ) } module .exports = exps; 圖、新增 test.js 原始碼 import Vue from 'vue' new Vue({ el: '#app' , data: { count: 'Test...

一、介紹 Webpack 是一個前端模組打包工具，在 nodejs 的環境下運行，打包和最佳化 JavaScript 或其他資源 供瀏覽器使用。 二、工具 node.js Yarn 三、 Visual Studio 2019 專案架構 圖、 Visual Studio 2019 圖、資料夾目錄 四、安裝 Webpack 圖、開啟 命令提攜字元 圖、切換目錄至你的專案資料夾 指令 cd D:\XXX\ 圖、初始化目錄 指令 npm init 圖、安裝 Webpack 指令 yarn add webpack webpack-cli 圖、安裝 glob 指令 yarn add glob 五、操作步驟 圖、新增 main.js 檔案 原始碼 const path = require ( 'path' ); const glob = require ( 'glob' ); module .exports = { entry: glob.sync( "./Src/Js/**/*.js" ), output: { filename: '[name].js' , path: path.resolve(__dirname, '../Content/Target/Js' ), }, }; 圖、新增 test.js 檔案 原始碼 console .log( "a" ); 圖、開啟 package.json 檔案 package.json 由 yarn 產生，可以拉至專案內。 圖、修改 package.json 的 scripts 區段，新增 dev 、 build json "dev": "webpack --watch --mode development --config .\\Src\\main.js", "build": "webpack --mode development --config .\\Src\\main.js" ...