共计 2777 个字符，预计需要花费 7 分钟才能阅读完成。
在确定了后盾零碎的具体布局和整体性能当前，破费工夫更多的其实是对技术细节的打磨。本主题借鉴我开发集体网站 魚立说 的教训，整顿了在开发后盾零碎过程可能会遇到的各种技术要点。
波及到的代码曾经整顿到 https://github.com/yulis-say/… 中的 end-skills 目录，若感觉有用，请分享并 star。
1 后盾开发小结
上面对后盾零碎的开发技术要点顺次进行概括，包含必要的阐明和资源疏导。
1.1 后盾零碎模板
搭建后盾零碎，为了省时省力，能够选用一些风行的后盾零碎模板。对于这部分，能够浏览本站整顿的《风行的后盾管理系统模板》一文。
思考到技术的流行性和后盾性能的欠缺，本站应用了基于 Vue.js 和 Element-UI 实现的 vue-admin-template 作为参考，进行了后盾零碎的搭建和二次开发。
参考 vue-element-admin 后盾零碎模板，最终的后盾零碎成果将如图所示：
1.2 vue-admin-template 应用技巧
-
配置代理申请，解决跨域问题。做如下批改：
批改 .env.development 文件，VUE_APP_BASE_API 示意某个前缀：
VUE_APP_BASE_API = ‘/api’批改 vue.config.js 文件，当遇到以 VUE_APP_BASE_API 结尾的申请时，就会把 target 字段加上：
devServer: {…… proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://api.com',// 你本人的域名
secure: false,// 配置 https 接口
changeOrigin: true,// 是否跨域
pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: '/api'// 替换配置中的前缀
}
}
}
}
-
修复 Markdown 排版款式。应用 tui.editor 作为新编辑器，请参考 https://github.com/PanJiaChen… 修复此 bug。具体批改：
- 把 package.json 文件中的 “tui-editor” 依赖替换成 “@toast-ui/editor”；
- 应用参考中的 src/components/MarkdownEditor/index.vue 文件内容代替你本地的文件内容。
- 去除浏览器控制台输入的 async-validator 验证正告：
将 node_modules/async-validator 目录中的 es/util.js、lib/util.js
两个文件里的 console.warn(type, errors); 正文掉 - 在编译源码的时候，Eslint 校验失败的时候会进行一些提醒：
Strings must use singlequote. 必须应用单引号，不能应用双引号。
Trailing spaces not allowed. 须要删除多余的空格。
Attribute ‘:sizeOpts’ must be hyphenated. 属性有大写，须要应用 ”-“ 取代。
1.3 Vue.js 应用技巧
- $nextTick() 会在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法，能够获取更新后的 DOM。
- handler() 会在被侦听对象的 property 扭转时被调用，不管其被嵌套多深。
- computed 用来监控自定义变量，能够在页面上进行双向数据绑定展现出后果或作其余解决，比拟适宜对多个变量或者对象进行解决后返回一个后果值。
- 报错：Critical dependency: the request of a dependency is an expression. 解决：将 babel-eslint 更换至稳固版本，比方由 “^10.0.3” 更换至 7.2.3。
1.4 Element-UI 应用技巧
-
el-upload 上传组件，能够应用 http-request 自定义上传办法。如下代码做了简略解决：
<el-upload
ref=”upload”
accept=”.jpg, .jpeg, .png, .gif”
:http-request=”uploadFile”uploadFile(params) {
return new Promise((resolve, reject) => {const formData = new FormData() formData.append('file', file) getImage(formData).then(response => { this.tempUrl = response.data resolve(true) }).catch(() => {reject(false) })})
} -
调整 $confirm 提示框按钮地位。$confirm 提示框的按钮默认程序是勾销、确定，批改代码进行调整：
CSS 调整
.el-btn-custom-cancel {
float: right;
margin-left: 10px;
}设置 $confirm 按钮款式
this.$confirm(
…… cancelButtonClass: 'btn-custom-cancel', ……}
-
报错：Uncaught (in promise) cancel. 因为 this.$msgbox 没有应用 .catch()，无奈捕捉到勾销操作。能够这么写：
this.$msgbox({
……}).catch(error => error)
2 更多有用的网站
- Vue.js：一套用于构建用户界面的渐进式 JavaScript 框架，遵循 MIT 开源协定。网址：https://cn.vuejs.org/。
- Element：网站疾速成型工具，一套为开发者、设计师和产品经理筹备的基于 Vue 2.0 的桌面端组件库。网址：https://element.eleme.cn。
- npm：JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。通过 npm 能够装置、共享、散发代码，治理我的项目依赖关系。网址：https://www.npmjs.com/。
- Webpack：一个动态模块打包器 (module bundler)，会递归地构建一个依赖关系图 (dependency graph)，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。网址：https://www.webpackjs.com。
- axios：一个基于 promise 的 HTTP 库，能够用在浏览器和 Node.js 中。网址：http://www.axios-js.com/。
3 参考链接
① vue-element-admin 我的项目疏导网站
② Markdown components can not preview html content · Issue #3308 · PanJiaChen/vue-element-admin
③ element $confirm 提示框按钮地位调整 – 简书