一、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 走向移动的更多相关文章

  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. 2017-2018 ACM-ICPC Latin American Regional Programming Contest J - Jumping frog 题解(gcd)

    题目链接 题目大意 一只青蛙在长度为N的字符串上跳跃,"R"可以跳上去,"P"不可以跳上去. 字符串是环形的,N-1和0相连. 青蛙的跳跃距离K的取值范围是[1 ...

  2. 2020天梯赛总决赛L2-3 完全二叉树的层序遍历 (25分)

    题目:一个二叉树,如果每一个层的结点数都达到最大值,则这个二叉树就是完美二叉树.对于深度为 D 的,有 N 个结点的二叉树,若其结点对应于相同深度完美二叉树的层序遍历的前 N 个结点,这样的树就是完全 ...

  3. vue获取浏览器地址栏参数(?及/)路由+非路由实现方式

    1.? 参数 浏览器参数形式:http://javam4.com/m4detail?id=1322914793170014208 1.1.路由取参方式 this.$route.query.id 前端跳 ...

  4. 再也不担心写出臃肿的Flink流处理程序啦,发现一款将Flink与Spring生态完美融合的脚手架工程-懒松鼠Flink-Boot

    目录 你可能面临如下苦恼: 接口缓存 重试机制 Bean校验 等等...... 它为流计算开发工程师解决了 有了它你的代码就像这样子: 仓库地址:懒松鼠Flink-Boot 1. 组织结构 2. 技术 ...

  5. 雪花算法 Java 版

    雪花算法根据时间戳生成有序的 64 bit 的 Long 类型的唯一 ID 各 bit 含义: 1 bit: 符号位,0 是正数 1 是负数, ID 为正数,所以恒取 0 41 bit: 时间差,我们 ...

  6. Abp(net core)+easyui+efcore实现仓储管理系统——出库管理之七(五十六)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...

  7. PyQt(Python+Qt)学习随笔:工具箱(QToolBox)的用途及标签部件项(tabbed widget item)作用介绍

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 1.概述 toolBox工具箱是一个容器部件,对应类为QToolBox,在其内有一列从上到下顺序排列 ...

  8. HashMap稍微详细的理解

    此文章用来记录hashmap的一些特点(在学习中的所了解的,如有不足,请指正) 什么是hash表 概念 先来一段百度百科的的解释 散列表(Hash table,也叫哈希表),是根据关键码值(Key v ...

  9. Docker 基本概念(三)-生命周期详解(镜像、容器、仓库)

    Docker三大组件:镜像.容器.仓库.  一.镜像 1 从仓库获取镜像 #一.从仓库获取镜像,帮助命令:docker pull -help 命令:docker pull [选项] [docker R ...

  10. robot framework 接口自动化测试和关键字开发

    https://www.cnblogs.com/laoqing/p/10787593.html 1.实战-接口自动化测试实例 1.1 接口测试 接口测试通常是系统之间交互的接口,或者某个系统对外提供的 ...