vue跟JavaScript有什么关系 vue与js的区别

转载

架构魔法之光 2023-12-16 22:28:43

文章标签 vue跟JavaScript有什么关系 vue.js 前端 javascript Vue 文章分类 JavaScript 前端开发

文章目录

1. Vue.js 是什么

1.1 作用
1.２ Vue 与其他框架的对比

2. 引入Vue

2.1 标签引入
2.2 CDN引入

3. vue-cli脚手架
参考文献

本文源自实验楼课程学习内容

1. Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.1 作用

Vue.js 框架的作用主要注重动态的构建用户界面，前端工程化和模块化开发。

1.２ Vue 与其他框架的对比

Vue与其他框架的简单对比：

框架	设计模式	数据绑定	灵活度	文件模式	复杂性	学习曲线	生态
Vue	MVVM	双向	灵活	单文件	小	缓	完善
React	MVC	单向	较灵活	all in js	大	陡	丰富
Angular	MVC	双向	固定	多文件	较大	较陡（Typescript）	独立

更多对比细节：vue 官网那么什么是MVVM，什么又是MVC呢？MVVM和MVC区别的总结

Vue 是一个推陈出新的前端框架，吸收了很多前端框架的优点。例如，Vue 借鉴了 React 的组件化和虚拟 DOM ，借鉴了 Angular 的模块化和数据绑定。因此，我们以 Vue.js 作为入手，以后深入学习其他框架，你会发现他们的共通之处，更好地高效地学习。

选择 Vue.js 的更多原因是，就框架的 API 而言，对比之下，Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包（Vuex,Vue-Router）等，复杂性低、学习成本低，是一门比较好入门的前端框架。

2. 引入Vue

2.1 标签引入

标签引入模式，和平常引入JQuery一样，直接下载并用 script 标签引入，vue.js 下载地址

<script src="js/vue.min.js"></script>

2.2 CDN引入

不用下载到本地，即引即用，学习推荐使用这种模式：
推荐 2 个较稳定的 cdn,以下任选其一

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3. vue-cli脚手架

在使用vue的时候，我们经常会使用到vue-cli。那么什么是vue-cli呢？
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。