vue移动端开发（基于vue的移动开发app）

本篇文章给大家谈谈vue移动端开发，以及基于vue的移动开发app对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享vue移动端开发的知识，其中也会对基于vue的移动开发app进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue开发移动端
• 2、几款实用的VUE移动端UI框架
• 3、vue2开发移动端解决登录成功后,登录页面还在的问题
• 4、VUE移动端及PC端适配方案

vue开发移动端

vue 开发移动端项目依赖：
一：移动端布局适配：
    amfe-flexible/index ：安装依赖，mian.js导入  import 'amfe-flexible/index' // 移动端适配

     postcss-pxtorem ： vue.config.js 配置：

    meta 标签设置

二：组件库

三：fastClick

四：国际化

五：better-scroll 处理移动端滚动

六：关于优化：

七：

几款实用的VUE移动端UI框架

文档地址：https://doc.vux.li/zh-CN/

演示地址：https://vux.li/demos/v2/?x-page=v2-doc-home#/

基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式（下拉刷新上拉加载组件不再维护，其余组件相对丰富）

文档地址：https://wangdahoo.github.io/vonic-documents/#/

演示地址：https://wangdahoo.github.io/vonic/docs/#/home
 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约

文档地址：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

演示地址：https://didi.github.io/cube-ui/#/zh-CN/example

滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库；组件效果优；视觉效果很棒

文档地址：http://mint-ui.github.io/docs/#/

演示地址：http://elemefe.github.io/mint-ui/#/

最接近原生APP体验的高性能前端框架
文档地址：https://youzan.github.io/vant/#/zh-CN/intro

演示地址：https://youzan.github.io/vant/mobile.html#/zh-CN/

有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件
文档：http://nutui.jd.com/#/intro

演示地址：http://nutui.jd.com/demo.html#/index

一套京东风格的轻量级移动端Vue组件库

特性
跨平台，自动转微信小程序组件（稍后上线，敬请期待）

30+ 京东移动端项目正在使用

基于京东APP 7.0 视觉规范

支持按需加载

详尽的文档和示例

支持定制主题

支持多语言（国际化）

支持 TypeScript

支持服务端渲染（Vue SSR）

单元测试加持

配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程

vue2开发移动端解决登录成功后,登录页面还在的问题

其实登录注册vue移动端开发，并且登录一次保持登录的状态vue移动端开发，是每个项目都需要实现的功能。 网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用
核心就是用localStorage存、取数据，这样当刷新浏览器，或者关闭在打开的时候能达到预期想要的效果
在router/index.js中
</复制代码
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
export default new Router({
routes: [
{path:"/", redirect:"/home"},
{path:"/login",name:"登录",component:resolve ={require(["@/components/login"],resolve)}},
{path:"/home",name:"首页",component:resolve ={require(["@/components/home"],resolve)}}
]
})
其中redirect（默认跳转）可以直接写在home页面，刚进入页面直接跳转首页
然后我们在home.vue的 周期函数created里面做判断 Login的值状态（Login是在login.vue中localStorage存入的变量，现在我们先读取）
</复制代码
created() {
console.log(localStorage.getItem("Login"));
if(localStorage.getItem("Login")){
console.log("登录过了");//登录成功了，保留在登录页面
}else{
console.log("没有登录");
this.$router.push("/login");//没有登录过 返回登录页面
}
},
然后我们在login.vue 当用户请求数据成功的时候把Login的状态写入
</复制代码
axios.post("后台接口",qs.stringify({
username:"用户名",
password: "密码"
}),{
headers: {//请求头
"Content-Type": "application/x-www-form-urlencoded",
"Accept":"application/json"
}
}).then((response) = {//成功回调
if(response.data.status=="200"){//状态正常的时候
this.$router.push("/home");
//存储名字为Login值为true的变量,方便我们在home页面判断是否登录
localStorage.setItem("Login",true)
}
}, (error) = {
console.log(error);
});
如果首页有退出登录按钮，那退出的时候执行
</复制代码
out(){
localStorage.removeItem("Login");//删掉我们存的变量就可以了
this.$router.push("/login");//点击退成功按钮返回登录页面
}
这样就实现了Vue的登陆和注册，用户刷新浏览器，或者关闭在打开都保持登录状态

VUE移动端及PC端适配方案

前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显著，每个页面都适配到位

step1. vue安装postcss-px-to-viewport插件。

step2. 配置适配插件的参数

使用PostCss配置文件时，在<upostcss.config.js</u添加如下配置：

或者在<upackage.json</u中，添加以下配置：

说明下几个重要参数的使用：

适配存在的问题点：

注：执行指令后在package.json的devDependencies分支可以看到相应的版本，

2. 在main.js中导入lib-fixible.

如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：

注：此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者，会导致在配置时候无法成功配置。
在vue.config.js中配置如下配置即可，如未有此文件请自行搜索查询创建配置。

集成以上两个步骤，基本前端即可根据屏幕自行适配，但可能有部分伙伴会遇到data-dpr始终为1，遇到这个情况多半是因为在html头中自己设置了<meta name="viewport" ...，

查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把<metaname="viewport" ...去除.

关于vue移动端开发和基于vue的移动开发app的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue移动端开发的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于基于vue的移动开发app、vue移动端开发的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。