一、準備
這篇文章本應該於2023年7月底發出來，在家裏忙來忙去沒顧得上，直到今天才有時間寫這段文字。
原來web項目的開發是基於Vue2+Webpack+ElementUI技術棧，Vue官方也說了Vue2會支持到2023年12月31日，所以是時候升級技術了，於是就有了本篇文章內容Vue3+Vite+ElementPlus的升級過程。
廢話不多說了，直接上項目源碼：
Gitee：https://gitee.com/kinbor/vue3_vite_kbnet.eap
Github：https://github.com/kinbor/Vue3_Vite_kbnet.eap
特別提示：由於gitee和github上README.md文件內容排版不好，建議將項目或README.md文件下載下來看，或者直接看下面的內容。
原本想弄個效果看看，只是打包後不包含mock，所以進入不到系統內部了，還是自己下載源碼運行看效果吧（登錄ID和密碼隨意），同時提供殘廢的預覽版地址：http://120.55.169.27
二、README.md
1 一、項目信息 2 1.項目名稱：KBNET.EAP表示KBNET開發平臺下的EAP項目，EAP即英文Enterprise Application Platform。 3 2.項目說明：本項目只是一個簡單的開發框架，目的是爲了將基於Vue3的開發技術集成到一起，然後相互搭配和調度，爲實際業務功能開發打下堅實的基礎。 4 3.更多信息：本項目以PC機上的瀏覽器爲基準設計開發，倘若使用智能設備（如手機等）訪問系統，體驗感可能會降低，甚至於某些功能無法使用。 5 6 二、開發環境 7 1.本項目是在VSCode工具下設計編程，是以Vue3+Vite2爲基礎，因此，在編譯運行項目時，確保安裝相應的編程工具。 8 2.如果您想閱讀項目源碼，或者基於此項目模型開發新項目，請首先確認對Vue技術棧的掌握能力，以及謹慎閱讀並審覈過項目源碼，確保項目源碼的安全性等事項。 9 3.由於Vue的開發依賴Nodejs工具，所以您還需要在您的計算機上下載並安裝Nodejs。 10 4.下載本項目源碼，且安裝了開發環境相應的工具，就可以安裝依賴的軟件包 11 npm install 12 5.運行模式，通過運行npm run命令，系統提示Vite提供了三種命令：dev命令用於開發調試，build用於正式發佈，preview用於打包預覽（看一下實際效果）。 13 npm run dev 14 npm run build 15 npm run preview 16 6.安裝VSCode工具Vue開發相關插件，這些插件有利於快速編碼、以及代碼檢驗。 17 ESLint 18 Prettier - Code formatter 19 Html CSS Support 20 JavaScript(ES6)code snippets 21 Live Server 22 Vue3 Snippets 23 Vue Language Features 24 Vue VSCode Snippets 25 ... 26 一般情況，大家還會安裝以下插件 27 JQuery Code Snippets 28 Bootstrap4,Font awesome4 Snippets 29 Bootstrap5,Font awesome5 Snippets 30 React/Redux/React-Native snippets 31 Go 32 C# 33 ... 34 7.代碼格式化，沒患強迫症的碼農不算合格的程序員，多一個空格或空行都會感覺難受，爲了統一代碼格式，需要使用ESLint+Prettier進行約束和格式化 35 npx prettier --write . #.表示所有文件 36 8.瀏覽器支持度，具體支持那種類型或哪個版本的瀏覽器，是由Vue框架決定，Vue3已不再支持IE瀏覽器，支持的主瀏覽器包含： 37 Edge>=88 | Firefox>=78 | Chrome>=87 | Safari>=14 38 39 三、工具插件 40 1.npm常用命令 41 1.1.安裝模塊：npm install xxxx@version 或 npm install xxxx@lastest 42 1.2.卸載模塊：npm uninstall xxxx 43 1.3.更新模塊：npm update 44 1.4.檢查模塊是否已經過時：npm outdated 45 1.5.查看安裝的模塊：npm ls 46 1.6.查看包的安裝路徑：npm root 47 1.7.強制清理模塊緩存：npm cache clean --force 48 1.8.查看模塊版本：npm version 49 2.初始化項目：npm init vite，然後按照提示輸入正確的內容。 50 3.vue-router 51 3.1.安裝指令：npm install vue-router@latest--save 52 3.2.在src目錄下創建router文件夾，在文件夾下創建index.js文件 53 3.3.編寫index.js內容 54 3.4.修改main.js文件，引入vue-router 55 import \* as Vue from 'vue' 56 import App from './App.vue' 57 import router from './router/index' 58 59 const app=Vue.createApp(App) 60 app.use(router) 61 app.mount('#app') 62 4.vuex 63 4.1.安裝指令：npm install vuex@latest --save 64 4.2.在src下創建目錄store文件夾，然後在其下創建index.js文件 65 4.3.編寫index.js內容 66 4.4.修改main.js文件，引入vuex 67 import * as Vue from 'vue' 68 import App from './App.vue' 69 import store from './store/index' 70 71 const app=Vue.createApp(App) 72 app.use(store) 73 app.mount('#app') 74 5.elementplus 75 5.1.安裝指令：npm install element-plus --save 76 5.2.修改main.js文件，引入elementplus 77 import * as Vue from 'vue' 78 import App from './App.vue' 79 import ElementPlus from 'element-plus' 80 import 'element-plus/theme-chalk/index.css' 81 import zhCn from 'element-plus/es/locale/lang/zh-cn' 82 83 const app=Vue.createApp(App) 84 app.use(ElementPlus,{locale:zhCn}) 85 app.mount('#app') 86 5.3.Icon圖標 87 a.安裝指令：npm install @element-plus/icons-vue 88 b.註冊圖標，在main.js文件中 89 import * as ElementPlusIconsVue from '@element-plus/icons-vue' 90 const app = createApp(App) 91 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { 92 app.component(key, component) 93 } 94 6.axios 95 6.1.安裝指令：npm install axios 96 6.2.配置跨域請求事項，修改vite.config.js文件 97 import {defineConfig} from 'vite' 98 import vue from '@vitejs/plugin-vue' 99 import path from 'path' // 需安裝此模塊 100 import cfgSetting from './src/configs/settings' 101 export default defineConfig({ 102 plugins: [ 103 vue() 104 ], 105 resolve: { 106 alias: { 107 '@': path.resolve(__dirname, 'src') 108 } 109 }, 110 server: { 111 host: cfgSetting.spaAddress, 112 port: cfgSetting.spaPort, 113 strictPort: false, //設爲true時端口被佔用則直接退出，不會嘗試下一個可用端口 114 cors: true, //爲開發服務器配置CORS, 默認啓用並允許任何源 115 open: true, //服務啓動時自動在瀏覽器中打開應用 116 hmr: false, //禁用或配置 HMR 連接 117 //傳遞給 chockidar 的文件系統監視器選項 118 watch: { 119 ignored:["!**/node_modules/your-package-name/**"] 120 }, 121 proxy: { 122 [cfgSetting.apiType]: { 123 target: cfgSetting.svcAddress, //實際請求地址 124 changeOrigin: true, 125 ws: true, 126 rewrite: (path) => path.replace(cfgSetting.apiType, '') 127 } 128 }, 129 https: cfgSetting.svcIsHttps 130 } 131 }) 132 7.i18n 133 7.1.安裝指令：npm install vue-i18n 134 7.2.在src目錄下創建locales目錄，並添加index.js，zh_cn.js，en_us.js三個文件 135 7.3.編輯index.js文件 136 import { createI18n } from 'vue-i18n' //引入vue-i18n組件 137 import zh_cn from './zh_cn' //中文語言包 138 import en_us from './en_us' //英文語言包 139 // 實例化I18n 140 const i18n = createI18n({ 141 legacy: false, 142 globalInjection: true, 143 locale: "zh_cn", // 初始化配置語言 144 messages: { 145 zh_cn, 146 en_us 147 } 148 }) 149 export default i18n 150 7.4.編輯zh_cn.js文件 151 export default { 152 message: { 153 Home: '首頁', 154 About: '關於' 155 } 156 } 157 7.5.編輯en_us.js文件 158 export default { 159 message: { 160 Home: 'Home', 161 About: 'About' 162 } 163 } 164 7.6.修改main.js文件，引入vue-i18n 165 import * as Vue from 'vue' 166 import App from './App.vue' 167 import i18n from './locales/index' 168 169 const app=Vue.createApp(App) 170 app.use(i18n) 171 app.mount('#app') 172 7.7.測試效果，修改App.vue文件 173 <template> 174 <img alt="Vue logo" src="@/assets/logo.png" /> 175 <a href="javascript:void(0)" @click="change('zh_cn')">中文</a> -- 176 <a href="javascript:void(0)" @click="change('en_us')">English</a> 177 <div>{{$t("message.Home")}}---{{$t("message.About")}}</div> 178 <router-view /> 179 </template> 180 <script> 181 import { useI18n } from 'vue-i18n' 182 export default ({ 183 name: "App", 184 setup() { 185 const { locale } = useI18n() 186 function change(type) { 187 locale.value = type; 188 } 189 return { 190 change 191 } 192 } 193 }) 194 </script> 195 8.mock 196 8.1.安裝指令 197 a.安裝mockjs：npm install mockjs --save-dev 198 b.安裝vite-plugin-mock：npm i vite-plugin-mock cross-env -D 199 8.2.在 package.json 中設置環境變量 200 將"dev": "vite"改爲“"dev": "cross-env NODE_ENV=development vite"” 201 8.3.在 vite.config.js 中添加 mockjs 插件 202 import { defineConfig } from "vite" 203 import vue from "@vitejs/plugin-vue" 204 import { viteMockServe } from "vite-plugin-mock" 205 206 export default defineConfig({ 207 plugins: [ 208 vue(), 209 viteMockServe({ 210 supportTs: false //如果使用typescript開發，則需要配置supportTs爲true 211 }) 212 ] 213 }) 214 8.4.在根目錄創建 mock 文件夾，建立getData.js在其中創建需要的數據接口 215 export default [ 216 { 217 url: "/api/getUsers", 218 method: "get", 219 response: () => { 220 return { 221 code: 0, 222 message: "ok", 223 data: ["張三", "李四"], 224 } 225 } 226 } 227 ] 228 9.sass 229 9.1.安裝指令：npm i sass -D 230 9.2.使用sass，語法：<style lang="scss"></style> 231 10.gzip 232 10.1.安裝指令：npm i vite-plugin-compression -D 233 10.2.修改vite.config.js文件，引入插件 234 import { defineConfig } from 'vite' 235 import vue from '@vitejs/plugin-vue' 236 import viteCompression from 'vite-plugin-compression' 237 import path from 'path' 238 export default defineConfig({ 239 plugins: [ 240 vue(), 241 viteCompression({ 242 threshold: 10240, //體積大於10kb壓縮 243 filter: /\.(js|mjs|json|css|html)$/i, 244 algorithm: 'gzip', //壓縮算法，gzip|brotliCompress|deflate|deflateRaw 245 disable: false, 246 deleteOriginFile: false //是否刪除源文件 247 }) 248 ], 249 resolve: { 250 alias: { 251 '@': path.resolve(__dirname, 'src') 252 } 253 } 254 }) 255 11.copy 256 11.1.安裝指令：npm install rollup-plugin-copy -D 257 11.2.修改vite.config.js文件，引入插件 258 import { defineConfig } from 'vite' 259 import vue from '@vitejs/plugin-vue' 260 import copy from 'rollup-plugin-copy' 261 import path from 'path' 262 export default defineConfig({ 263 plugins: [ 264 vue(), 265 copy({ 266 targets: [ 267 { src: 'src/static', dest: 'dist' }, //執行拷貝 268 ], 269 hook: 'writeBundle' // notice here 270 }) 271 ], 272 resolve: { 273 alias: { 274 '@': path.resolve(__dirname, 'src') 275 } 276 } 277 }) 278 12.eslint+prettier 279 12.1.eslint 280 12.1.1.安裝指令：npm i eslint -D 281 12.1.2.配置eslint：執行npx eslint --init命令，然後按照提示完成一系列操作來創建配置文件 282 12.1.3.修改.eslintrc.cjs文件，編寫配置信息 283 12.1.4.在VSCode使用ESlint，需要安裝插件：ESLint 284 12.1.5.使用eslint格式化代碼 285 a.在package.json的scripts屬性裏配置 格式化 命令 286 "scripts": { 287 "lint": "eslint --fix --ext .js,.vue src" 288 } 289 b.終端執行命令 290 npm run lint 291 12.2.prettier 292 12.2.1.安裝指令：npm i prettier -D 293 12.2.2.配置prettier 294 { 295 "useTabs": false, //使用tab縮進，默認false 296 "tabWidth": 2, //tab縮進大小,默認爲2空格數 297 "printWidth": 100, //換行長度，默認80 298 "singleQuote": true, //使用單引號代替雙引號 299 "trailingComma": "none", //是否在多行逗號分隔語法中，在最後一個元素後面加逗號 300 "bracketSpacing": true, //在對象，數組括號與文字之間加空格 "{ foo: bar }" 301 "semi": false, //每行末尾自動添加分號 302 "endOfLine": "auto" //換行符類型 303 } 304 12.2.3.VSCode編輯器，安裝Prettier插件：Prettier - Code formatter 305 12.2.4.使用其命令格式化代碼文件 306 #格式化所有文件（. 表示所有文件） 307 npx prettier --write . 308 12.3.兼容問題 309 12.3.1.解決eslint和prettier衝突 310 a.安裝插件：npm i eslint-plugin-prettier eslint-config-prettier -D 311 b.修改.eslintrc.js配置文件，添加prettier插件 312 module.exports = { 313 extends: [ 314 'plugin:vue/essential', 315 'airbnb-base', 316 'plugin:prettier/recommended' // 添加 prettier 插件 317 ], 318 } 319 13.postcss 320 13.1.安裝指令：npm install postcss postcss-preset-env -D 321 13.2.配置vite.config.js文件 322 import { defineConfig } from 'vite' 323 import vue from '@vitejs/plugin-vue' 324 import postcssPresetEnv from 'postcss-preset-env' 325 326 export default defineConfig({ 327 base: './', 328 publicDir: 'public', // 靜態資源服務的文件夾 329 logLevel: 'info', // 控制檯輸出的級別 info 、warn、error、silent 330 clearScreen: true, // 設爲false 可以避免 vite 清屏而錯過在終端中打印某些關鍵信息 331 css: { 332 postcss: { 333 plugins: [postcssPresetEnv] 334 } 335 } 336 }) 337 14.svgIcon 338 14.1.創建目錄和文件結構 339 目錄：./src/styles 340 目錄：./src/styles/svg 341 目錄：./src/styles/svg/svgs 342 文件：./src/styles/svg/index.vue 343 文件：./src/styles/svg/svgBuilder.js 344 14.2.安裝svg插件 345 指令：npm install svg-sprite-loader -D 346 14.3.編寫./src/styles/svg/index.vue文件 347 14.4.編寫./src/styles/svg/svgBuilder.js文件，需要安裝fs模塊：npm install fs 348 14.5.編輯main.js文件，引入./src/styles/svg/index.vue文件 349 import * as Vue from 'vue' 350 import SvgIcon from './icons/index.vue' 351 import App from './App.vue' 352 353 const app = Vue.createApp(App) 354 app.component('svg-icon', SvgIcon) 355 app.mount('#app') 356 14.6.配置vite.config.js文件，使svgBuilder.js文件功能啓用 357 import { defineConfig } from 'vite' 358 import vue from '@vitejs/plugin-vue' 359 import { svgBuilder } from './src/styles/svg/svgBuilder' 360 361 export default defineConfig({ 362 base: './', 363 plugins: [ 364 vue(), 365 svgBuilder('./src/styles/svg/svgs/') // 這裏已經將src/styles/svg/svgs/下的svg全部導入 366 ] 367 }) 368 14.7.使用效果 369 <svg-icon icon-class="login-user" /> 370 或 371 <svg-icon :icon-class="passwordType === 'password' ? 'password-eye' : 'password-eye-open'" /> 372 15.nprogress 373 15.1.安裝指令：npm install nprogress -S 374 15.2.在/src/utils文件夾下，創建nprogress.js文件，編寫內容。 375 16.js-cookie 376 16.1.安裝指令：npm install js-cookie 377 16.2.使用方式： 378 import Cookies from "js-cookie" 379 // 寫入cookie 380 Cookies.set('name', 'value') // 創建簡單的cookie 381 Cookies.set('key', 'value', { expires: 10 }) // 通常會以當前時間+多少毫秒，如const newDate=new Date(new Date().getTime() + 20 * 60 * 1000) 382 Cookies.set('key', 'value', { path: '', domain: '' }) //可以通過配置path等 383 Cookies.set('key', 'value', { expires: 10, path: '', domain: '' }) 384 // 讀取 385 Cookies.get('name') 386 // 刪除某項cookie值 387 Cookies.remove('name') // 刪除普通的cookie 388 Cookies.remove('name', { path: '' }) // 刪除存了指定頁面path的cookie 389 390 17.echarts 391 17.1.安裝指令：npm install echarts vue-echarts 392 17.2.使用方式：用 npm 與 Vue Loader 基於 ES Module 引入（按需引用） 393 import ECharts from 'vue-echarts' 394 //手動引入 ECharts 各模塊來減小打包體積 395 import 'echarts/lib/chart/bar' 396 import 'echarts/lib/component/tooltip' 397 // 註冊組件後即可使用 398 import Vue from 'vue' 399 Vue.component('v-chart', ECharts) 400 或 401 export default { 402 components: { 403 'v-chart': ECharts 404 } 405 } 406 407 四、配置規則 408 1.部署配置 409 1.1.IIS服務器 410 a.在生產環境或開發測試環境，如若以IIS作爲宿主程序，那麼一定要在站點的根目錄創建一個名稱爲web.config的配置文件，且內容爲下述信息。 411 b.因爲此項目是單頁面程序，如果在瀏覽器地址欄手動輸入非首頁地址（http://www.xxxx.com/xxxx/xxxxxx）或者刷新非首頁地址頁面請求會直接發往服務器，而服務器找不到目標文件會報404或500錯誤（特別是history路由模式下）。 412 c.配置信息 413 <?xml version="1.0" encoding="UTF-8"?> 414 <configuration> 415 <system.webServer> 416 <rewrite> 417 <rules> 418 <rule name="Handle History Mode and custom 404/500" stopProcessing="true"> 419 <match url="(.*)" /> 420 <conditions logicalGrouping="MatchAll"> 421 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 422 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 423 </conditions> 424 <action type="Rewrite" url="/" /> 425 </rule> 426 </rules> 427 </rewrite> 428 </system.webServer> 429 </configuration> 430 d.安裝UrlWrite模塊，這一步是關鍵，否則上述配置無效。 431 1.2.nginx服務器 432 a.配置信息 433 location / { 434 try_files $uri $uri/ /index.html; 435 } 436 2.Http2Https 437 2.1.IIS服務器：在http網站下的web.config下添加如下規則。 438 <?xml version="1.0" encoding="UTF-8"?> 439 <configuration> 440 <system.webServer> 441 <rewrite> 442 <rules> 443 <rule name="HTTP2HTTPS" stopProcessing="true"> 444 <match url="(.*)" /> 445 <conditions> 446 <add input="{HTTPS}" pattern="off" ignoreCase="true" /> 447 </conditions> 448 <action type="Redirect" redirectType="Found" url="https://{HTTP_HOST}/{R:1}" /> 449 </rule> 450 </rules> 451 </rewrite> 452 </system.webServer> 453 </configuration> 454 2.2.nginx服務器：使用rewrite 將請求過來的 http URL直接重寫成 https 455 server { 456 listen 80; 457 #填寫綁定證書的域名 458 server_name www.xxx.com; 459 #強制將http的URL重寫成https 460 rewrite ^(.*) https://$server_name$1 permanent; 461 } 462 3.令牌驗證碼解釋 463 50000：不支持的授權方式 464 50001：授權信息驗證無效 465 50002：沒有權限請求目標資源 466 50005：授權信息已失效 467 50006：權限驗證失敗(即請求者沒有權限) 468 50010：授權信息已失效 469 50011：請求來源與授權不符 470 50012：令牌已失效 471 50013：權限驗證失敗(即請求者沒有權限) 472 50020：錯誤的加密數據 473 50021：無效的加密數據 474 50023：數據解密異常 475 50025：無法完成數據加密 476 50026：無法獲取密鑰信息 477 50027：數據加密異常 478 50030：請求無效，未知的程序類型 479 4. 480 481 五、疑難雜症 482 1.無法安裝軟件包，總是失敗的解決辦法 483 1.1.刪除node_modules文件夾，重新安裝 484 1.2.強制清除緩存npm cache clean -force 485 1.3.以管理員權限執行安裝命令 486 2.依賴包升級問題 487 2.1.browserslist和caniuse-lite升級問題 488 a.編譯警告：Browserslist: caniuse-lite is outdated. Please run next command `npm update` 489 b.解決辦法： 490 1.刪除node_modules目錄下的caniuse-lite和browserslist兩個文件夾 491 2.npm i caniuse-lite browserslist，注意package.json文件中的dependencies對象會增加依賴關係，刪了即可 492 3.node-sass兼容性問題 493 3.1.npm update後會造成node-sass和nodejs不兼容問題 494 a.編譯錯誤：Cannot find module 'node-sass' 495 b.解決方法： 496 1.安裝較新的Node.js 497 2.然後安裝node-sass，命令：cnpm install node-sass@latest，或者安裝指定版本（如：cnpm install [email protected]） 498 4.sass-loader版本太低警告 499 a.編譯警告：WARN A new version of sass-loader is available. Please upgrade for best experience. 500 b.解決方法： 501 1.先執行卸載命令->npm uninstall sass-loader 502 2.執行安裝命令->npm install -D [email protected] 503 c.重要提示：不宜安裝太高的版本，可能不兼容 504 5.安裝cnpm錯誤 505 a.錯誤信息： 506 cnpm : 無法加載文件xxxxxxxxxxxxxx\npm\cnpm.ps1。未對文件 xxxxxxxxxxxxxx\npm\cnpm.ps1 進行數字簽名。無法在當前系統上運行該腳本。有關運行腳本和設置執行策略的詳細信息，請參閱 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 507 b.解決方案： 508 1.首先此問題是權限原因導致。 509 2.第一種方法：將VSCode工具設置爲“以管理員方式運行”模式 510 3.第二種方法：以管理員方式運行PowerShell工具，然後執行指令“set-ExecutionPolicy RemoteSigned”，在給出的選項中，選擇“A”即可。 511 6.安裝Terser 512 a.由於build模式的minify設置爲terser，所以需要安裝terser 513 b.安裝指令：npm install terser 514 7.在vue頁面中使用path報錯 515 a.錯誤信息： 516 Module "path" has been externalized for browser compatibility. Cannot access "path.resolve" in client code. 517 b.解決方案： 518 1.安裝依賴包：npm install path-browserify 519 2.把“import path from 'path'”改爲“import path from 'path-browserify'” 520 521 522 六、Vue知識 523 1.生命週期 524 1.1.選項式(Options) 525 a.beforeCreate()：在實例加載之前，尚未設置計算屬性、觀察者、事件、數據屬性和操作等內容。 526 b.created()：實例已經初始化，激活了計算屬性、觀察者、事件、數據屬性和隨之而來的操作。 527 c.beforeMount()：在DOM上掛載實例之前的那一刻，模板和作用域樣式都在這裏編譯，但是你仍然無法操作DOM、元素屬性仍然不可用。 528 d.mounted()：現在可以進行數據適合模板、DOM元素替換爲數據填充元素之類的操作了，元素屬性現在也可以使用了。 529 e.beforeUpdate()：在這裏對需要更新DOM的數據進行更改。 530 f.updated()：在對DOM更新之後立即調用。 531 g.beforeDestroy()：在 Vue實例被銷燬之前，實例和所有函數仍然完好無損並在此處工作。 532 h.destroyed()：Vue實例都已被銷燬，事件監聽器和所有指令之類的東西在此階段已被解除綁定。 533 1.2.組合式(Composition) 534 a.setup()：在組建創建時執行。可以簡單理解爲替代了選項式中的beforeCreate和created。 535 b.onBeforeMount()：在掛載之前被調用，渲染函數render首次被調用。 536 c.onMounted()：組件掛載時調用。 537 d.onBeforeUpdate()：數據更新時調用，發生在虛擬DOM打補丁之前。 538 e.onUpdated()：因數據更改導致的虛擬DOM重新渲染和打補丁時調用。 539 f.onBeforeUnmount()：在卸載組件實例之前調用，此階段的實例依舊是正常的。 540 g.onUnmounted()：卸載組件實例後調用，組件實例的所有指令都被解除綁定，所有事件偵聽器都被移除，所有子組件實例被卸載。 541 542 543 七、VSCode常用快捷鍵 544 1.註釋與取消註釋：Ctrl+/ 545 2.代碼縮進：Ctrl+[ 或 Ctrl+] 546 3.調用調試終端：Ctrl+、 547 4.選擇單詞：Ctrl+D 548 5.列選擇快捷鍵 549 a.windows：alt+shift+鼠標左鍵拖動 550 b.mac：shift+option+鼠標左鍵拖動 551 552 八、總結 553 1.上述規則規範屬於標準編碼規範，如遇特殊業務場景，可自行設計規則規範。 554 2.源自“取自網絡，還於網絡”的理念，已此項目源碼開放，但聲明於先：請正確使用項目源碼，如發生任何糾紛和違法行爲，均於本人無關。
三、總結
蕩跡編程技術十餘年，涉獵web\gui\mobile，雲服務（雲計算），分佈式（計算和存儲）、網絡安全等技術，而今回首覺的自己有能力輸出更多的實用技術，如同這篇文章所述的程序框架，因爲這些技術都玩過了，主要需要花費時間和精力整理聚合在一起，所以也談不上技術難度。好吧，就算是給自己定下一個目標，儘可能輸出更多的實用技術，如智能網關、智能服務、智能存儲等等。
軟件編程技術本就是“取自網絡，還於網絡”，因此，如果本項目能夠幫助到您或您的單位，本人表示很開心。