vue经典入门系列

骑猪看日落 2022-06-08 02:30 139阅读 0赞

半年前系统的看完vue的资料，现在对它做一个入门级的分享。说实话vue的中文资料太多了，不做展开。讨论之前我们还是先复习一下之前章节《[js模块化规约][js]》

**目录**

前言-为何要选择VUE

1.  名称解释

1.1. MVVM

1.2. SPA

1.3. SSR

2.  vue-cli

3.  Vue-devtools

--------------------

## 前言-为何要选择VUE ##

![Center][]

目前最火的MVVM前端框架，对比Angular，React有哪些优势？

*  Vue.js更轻量，gzip后大小资源20k+
 *  Vue.js更容易上手，学习曲线平稳
 *   吸取两家之长，借鉴啦angular的指令和react的组件化
 *  想了解[更多][Link 1]

# 1.  名称解释 #

## 1.1. MVVM ##

![Center 1][]

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点：

l  低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

l  可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑

l  独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码

l  可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

详细参考：[https://cn.vuejs.org/v2/guide/reactivity.html][https_cn.vuejs.org_v2_guide_reactivity.html]

思考：前端框架为何会有辣么多流行MVVC框架？

## 1.2. SPA ##

SPA：就是俗称的单页应用（SinglePage Web Application）

在移动端，特别是hybrid方式的H5应用中，性能问题一直是痛点。使用SPA，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验，说白了就是争夺前端渲染罢了。

## 1.3. SSR ##

服务器端渲染

[https://ssr.vuejs.org/zh/][https_ssr.vuejs.org_zh]

# 2.  vue-cli #

[vue-cli][]是vue.js的脚手架（**命令行小工具**），用于自动生成vue.js模板工程的。

**$npm** install -gvue       \#全局安装vue

**$npm** install -gwebpack   \#全局安装webpack

**$npm** install -gvue-cli   \#全局安装vue-cli

**$vue** –help    \#vue-cli命令帮助

**$vue** list   \#vue支持的项目模板

**$vue** init webpackprojectName  \#生成项目名为projectName的(webpack)模板

# 3.  Vue-devtools #

Vue 的官方调试工具[https://github.com/vuejs/vue-devtools][https_github.com_vuejs_vue-devtools]

如何快速编写一款vue组件，请参阅另一篇《[组件篇][Link 2]》![js][]

[js]: /images/20220608/83aed6178ada4b3e8091f72873d9277d.png
[Center]: /images/20220608/8c0f21a2a41b4bcbbd0b8a7ab66e5920.png
[Link 1]: https://cn.vuejs.org/v2/guide/comparison.html
[Center 1]: /images/20220608/00d913444a374e4baa9e1f0e56eee61a.png
[https_cn.vuejs.org_v2_guide_reactivity.html]: https://cn.vuejs.org/v2/guide/reactivity.html
[https_ssr.vuejs.org_zh]: https://ssr.vuejs.org/zh/
[vue-cli]: https://github.com/vuejs/vue-cli
[https_github.com_vuejs_vue-devtools]: https://github.com/vuejs/vue-devtools
[Link 2]: https://blog.csdn.net/alex_xfboy/article/details/77942954