一、准备
这篇文章本应该于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，云服务（云计算），分布式（计算和存储）、网络安全等技术，而今回首觉的自己有能力输出更多的实用技术，如同这篇文章所述的程序框架，因为这些技术都玩过了，主要需要花费时间和精力整理聚合在一起，所以也谈不上技术难度。好吧，就算是给自己定下一个目标，尽可能输出更多的实用技术，如智能网关、智能服务、智能存储等等。
软件编程技术本就是“取自网络，还于网络”，因此，如果本项目能够帮助到您或您的单位，本人表示很开心。