从零开始学Vue（零）开天辟地

最新推荐文章于 2024-08-19 13:55:31 发布

Ruonorth

最新推荐文章于 2024-08-19 13:55:31 发布

阅读量876

点赞数

分类专栏： vue 文章标签： mvvm 框架 vue

本文链接：https://blog.csdn.net/riddle1981/article/details/76794896

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、什么是Vue
官方文档是这样说的：

Vue是一套用于构建用户界面的渐进式框架。

也就是说vue是基于数据驱动和组件化的前端框架JavaScript MVVM库

那么该如何理解渐进式框架呢？这里的框架是指MVVM框架，关于渐进式是指与其他框架想比更少的主张。也就是足够的optional，但并不主张很多required。

当什么时候我们需要用到vue？
当我们更加关注Model的变化时，就可以让vue框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来。
当我们需要多人协作开发前端时，组件化的框架可以使多人协作变得更方便。这需要写好自己这部分的组件不需要关注整体架构。
当我们打算学习一门前端框架语言时，vue也是一个不错的选择，因为它轻量、快速且模板友好。学习容易。

关于MVVM这里也做一个简单介绍：
MVVM（Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的开发模式，他与MVC模式一样用于把视图（界面）和数据进行解耦，不同的是采用ViewModel来完成数据与视图的双向绑定，通过自动化的方式承担大部分数据工作，来解决由于界面复杂化和快速迭代带来的问题。它的技术模型如下图所示

这里写图片描述

三、开发环境的搭建
关于编辑器这里推荐两个
1、 vscode ：一款轻量级的编辑器
2、webstorm：功能更加全面

在这里我更加推荐第二个，首先是ws自带vue高亮插件，智能提示做的非常好，在配上eslint写起代码非常的规范且高效。但是具体使用哪个还是看个人偏向。适合自己的才是最好的！

关于vue的安装方式，有两种方式，第一种是是用script链接引入存放在服务器上的依赖。

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

第二种则是使用npm将依赖安装到本地

cnpm install vue

如果你准备搭建一个基于vue的但页面应用，可以使用脚手架vue-cil
这里强烈推荐使用cnpm而非npm 因为如果使用npm可能因为时间过长而报错！

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
$ cd my-project
$ cnpm install
$ cnpm run dev

当你键入完这些命令，一切顺利的话，将会看到以下画面
这里写图片描述

三、Hello World！
所有的语言学习都是从hello world开始的，本文也不会例外。打开app.vue自己更改以下文字试试吧！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})
</script>
</body>
</html>

四、总结
与其他的mvvm框架想比，vue非常易学，只要愿意踏踏实实的去学以致用，学会vue非常容易。但是任何一门语言都是易学难精的vue也是如此。这系列文章将会持续更新，主要会以vue-cil来讲解，一切为了实战！因为自己在学习vue的时候也踩过很多坑，一步步摸索前行，找到一些解决方法，会写进去一些自己的经验理解，希望大家能够共同进步！