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

　　介绍

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

vue的优点

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

<强> 1。对于项目的一些心得与体会

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

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

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

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

<强> 2.快速眼动与px的转换

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

& lt; script 类型=拔谋?javascript"比; 　　,document.getElementsByTagName (“html") [0] .style.fontSize =, 100,/, 750, *, window.screen.width  +,“px"; 　　& lt;/script>

<强> 3。对于上传图片插件vue-core-image-upload中遇到的坑

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

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

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

访问XMLHttpRequest & # 39; https://....& # 39;从起源& # 39;http://localhost: 8080 & # 39;的值已经被歌珥政策:& # 39;Access-Control-Allow-Origin& # 39;头在响应中不得通配符& # 39;* & # 39;当请求# 39;s凭证模式& # 39;包括# 39;。请求由XMLHttpRequest的凭证模式由withCredentials控制属性。

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

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

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

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

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

& lt; vue-core-image-upload 　　类才能=癰tn  btn-primary" 　　,,:作物=癴alse" 　　input-of-file才能=癴ile" 　　@imageuploaded才能=發oadMainImg" 　　,,:max-file-size=?242880”; 　　,,:url=皊erverUrl" 　　,,:凭证=癴alse",//允许携带饼干 　　祝辞& lt;/vue-core-image-upload>

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

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

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

<强> 4。基于mint-ui的三级地址选择效果图

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

模板文件

& lt; div 类=癿odal", @click=癶andleCloseAddress"比; 　　,& lt; div 类=癱ateContainer", @click.stop> 　　& lt;才能div 类=皁perateBtn"比; 　　,,& lt; div 类=癱ancelBtn", @click=癶andleCloseAddress"在取消& lt;/div> 　　,,& lt; div 类=癱onfirmBtn", @click=癶andleCloseAddress"祝辞确定& lt;/div> 　　& lt;才能/div> 　　& lt;才能mt-picker 类=癮ddressPicker",:槽=癿yAddressSlots", @change=皁nAddressChange"祝辞& lt;/mt-picker> 　　,& lt;/div> 　　& lt;/div>

js文件

json文件地址地址文件

//,定义一个包含中国省市区信息的json文件 　　import  addressJson 得到& # 39;@/资产/共同/地址# 39; 　　export  default  { 　　数据才能(),{ 　　,,,return  { 　　,,,,,myAddressSlots:, 　　,,,,,,{ 　　,,,,,,,flex:, 1, 　　,,,,,,,价值观:,种(addressJson), 　　,,,,,,,名字:,& # 39;单曲# 39; 　　,,,,,,,textAlign:, & # 39;中心# 39; 　　,,,,,,},{ 　　,,,,,,,分频器:,真的, 　　,,,,,,,内容:,& # 39;& # 39; 　　,,,,,,,名字:,& # 39;slot2& # 39; 　　,,,,,,},{ 　　,,,,,,,flex:, 1, 　　,,,,,,,价值观:,(& # 39;市辖区& # 39;], 　　,,,,,,,名字:,& # 39;slot3& # 39; 　　,,,,,,,textAlign:, & # 39;中心# 39; 　　,,,,,,}, 　　,,,,,,{ 　　,,,,,,,分频器:,真的, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

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