什么是 Vue JS?

Vue是一个用于构建用户界面的渐进式框架。与其他单体框架不同,Vue 从头开始设计为可逐步采用。核心库只专注于视图层,很容易与其他库或现有项目集成和集成(https://vuejs.org/v2/guide/)。

为什么选择 Vue JS?

Vue 在几乎所有的基准测试中都优于Angular和React,而且它更容易上手。这是一个“进步”的框架。在最低级别,您可以像 jQuery 一样在前端简单地链接到它,并开始使用许多很酷的功能来解决最简单的 javascript/jQuery 需求。然后,如果你想把它构建成一个大的单页应用程序,如果你 PLUS 官方维护了支持框架(Vuex 和 Vue Router),那么你已经内置了对组件式开发和 React 式渲染的支持。 Vue 有“单文件组件”文件,允许您在单个文件中构建 HTML 模板、JS 代码和特定于组件的 CSS,Vue 和 Webpack 将适当处理 - 这实际上非常酷(https:// forum.freecodecamp.com/t/vue-js-resources/48285/4)。

示例:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--kNKPVUt_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://blog. creative-tim.com/wp-content/uploads/2017/05/ezgif.com-resize.gif)

Vue JS图片输入

BootstrapVue Argon Dashboard PRO by Creative Tim

[的 Vue Light Bootstrap 仪表板](https://res.cloudinary.com/practicaldev/image/fetch/s--jPwYGMLC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:/ /blog.creative-tim.com/wp-content/uploads/2017/05/opt_lbd_vue_thumbnail.jpg)

Vue Light Bootstrap DashboardbyCreative Tim

[的 Vuetify Material Dashboard](https://res.cloudinary.com/practicaldev/image/fetch/s--RYzwahAK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// blog.creative-tim.com/wp-content/uploads/2019/03/opt_md_vuetify_thumbnail.jpg)

Vuetify Material DashboardbyCreative Tim

[](https://res.cloudinary.com/practicaldev/image/fetch/s--e_Sm7TNz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog .creative-tim.com/blog/wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.08.16-1024x592.png)

Onsen Ui For 2

[](https://res.cloudinary.com/practicaldev/image/fetch/s--TXgTY3LD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.creative -tim.com/blog/wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.09.56-1024x591.png)

Vuetify.js

[](https://res.cloudinary.com/practicaldev/image/fetch/s--JEpFvpRd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.creative-tim .com/blog/wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.11.28-1024x543.png)

框架7

[](https://res.cloudinary.com/practicaldev/image/fetch/s--TwLCz6Sm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.creative- tim.com/blog/wp-content/uploads/2017/05/VueJS-1024x369.png)

VueJS Expo是使用 Vue.js 框架的网站、应用程序和实验的精彩展示

类星体框架

喜欢 UI

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KEC6-4MC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://creativetimblog.com /blog/wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.15.27-1024x570.png)

布菲

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Xw1-XPcE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://creativetimblog.com /blog/wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.16.43-1024x508.png)

元件

[](https://res.cloudinary.com/practicaldev/image/fetch/s--CxrJJaQa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://creativetimblog. com/blog/wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.26.06-1024x510.png)

Vue JS 入门模板

[](https://res.cloudinary.com/practicaldev/image/fetch/s--mlgyKT3X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://creativetimblog.com/blog /wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.27.11-1024x511.png)

验证

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GX4Rmgr2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%25C4%2583-de-ecran-din-2017.05.23-la-16.28.13-1024x508.png)

用于移动设备的 Vue.js 2.0 UI 元素

敏锐的用户界面

引导程序 Vue

[](https://res.cloudinary.com/practicaldev/image/fetch/s--t87Ets4q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://creativetimblog.com /blog/wp-content/uploads/2019/03/vue_thumb.jpg)

Vue Argon 仪表板