使用vue开发移动端管理后台的注意事项有哪些-创新互联

小编给大家分享一下使用vue开发移动端管理后台的注意事项有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联-专业网站定制、快速模板网站建设、高性价比沙洋网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式沙洋网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖沙洋地区。费用合理售后完善，十余年实体公司更值得信赖。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

1.对于项目的一些心得与体会

首先的一点，就是，对于图形界面框架的选型，这个很重要，对于一项目来说，开始动手前就要对项目的设计图有个完整的了解，以便于自己选择插件或者框架；

然后就是，对于交互性操作，比如：上传图片，预览图片啥的，应该选择是否是用图形界面框架来实现还是另选专门的插件来实现

在完成项目中，我又新学到了上传图片插件vue-core-image-upload，移动端富文本编辑器vue-quill-editor

还有个地址的三级联动mt-picker，(是基于mint-ui图形界面框架的)

2.rem与px的转换

从同事传授中获到的经验，对于rem与px的转换，就是在index.html模板文件中加入下面的脚本，然后就是1rem=100px(这个可能不准确，有更好的方法，各位大佬请在评论中留下，感激不尽)


 document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";

3.对于上传图片插件vue-core-image-upload中遇到的坑

对于跨域问题，有好多方法可以解决，这里讲的挺多的前端跨域解决方法

还有就是后台设置响应头access-control-allow-origin可以指定特定的域名，我这里的后台设置的就是access-control-allow-origin:*，就是因为这样，用这个上传图片的插件就会报错

使用vue开发移动端管理后台的注意事项有哪些

Access to XMLHttpRequest at 'https://....' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这个问题我蒙圈了好久，和后台也讲了，就是处于蒙圈状态，已经允许跨域了，怎么还报错呢？很烦

然后，终于找了个方法解决（有用过其他的上传插件，感觉不好用，代码或者思路好乱）

其实这个插件中的文档也有提示，只是刚用，还不是很会

使用vue开发移动端管理后台的注意事项有哪些

就是在使用这个插件的代码中加上这个字段就可以了

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“”。这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“”，请求将会失败。

也就是说Access-Control-Allow-Credentials设置为true的情况下

Access-Control-Allow-Origin不能设置为*

4.基于mint-ui的三级地址选择效果图

使用vue开发移动端管理后台的注意事项有哪些

template文件


 
  
   取消

确定

// 定义一个包含中国省市区信息的json文件 import addressJson from '@/assets/common/address' export default { data() { return { myAddressSlots: [ { flex: 1, values: Object.keys(addressJson), className: 'slot1', textAlign: 'center' }, { divider: true, content: '-', className: 'slot2' }, { flex: 1, values: ['市辖区'], className: 'slot3', textAlign: 'center' }, { divider: true, content: '-', className: 'slot4' }, { flex: 1, values: ['东城区'], className: 'slot5', textAlign: 'center' } ], province:'省', city:'市', county:'区/县', } }, methods: { onAddressChange(picker, values) { if(addressJson[values[0]]) { picker.setSlotValues(1, Object.keys(addressJson[values[0]])); picker.setSlotValues(2, addressJson[values[0]][values[1]]); this.province = values[0]; this.city = values[1]; this.county = values[2]; } }, } }

大橙子网站建设，新征程启航

使用vue开发移动端管理后台的注意事项有哪些-创新互联

Vue的优点

其他资讯