确定后台系统的详细规划和整体功能后，需要更多的时间打磨技术细节。本课题借鉴了我开发个人网站语力说的经验，整理了后台系统开发过程中可能遇到的各种技术点。涉及的代码已经整理到https://github.com/yulis-say/...的end-skills目录下，如果觉得有用，欢迎分享和star。1后台开发总结下面依次总结后台系统开发技术要点，包括必要的说明和资源引导。1.1后台系统模板搭建后台系统，为了省时省力，可以选择一些流行的后台系统模板。关于这部分，您可以阅读本站整理的文章《流行的后台管理系统模板》。考虑到技术的普及和后台功能的完善，本站借鉴基于Vue.js和Element-UI的vue-admin-template，进行了后台系统的搭建和二次开发。参考vue-element-admin后台系统模板，最终后台系统效果如图：1.2vue-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验证警告：注释掉console.warn(type,errors);在node_modules/async-validator目录下的es/util.js和lib/util.js这两个文件编译源码时，Eslint会在验证失败时给出一些提示：Stringsmustusesinglequote。必须使用单引号，不能使用双引号。不允许尾随空格。需要删除多余的空格。属性“:sizeOpts”必须用连字符连接。属性是大写的，需要用“-”代替。1.3Vue.js提示$nextTick()会在下一个DOM更新周期结束后执行延迟回调。修改数据后立即使用此方法获取更新后的DOM。handler()会在被监听对象的属性发生变化时被调用，无论嵌套多深。Computed用于监控自定义变量。它可以在页面上进行双向数据绑定，以显示结果或进行其他处理。它更适合处理多个变量或对象并返回一个结果值。错误：关键依赖：依赖的请求是一个表达式。解决方法：将babel-eslint换成稳定版，比如“^10.0.3”换成7.2.3。1.4Element-UI使用技巧el-upload上传组件，可以使用http-request自定义上传方式。下面的代码已经简单处理过：resolve,reject)=>{constformData=newFormData()formData.append('file',file)getImage(formData).then(response=>{this.tempUrl=response.dataresolve(true)}).catch(()=>{reject(false)})})}调整$confirm提示框的按钮位置。$confirm提示框的按钮默认顺序是取消，确认，修改代码调整：CSSadjustment.el-btn-custom-cancel{float:right;margin-left:10px;}设置$confirm按钮的样式......cancelButtonClass:'btn-custom-cancel',...}Error:Uncaught(inpromise)cancel.因为this.$msgbox没有使用.catch()，所以无法捕捉到cancel操作。您可以这样写：this.$msgbox({...}).catch(error=>error)2更多有用的网站Vue.js：一个用于构建用户界面的渐进式JavaScript框架，遵循MIT开源许可证。URL:https://cn.vuejs.org/.Element:WebsiteRapidPrototypingTool，一个面向开发者、设计师和产品经理的基于Vue2.0的桌面组件库。URL：https://element.eleme.cn.npm：JavaScriptWorld包管理工具，是Node.js平台默认的包管理工具。通过npm，您可以安装、共享、分发代码以及管理项目依赖项。网址：https://www.npmjs.com/。Webpack：一种静态模块打包模块打包器会递归地构建一个依赖图（dependencygraph），其中包含应用程序需要的每一个模块，然后将所有这些模块打包成一个或多个bundle。网址：https://www.webpackjs.com.axios：一个基于promise的HTTP库，可以在浏览器和Node.js中使用。网址：http://www.axios-js.com/。3参考链接①vue-element-admin项目指南网站②Markdown组件无法预览html内容·Issue#3308·PanJiaChen/vue-element-admin③element$confirm提示框按钮位置调整-简书
