Wei 技術分享

一、介紹 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" ...

一、介紹 安裝 node.js 時會一同安裝 npm 套件管理工具，但用 npm 下載套件時會相當緩慢，因此 Yarn 誕生，會讓使用者減少下載套件的時間。 二、操作步驟 圖、開啟瀏覽器輸入網址 https://classic.yarnpkg.com/zh-Hant/ > 安裝 Yarn 圖、按下 下載安装程式 圖、按下 Next 圖、勾選同意 License > 按下 Next 圖、按下 Next 圖、按下 Install 圖、按下 Finish 圖、開啟 命令提攜字元 圖、輸入 yarn -v yarn -v 是看 yarn 的版本 cmd 指令 yarn -v 三、相關連結 讓 JavaScript 能在伺服器端執行的環境 「node.js」 四、參考 yarn

一、介紹 node.js 讓 JavaScript 改頭換面，讓它可以成為伺服器端的程式語言，真是好神奇呀，趕快介紹如何安裝它吧。 二、操作步驟 圖、開啟瀏覽器輸入網址 https://nodejs.org/en/ > 下載 LTS 版本 圖、安裝 > 按 next 圖、按 next 圖、選擇安裝路徑 > 按 next 圖、按 next 圖、按 next 圖、按 Install 圖、安裝 圖、按 Finish 圖、開啟 命令提攜字元 圖、輸入指令 node -v node -v 是檢視目前 node.js 版本 cmd 指令 node -v 三、相關連結 「Windows PowerShell」介紹 四、參考 nodejs