一、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.# 进入项目目录

  1. cd 你的创建好的VUE 项目
  2. # 安装依赖
  3. npm install
  4. # 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
  5. npm install --registry=https://registry.npm.taobao.org
  6. # 本地开发 启动项目
  7. npm run dev

    Vant 创建项目

1、在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目

  1. # 安装 Vue Cli
  2. npm install -g @vue/cli
  3. # 创建一个项目
  4. vue create hello-world
  5. # 创建完成后,可以通过命令打开图形化界面,如下图所示
  6. 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 + ~ 组合键打开 终端


  1. 输入
  2. npm i vant -S
  3. 安装vant

  • 配置babel.config.js文件,完成按需引入组件功能
  1. module.exports = {
  2. presets: [
  3. '@vue/cli-plugin-babel/preset'
  4. ],
  5. plugins: [
  6. ['import', {
  7. libraryName: 'vant',
  8. libraryDirectory: 'es',
  9. style: true
  10. }, 'vant']
  11. ]
  12. }
  • 引入vant组件测试

首先安装模块插件:

  1. npm i babel-plugin-import -D

ps:babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

引入组件方式有两种(推荐使用局部引入):

方式一: 在main.js文件中引入,全局使用

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

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

  1. <template>
  2. <div>
  3. <van-button type="default">默认按钮</van-button>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. import { Button } from 'vant';
  9. import { Popup } from 'vant';
  10. export default {
  11. components:{
  12. Button,
  13. Popup
  14. }
  15. }
  16. </script>
  • 运行项目
  1. npm run serve

成功启动后如下图:

  • 解决移动端适配问题

安装对应插件

  1. npm i postcss-pxtorem -S
  2. npm i amfe-flexible -S
  • 新建vue.config.js,引入插件,进行相关配置
  1. const autoprefixer = require('autoprefixer');
  2. const pxtorem = require('postcss-pxtorem');
  3.  
  4. module.exports = {
  5. css: {
  6. loaderOptions: {
  7. postcss: {
  8. plugins: [
  9. autoprefixer({
  10. overrideBrowserslist: [
  11. "Android 4.0",
  12. "iOS 7",
  13. "Chrome > 31",
  14. "ff > 31",
  15. "ie >= 8"
  16. ]
  17. }),
  18. pxtorem({
  19. rootValue: 37.5, /*37.5对应的是375尺寸的图,如果是750尺寸的图则替换成75,以此类推*/
  20. propList: ['*'],
  21. })
  22. ]
  23. }
  24. }
  25. },
  26. };
  • main.js文件中导入amfe-flexible
  1. import 'amfe-flexible'
  • index.html配置移动端meta信息
  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no
  1. 到此一个pc 版本的项目就改为移动端了如果你想在里面添加任何想创造的组件或者插件自己调整修改就可以了。非常的简单。值得大学学习和掌握。

前端技术VUE 的前世今生从PC 走向移动的更多相关文章

  1. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  2. 8分钟为你详解React、Angular、Vue三大前端技术

    [引言] 当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题.本文就对于当下主流的前端开发技术React.Vue.Angular这三个框架做个相对详尽的探究,目的是为了 ...

  3. 一文读懂前端技术演进:盘点Web前端20年的技术变迁史

    本文原文由作者“司徒正美”发布于公众号“前端你别闹”,即时通讯网收录时有改动,感谢原作者的分享. 1.引言 1990 年,第一个Web浏览器的诞生:1991 年,WWW诞生,这标志着前端技术的开始. ...

  4. 让老板虎躯一震的前端技术,KPI杀手

    本文由云+社区发表 作者:思衍Jax 天下武功,唯 (wei) 快(fu) 不(bu) 破(po). 随着近几年的前端技术的高速发展,越来越多的团队使用 React.Vue 等 SPA 框架作为其主要 ...

  5. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  6. 2019年一半已过,这些大前端技术你都GET了吗?- 下篇

    在上一篇文章中已经介绍了大前端关于状态管理.UI组件.小程序.跨平台和框架层的内容.在本文中,我会继续介绍编程语言.工程化.监控.测试和服务端,同时也会对下半年大前端可以关注的部分进行展望. 结合个人 ...

  7. 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

  8. 解密国内BAT等大厂前端技术体系-百度篇(长文建议收藏)

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  9. 【大厂】389- 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

随机推荐

  1. zk与eureka区别

    cap永远的神!

  2. 【mq读书笔记】客户端处理消息(回调提交到异步业务线程池,pullRequest重新入队)

    看一下客户端收到消息后的处理: MQClientAPIImpl#processPullResponse private PullResult processPullResponse( final Re ...

  3. mysql主从同步上---主从同步原理

    1.主从同步机制   1.1 主从同步介绍和优点   在多台数据服务器中,分为主服务器和从服务器.一台主服务器对应多台从服务器. 主服务器只负责写入数据,从服务器只负责同步主服务器的数据,并让外部程序 ...

  4. 通过 GraalVM 将 Java 程序编译成本地机器码!

    前言 2018年4月,Oracle Labs新公开了一项黑科技:Graal VM. 这是一个在HotSpot虚拟机基础上增强而成的跨语言全栈虚拟机,可以作为"任何语言"的运行平台使 ...

  5. day4(编写注册接口)

    1.编写注册接口 1.1 user/urls.py中添加路由 urlpatterns = [    path('register/', views.RegisterView.as_view()),  ...

  6. 从JMM透析volatile与synchronized原理,图文并茂

    在面试.并发编程.一些开源框架中总是会遇到 volatile 与 synchronized .synchronized 如何保证并发安全?volatile 语义的内存可见性指的是什么?这其中又跟 JM ...

  7. Zookeeper(5)---分布式锁

    基于临时序号节点来实现分布式锁 为什么要用临时节点呢?如果拿到锁的服务宕机了,会话失效ZK自己也会删除掉临时的序号节点,这样也不会阻塞其他服务. 流程: 1.在一个持久节点下面创建临时的序号节点作为锁 ...

  8. PyQt(Python+Qt)学习随笔:QTableWidget的获取指定位置项的item和itemAt方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 1.获取指定行和列的项 根据行和列可以获取对应位置的项,调用语法如下: QTableWidgetIt ...

  9. 第13.1节 关于Python的异常处理

    Python的异常网上有很多资料介绍,老猿就不再细说,在这里老猿只挑几件老猿认为重要的内容介绍一下. 一. 异常处理完整语法 异常处理的完整语法语法如下: try: - except (异常1,-,异 ...

  10. js实现跳转的几种方式

    1. window.open("url"); 2.用自定义函数 <script> function openWin(tag,obj) { obj.target=&quo ...