vue移动端开发（vue移动端不使用路由）

本文目录

• vue移动端不使用路由
• 前端vue是什么
• vue2开发移动端解决登录成功后,登录页面还在的问题
• VUE移动端及PC端适配方案
• 什么是vue语言

vue移动端不使用路由

做Vue开发脱离不了路由。vue移动端不使用路由是因为做Vue开发脱离不了路由，尤其是中大型项目，页面多且杂，在配置路由的时候总是会变得逐渐暴躁，因为费时，并且又没有什么太多技术含量。

前端vue是什么

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起 React + Redux 相对复杂的架构，Vue.js 更加轻量级也更加容易上手，是初创项目的首选前端框架。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
今天带领大家来了解一款渐进式JavaScript框架——Vue。
近年来，前端开发领域，旧浏览器逐渐淘汰，移动端开发需求逐年增加，前端交互越来越多，功能越来越复杂。架构从传统后台MVC向REST API + 前端MV* 迁移。
MV*相当于MVC即：
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示前端的学习都是需要不断的学习，学一天停一停相当于白学，学习效果很差，如果你想有人一起学习可以来这个扣裙，首先是132 中间是667最后是127 都是零基础的同学，大家相互鼓励 共同努力 只是学着玩就不建议来了!!!数据（数据库记录）。
Controller（控制器）处理输入（写入数据库记录）。
MVP
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Presenter（表示器）负责逻辑处理业务。
与MVC差别在于：
1、View与Model完全隔离。
2、Presenter与View的具体实现技术无关。
3、可以进行View的模拟测试。
MVVM（Vue就是一种MVVM框架）
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
ViewModel（观察者）负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
优点：高内聚，低耦合（可重用性、可移植性）。
Vue是一款数据驱动+组件化的前端开发框架，对比于Angular和React，Vue.js更轻量，gzip后大小只有26K （Angular 56K,React 44K），同时更易上手，学习曲线平稳，吸收两家之长，借鉴了angular的指令和react的组件化。

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

其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。 网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用
核心就是用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(,resolve)}},
{path:"/home",name:"首页",component:resolve =》{require(,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配置文件时，在《u》postcss.config.js《/u》添加如下配置：

或者在《u》package.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是一款用于构建用户界面的Java Script框架。

它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的Java Script框架之一。

Vue可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

Vue由Evan You创建，于2014年发布。Vue使用model-view-viewmodel（MVVM）体系结构。Evan You之前在Google研究过AngularJS，并提取了Angular的部分特性以提供一个更轻量级的框架。

主要功能：

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue是一个框架，也是一个生态。可以用不同的方式使用Vue：无需构建步骤，渐进式增强静态的HTML；在任何页面中作为Web Components嵌入；单页应用（SPA）；全栈/服务端渲染（SSR）。

Jamstack/静态站点生成（SSG）；开发桌面端、移动端、WebGL，甚至是命令行终端中的界面。

以上内容参考：百度百科-Vue.js