Why-为什么需要Vue?

前端开发存在的问题?

其一,需求变化频率更高

  • 产品功能迭代前端肯定需要跟着调整。
  • 提意见的人多,前端嘛谁都能看得见,所以,谁都可以指手画脚提一点意见。产品经理、项目经理、老板...甚至连后端都可以来提一些意见。
  • 前端像人的衣着,还是需要经常更换。

其二,平台、浏览器生态复杂,要考虑的场景多!需要考虑浏览器Chrome、Edge、Firefox、Safari,需要考虑平台Window,IOS,Android等,不同平台上实现同一界面功能的重复劳动严重,这个难点在于如何消除前端开发的重复劳动。

其三,前端技术确实处于飞速发展之中,足够经验的人少,现有的解决方案还处于不稳定阶段。

以上,是我总结的一些业务前端的难点,当然只要有困难的地方,总有相应的解决返岗,目前,最流行的前端框架主要有Vue、Angular、React。

Vue、Angular、React比较

工作机会

什么都是假的,能找到工作才是真的!快来看看截至2020年10月中,三种主流框架在51Job的工作机会数量吧:

Vue: 23133(胜)
React: 13198
Angular: 5773

结果是后起新秀的Vue称霸,React只有Vue的一半了!

Google趋势

Google趋势,看看下面的图,Vue.js落后于angular和react。React在搜索中最受欢迎。

npm趋势

npm趋势,看看下面的图,它清楚地显示了React在顶部,Vue和Angular不分上下。但是,当我们观察stats时,最低的是Angular,最高的是vue,然后是React。

What-Vue是什么?

2014年发布的渐进式Javascript框架,没有像React和Angular这样的大牌开发。实际上,它是由Google的前工程师Evan You创建的。它越来越受欢迎。

它是Javascript框架家族中最年轻的成员。它实际上消除了其他框架的弊端,从而使软件开发人员更容易上一层楼。GitLab和阿里巴巴等网站都在使用Vue。

How-如何使用Vue?

使用 vue-cli 搭建项目

首先,可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue --version

接下来,运行以下命令来创建一个新项目:

vue create hello-world

注意我们这里选择Vue2,而不是Vue3,这是因为Vue3正式版刚发布,很多UI支持还不是很好。

最后,你可以通过 npm 或 Yarn 调用这些 script:

npm run serve
# OR
yarn serve

到这一步,就算成功利用vue-cli搭建一个vue项目了,撒花 ~

目录结构及其对应作用

通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
├ ── public/
│ ├── index.html # index.html 入口模板文件
├ ── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹,一般放一些静态资源文件
│ └── ...
└── babel.config.js # babel语法编译
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的,可参照github上star多的项目。
build/

小结

目前为止,我们知道了Vue是什么、为什么需要Vue,及创建了一个hello-world的程序。

文中用到的代码我们放在:https://github.com/zcqiand/miscellaneous/tree/master/vue

一起学Vue:入门的更多相关文章

  1. 一起学Vue之入门篇

    概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  2. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  3. 一、Vue入门

    vue官网:https://cn.vuejs.org/ 学习路线:VueJs2.0建议学习路线 在浏览器上安装 Vue Devtools工具 1.vue入门 <script src=" ...

  4. Vue入门 — Vue + vuetifyjs应用实践

    分享一个以前学vue时自己练手的一个小项目,项目使用vue-cli3创建,UI库用的是vuetifyjs,vuetifyjs官网:https://vuetifyjs.com/ 数据来源是网上随便找的一 ...

  5. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  6. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  7. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  8. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  9. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  10. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

随机推荐

  1. pytest封神之路第四步 内置和自定义marker

    可以通过命令行查看所有marker,包括内置和自定义的 pytest --markers 内置marker 内置marker本文先讲usefixtures .filterwarnings .skip ...

  2. Oracle学习(十七)数据库锁在分布式系统里的应用(老板,乐观锁了解一下?~)

    一.引言 随着业务量的增加,单机部署已经无法满足日常需求了,我们可能会把代码部署到多台服务器上去来进行服务的扩容,也就是负载均衡,那在这种场景下,怎么能实现锁的概念呢? 那么我们知道如果是一台主机部署 ...

  3. 什么是64位和32位internet explorer

    什么是64位和32位internet explorer 如果您使用 64 位版本的 Internet Explorer 时,您会遇到问题,请尝试使用 32 位版本的 Internet Explorer ...

  4. Java知识系统回顾整理01基础02面向对象01类和对象

    一.面向对象实例--设计英雄这个类 LOL有很多英雄,比如盲僧,团战可以输,提莫必须死,盖伦,琴女 所有这些英雄,都有一些共同的状态 比如,他们都有名字,hp,护甲,移动速度等等 这样我们就可以设计一 ...

  5. 温湿度传感器DHT11程序示例

    DHT11概述 HT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器. 它应用专用的数字模块采集技术和温湿度传感技术,确保产品具有极高的可靠性与卓越的长期稳定性.传感器包括一个电阻式 ...

  6. Centos7安装Java8

    centos7 用yum安装java8  

  7. mysql DISTINCT选取多个字段,获取distinct后的行信息

    背景:      a表保存关联关系,通过ACode 获取该关系中的所有 BCode, 并获取所有Bcode-max(Bvrsn)的信息  Bnm 表a 表b          循序渐进:        ...

  8. 搭建ipse隧道

    我没有太多的物理服务器,实验环境只能用四台装了linux的虚拟机来模拟,用户层工具是openswan.大致拓扑如下(我有点懒,公网地址我用的194.168.10.0/24,别和192.168.xx.x ...

  9. “3D引擎和图形学技术点思路讲解”线上直播培训班报名开始啦(完全免费)

    大家好,我开了一个线上的直播课程培训班,完全免费,欢迎大家报名! 本课程重点教授"光线追踪"方面的实现思路. 我的相关经验 5年3D引擎开发经验 Wonder-WebGL 3D引擎 ...

  10. 从源码角度来分析线程池-ThreadPoolExecutor实现原理

    作为一名Java开发工程师,想必性能问题是不可避免的.通常,在遇到性能瓶颈时第一时间肯定会想到利用缓存来解决问题,然而缓存虽好用,但也并非万能,某些场景依然无法覆盖.比如:需要实时.多次调用第三方AP ...