WebPack是模块捆绑器,如果你的代码跨越了不同模块(例如不同Javascript文件),web pack可以将这些零散的代码构建到浏览器可读单个文件中。

web pack还可以作为构建通道,你可以在构建代码之前对代码进行转换,例如使用Babel/Sass或TypeScript还可以使用一系列插件来优化你的应用程序。

很多开发人员觉得web pack难以掌握,配置起来也很麻烦,但如果没有它,将无法使用Vue的一些功能(如单个文件组件)。

最近发布的VueCLI3提供了一种用于在Vue项目中抽象和自动配置web pack的解决方案。

这是否意味着你不需要学习web pack了?当然不是,因为你仍然不可避免的需要进行定制或调试web pack配置。

Vue 的框架

构建在 Vue 之上的框架让你无需从头开始实现服务器端渲染,还可以创建自己的组件库以及完成很多其他常见任务。

有很多很好的 Vue 框架,在这里我们只列出使用最为广泛和最重要的三个框架。

Nuxt.js

如果你想要构建一个高性能的 Vue 应用程序,就需要基于组件的路由、服务器端渲染、代码拆分和其他尖端的功能。你还需要像 SEO 标签这样的功能。

Nuxt.js 通过各种社区插件提供了这些开箱即用的功能,以及更多的功能选项,如 PWA。

Vuetify

谷歌的 Material Design 是一个使用十分广泛的指南,用于构建漂亮的逻辑用户界面,并被用在谷歌的产品(如 Android 和 Web)当中。

Vuetify 在一系列 Vue 组件中实现了 Material Design。因此,你可以使用 Material Design 布局和样式快速构建 Vue 应用程序,以及模态、警报、导航栏、分页等小部件。

NativeScript-Vue

Vue.js 是一个用于构建 Web 用户界面的库。如果你想将它用于原生移动界面,可以使用 NativeScript-Vue 框架。

NativeScript 是一个用于在 iOS 和 Android 上使用原生用户界面组件构建应用程序的系统,而 NativeScript-Vue 是一个基于 NativeScript 的框架,提供了 Vue 的语法和组件的使用方式。

其他

插件开发

如果要在项目中重用 Vue 功能或为 Vue 生态系统做贡献,可以将功能作为 Vue 插件来开发。

动画

如果你需要使用动画,请了解一下 Vue 的过渡系统,它也是 Vue 核心的一部分。你可以在向 DOM 添加元素或从 DOM 中删除元素时应用动画。

你需要创建 CSS 类来定义所需的动画效果,无论是淡入淡出、更改颜色还是你喜欢的其他方式。当向 DOM 中添加元素或从 DOM 中删除元素时,Vue 会检测到这些变更,并在过渡期间添加或删除相应的 CSS 类。

渐进式 Web 应用程序

渐进式 Web 应用程序(PWA)就像普通的 Web 应用程序一样,只是加入了改进的用户体验。例如,PWA 可能包括脱机缓存、服务器端渲染、推送通知等。

大多数 PWA 功能可以通过 Vue CLI 3 插件或使用 Nuxt.js 等框架添加到 Vue 应用程序中,但你仍然需要了解一些关键技术,包括 Web App Manifest 和 ServiceWorker。

-自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的朋友。

web pack的更多相关文章

  1. web pack的使用事项

    一开始把webpack想的很难,很复杂,哈哈. 其实写的好的东西真的是越简单,越简单的东西其实越难写. 按照How to一步一步基本就能理解,webpack怎么使用了, 后面就是如何帮程序一步一步找到 ...

  2. 配置web pack loader 报错:Module build failed: Error: The node API for `babel` has been moved to `babel-core`.

    报错如下 Module build failed: Error: The node API for `babel` has been moved to `babel-core`. 在我配置loader ...

  3. web pack 生成本地dist后 本地可以访问 路径由/ 改 ./

    config / index.js 里面将 / 改成 ./ 有两个 都改了 反正管用 然后npm run build 如果涉及到字体 css里面不会改 需要手工改成 ../../ 反正一般用到字体也不 ...

  4. web pack备忘

    全局安装:npm install webpack -g npm i module_name -S = > npm install module_name --save 写入到 dependenc ...

  5. vue cli web pack 全局引入jquery

    之前 装过,装 npm i —save  jquery  然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...

  6. html-webpack-template, 一个更好的html web service插件

    源代码名称:html-webpack-template 源代码网址:http://www.github.com/jaketrent/html-webpack-template html-webpack ...

  7. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  8. React+Node初尝试

    这是第一次写React和Node,选用的是前端Material-ui框架,后端使用的是Express框架,数据库采用的是Mongodb. 项目代码在:GitHub/lilu_movie 这是一个通过从 ...

  9. 在找一份相对完整的Webpack项目配置指南么?这里有

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

随机推荐

  1. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  2. php *-devel

    源码编译安装个php,缺少好多-devel的库. why devel? devel包至少包括头文件和链接库.如果你的要安装的源码依赖某个库,那肯定需要这两样东西. 让apache支持php 在编译ph ...

  3. 关于datagridview中checkbox列在选中行的情况下无法操作值

    这几天做项目的时候碰到了个小问题,在datagridview中实现对checkbox列的全选和反选功能.代码如下              //全选              if (dataGrid ...

  4. [工作积累点滴整理]虚拟化、云计算配置规划<一>

    目 录1. 服务器虚拟化的相关配置建议 11.1. 服务器的基本配置建议 11.1.1. CPU配置 11.1.2. 服务器内存配置 21.1.3. 物理网卡配置 21.1.4. 服务器磁盘配置 21 ...

  5. springMvc-入参对象

    1.修改或者添加对象 2.多添件查询时候也会遇到 springMvc能够根据属性自动的封装pojo的对象并且支持关联的对象:大致的原理是在传入后台的时候把前台的属性和对象封装成json的形式传入后台, ...

  6. 《浪潮之巅》(第2版):精彩的IT商战史

    2011年看过第一版.以为看新版会跳过大部分看过的内容,结果发现还是从头到尾看了一遍,2011年看过的内容已经记不太确切了:) 另外IT的历史太精彩了,许多故事都知道,再看还是挺有意思.当然作者的文字 ...

  7. Scrum第三次冲刺

    1.第三次冲刺任务概述 我们设计的长大万能通系统主要实现以下几个功能: a.周边查询 b.快递代取 c.查看校内新闻动态 d.二手物品交易 第三次冲刺我们计划实现周边查询功能.可以根据评分.距离最近. ...

  8. Kubernetes API server工作原理

    作为Kubernetes的使用者,每天用得最多的命令就是kubectl XXX了. kubectl其实就是一个控制台,主要提供的功能: 1. 提供Kubernetes集群管理的REST API接口,包 ...

  9. UESTC 574 High-level ancients

    分析: 无论父节点增加了多少,子节点的增量总比父节点多1. 这种差分的关系是保存不变的,我们可以一遍dfs根据结点深度得到在根结点的每个点的系数. 估且把一开始的结点深度称做c0吧,对于子树的修改就只 ...

  10. python:验证客户端链接的合法性与socketserver

    一.验证客户端链接的合法性 from socket import * import hmac,os secret_key=b'linhaifeng bang bang bang' def conn_a ...