前端技术VUE 的前世今生从PC 走向移动
一、Vue的前世
Vue 框架诞生于2014年,他的作者为中国人–尤雨溪(江苏无锡人)。Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式。发展至今已经有诸多版本,目前推荐使用比较稳定的2.0版本
二、Vue的今生
什么是Vue?Vue是一套用于构建用户界面的渐进式框架.提到Vue就不得不提前端框架的三驾马车:angular 谷歌公司,react Facebook,Vue 尤雨溪.这三种框架都有不同的特性,如要一教高下的话也只能说是伯仲之间,各有千秋.以我目前的能力我还不能将三种框架的特性聊的十分透彻,在这里只能浅谈一下之所以选择Vue的原因:
首先作为一名中国人,选择Vue存在一些主观因素,我觉得这无可厚非.然后我们来谈谈Vue的诸多有点:1.不存在依赖关系 2.轻便(25 + gzip 72k min) 3.适用范围广 4.学习成本低,语法升级平滑 5.双向数据绑定(所见即所得) 6.语法非常简洁.我强烈建议所有的前端开发者和全栈开发人员进行学习和掌握。
三、PC 端项目的使用
1.# 进入项目目录
cd 你的创建好的VUE 项目
# 安装依赖
npm install
# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
Vant 创建项目
1、在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
# 创建完成后,可以通过命令打开图形化界面,如下图所示
vue ui
2、在图形化界面中,点击依赖
-> 安装依赖
,然后将 vant
添加到依赖中,同时添加其它需要的依赖,如路由,axios等
3、安装相关的插件
4、引用babel 插件
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
(1)# 安装插件 npm i babel-plugin-import -D
(2)在 babel.config.js 中配置
module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };
(3) 接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为按需引入形式
import { Button } from 'vant';
5、安装好的项目截图如下:
6、如图
在VScode中,通过 Ctrl + ~ 组合键打开 终端
输入
npm i vant -S
安装vant
- 配置
babel.config.js
文件,完成按需引入组件功能

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

- 引入
vant
组件测试
首先安装模块插件:
npm i babel-plugin-import -D
ps:babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
引入组件方式有两种(推荐使用局部引入):
方式一: 在main.js
文件中引入,全局使用

import { Toast,Button } from 'vant'
Vue.use(Toast).use(Button) <van-button type="default">默认按钮</van-button> 此方法引入的Toast组件,使用方式:
this.$toast({
message: 'test info',
duration: 1000,
forbidClick: true
});

方式二: 在页面单独引用,仅作用于此页面

<template>
<div>
<van-button type="default">默认按钮</van-button>
</div>
</template> <script>
import { Button } from 'vant';
import { Popup } from 'vant';
export default {
components:{
Button,
Popup
}
}
</script>

- 运行项目
npm run serve
成功启动后如下图:
- 解决移动端适配问题
安装对应插件
npm i postcss-pxtorem -S
npm i amfe-flexible -S
- 新建
vue.config.js
,引入插件,进行相关配置

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem'); module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: [
"Android 4.0",
"iOS 7",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
}),
pxtorem({
rootValue: 37.5, /*37.5对应的是375尺寸的图,如果是750尺寸的图则替换成75,以此类推*/
propList: ['*'],
})
]
}
}
},
};

main.js
文件中导入amfe-flexible
import 'amfe-flexible'
index.html
配置移动端meta
信息
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no
到此一个pc 版本的项目就改为移动端了如果你想在里面添加任何想创造的组件或者插件自己调整修改就可以了。非常的简单。值得大学学习和掌握。
前端技术VUE 的前世今生从PC 走向移动的更多相关文章
- Vue 本地代理 纯前端技术解决跨域
vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...
- 8分钟为你详解React、Angular、Vue三大前端技术
[引言] 当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题.本文就对于当下主流的前端开发技术React.Vue.Angular这三个框架做个相对详尽的探究,目的是为了 ...
- 一文读懂前端技术演进:盘点Web前端20年的技术变迁史
本文原文由作者“司徒正美”发布于公众号“前端你别闹”,即时通讯网收录时有改动,感谢原作者的分享. 1.引言 1990 年,第一个Web浏览器的诞生:1991 年,WWW诞生,这标志着前端技术的开始. ...
- 让老板虎躯一震的前端技术,KPI杀手
本文由云+社区发表 作者:思衍Jax 天下武功,唯 (wei) 快(fu) 不(bu) 破(po). 随着近几年的前端技术的高速发展,越来越多的团队使用 React.Vue 等 SPA 框架作为其主要 ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 2019年一半已过,这些大前端技术你都GET了吗?- 下篇
在上一篇文章中已经介绍了大前端关于状态管理.UI组件.小程序.跨平台和框架层的内容.在本文中,我会继续介绍编程语言.工程化.监控.测试和服务端,同时也会对下半年大前端可以关注的部分进行展望. 结合个人 ...
- 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
- 解密国内BAT等大厂前端技术体系-百度篇(长文建议收藏)
1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...
- 【大厂】389- 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
随机推荐
- 【数学】康托展开 && 康托逆展开
(7.15)康托展开,就是把全排列转化为唯一对应自然数的算法.它可以建立1 - n的全排列与[1, n!]之间的自然数的双向映射. 1.康托展开: 尽管我并不清楚康托展开的原理何在,这个算法的过程还是 ...
- Mac 安装Homebrew慢的问题解决
一开始安装,在官网上的命令: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...
- kafka 副本机制和容错处理 -2
文章来源于本人的印象笔记,如出现格式问题可访问该链接查看原文 原创声明:作者:Arnold.zhao 博客园地址:https://www.cnblogs.com/zh94 副本机制 Kafka的副本机 ...
- Java安全之JNI绕过RASP
Java安全之JNI绕过RASP 0x00 前言 前面一直想看该JNI的相关内容,但是发现JNI的资料还是偏少.后面发现JNI在安全中应用非常的微妙,有意思. 0x01 JNI概述 JNI的全称叫做( ...
- CSRF&SSRF-初探准备
了解CSRF之前的必备知识 1.同源策略 同源策略-三个相同:协议.域名.端口 举例说明: 源URL为:http://www.example.com/dir/page.html 协议为:http 域名 ...
- 红黑树、TreeMap、TreeSet
事先声明以下代码基于JDK1.8版本 参考资料 大部分图片引自https://www.jianshu.com/p/e136ec79235c侵删 https://www.cnblogs.com/skyw ...
- Alpha冲刺-第三次冲刺笔记
Alpha冲刺-冲刺笔记 这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE2 这个作业要求在哪里 https://edu.cnblogs. ...
- Kubernetes Ingress-nginx使用
目录 简介 1. 部署Ingress-Controller 2. 使用Ingress规则 2.1 Ingress地址重写 2.2 配置HTTPS 2.3 黑白名单配置 2.4 匹配请求头 2.5 速率 ...
- 【SHOI2008】JZOJ2020年9月5日提高组 循环的债务
CSP-2020倒计时:36天 [SHOI2008]JZOJ2020年9月5日提高组 循环的债务 题目 Description Alice.Bob和Cynthia总是为他们之间混乱的债务而烦恼,终于有 ...
- Python的富比较方法__le__、__ge__之间的关联关系分析
Python的富比较方法包括__le__.__ge__分别表示:小于等于.大于等于,对应的操作运算符为:"<=".">=".那么是否象普通数字运算一 ...