从零开始搭建vue移动端项目到上线的步骤(4)

作为移动端项目,上面步骤其实已经算完善了,但是往往会遇到项目工期紧,或者缺少人手的时候,这个时候引入一个移动端的UI就如虎添翼了,不用自己去封装一些ui组件了,这里使用mint-ui,优点可自行搜索,这里讲一下对mint-ui的引入。

(1)安装mint-ui

npm install mint-ui --save

(2)引入mint-ui

在main.js里引入mint-ui

import Mint from 'mint-ui' import 'mint-ui/lib/style.css' // 引入css Vue.use(Mint) // 全局使用

这样就可以在整个vue项目里面使用mint-ui的组件了。

打包

打包遇到的一些问题

(1)打包之后在ios上点击元素会闪出来一个半透明的灰色框,这里需要加一句css做下兼容-webkit-tap-highlight-color:rgba(0,0,0,0); 放入#app的css里

(2)点击事件右300ms的延迟,可采用fastclick.js解决,参考以下代码

npm install fastclick --save // 在main.js引入 import FastClick from 'fastclick' FastClick.attach(document.body)

打包注意事项

如果将项目打包用于移动端浏览器,则直接打包,不需要更改其它的东西,在包之后上传至服务器,使用nginx做下接口转发即可

如果想将打包的静态文件进一步打包成移动端应用,则需要修改以下config/index.js

从零开始搭建vue移动端项目到上线的步骤

在config/prod.env.js新增baseUrl

从零开始搭建vue移动端项目到上线的步骤

打包成app之后,移动端不会存在跨域问题。

写在最后

上面项目纯属个人搭建,适用于移动端项目,包括浏览器端,微信公众号以及打包之后的android,ios应用,目前还存在一些不足的地方,不过基本功能可以正常使用,具体的代码,如有需要可在我的github中下载使用,如果觉得对你有用,请给我点赞,如有修改建议,请提出。

项目地址:https://github.com/MrKaKaluote/vue-mobile.git

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8225d15b29aee7ea8eae1c9e8e2ce8e1.html