5

Vue安装到精通 项目实战（2021最新！）

 3 years ago
source link: https://blog.csdn.net/weixin_53601359/article/details/115680277
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vue概念

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。

ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，洗白其一直被“鄙视”的脚本语言的前身。
在这里插入图片描述

随着js的强大，三大巨头横空推出，形成鼎足之势。前端新三大框架：Angular/React/Vue，三种是目前主流js框架。Angular全面，项目代码多；Vue轻便，针对性解决问题，拿来就用，开发存在局限性。新手可以从vue上手，再去了解react和angular。

Vue是我们国人开发，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。Vue3.0使用TypeScript，TypeScript是JavaScript的超集，微软研发，语法更加细致严谨，改js脚本语言为向一线强语言java、c靠拢，可以构建大型项目，基于ES6标准。

渐进式框架

在这里插入图片描述
Vue是一个用于构建用户界面的渐进式SPA单一页面框架。与其他庞大而单一框架不同的是，Vue从一开始就被设计为可逐步采用。

  • 可以只使用vue.js
  • 可以只使用vue.js + components组件
  • 可以只使用vue.js + components组件 + router路由
  • 可以只使用vue.js + components组件 + router路由 + vuex状态管理
  • 构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

Vue安装

安装配置npm

验证node.js 安装：

dos命令提示符下执行（有版本号即安装成功）：

node安装（v8.11.3，至少8以上）

node -v

npm安装（v5.6.0）

npm -v

参考博客：https://blog.csdn.net/weixin_53601359/article/details/115680033

安装 cnpm

cnpm是一个完整 npmjs.org 镜像，可以用此代替nodejs.org官方版本，同步频率目前为10分钟一次，以保证尽量与官方服务同步。（目的为了提高访问、下载速度）

查看当前配置的镜像源

npm config get registry

执行结果：

https://registry.npmjs.org/
或者
https://registry.npm.taobao.org/

npm切换到淘宝镜像方式（提高下载速度）：

npm config set registry https://registry.npm.taobao.org

直接使用淘宝镜像命令方式：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm版本，有版本号即安装成功（直接支持cnpm命令，和npm一样只是库不同）

cnpm –v

脚手架安装

vue-cli 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g #安装vue-cli脚手架
npm uninstall vue-cli -g #卸载vue-cli脚手架

查看版本（有版本号即安装成功）：

vue --version # 2.9.6
vue -V

生成vue 项目

指定文件下开启cmd，project为自定义项目名称，不可使用大写

vue init webpack project
在这里插入图片描述
在这里插入图片描述
安装成功：

在这里插入图片描述

To get started:
cd project 进入项目
npm run dev 启动服务，ctrl+c停止

在这里插入图片描述
注意：端口号可能不同，默认为8080，如果发现端口占用npm会自动改变端口号，具体 以当前环境为准。
在这里插入图片描述

Vue目录结构

这个目录结构非常重要。就如你要生孩子去妇幼保健院，你要游泳去游泳馆。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。

  • src 目录是一个很大的目录，包罗万象
  • components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue
  • router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。router非常强大，老系统是URL改变是在服务端进行刷新，而router支持在客户端刷新，就是URL变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。
  • view 就是用户要访问的页面都存放在这个目录下，如Index.vue
  • static中保存一些静态的资源，如jquery、css、图片等
  • package.json 各组件版本，特别启动的参数
    在这里插入图片描述
  • build/webpack.dev.config.js 核心默认配置文件，启动的配置参数在这里插入图片描述
  • build/webpack.base.conf.js 基础配置文件
    在这里插入图片描述
  • index.html 首页，Vue是SPA单页面开发，页面入口，定义div#app
  • src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中
    在这里插入图片描述
  • src/App.vue 根组件
    在这里插入图片描述
  • src/router/index.js 引入子组件HellWorld.vue
    在这里插入图片描述

调用关系图

在这里插入图片描述
简单来说项目加载的过程是：

index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue

可以看到Vue项目是自有一套规则，一套机制的，非常系统化的。有固定的文件，有自定义的文件，各自放在指定的目录下，指定的文件中，指定的地方，最终来实现用户的需求。那在开发之前，你就必须了解这套机制，写代码的时候就规则清晰，如有神助，知道该如果写代码，知道为什么这么写，代码文件该放在哪，它们是谁调用谁，互相怎么调用的了。

MVVM概念

和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是，传统js机制操作的是页面，像html+css+js项目，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。
在这里插入图片描述

  • 一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
  • 其核心思想是数据驱动、组件化的前端开发
  • 原生html页面操作的是dom，而vue.js操作的是数据，从而屏蔽了复杂晦涩难懂的dom结构。和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是组件，是数据，也更加符合面向对象的方式

MVC和MVVM框架区别

在这里插入图片描述
MVC全名是Model-View-Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
在这里插入图片描述
MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事 ViewModel已经帮我们做了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

项目分析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/vue.js" type="text/javascript"></script>
	</head>

	<body>
      <div id="app">
        <p>{{message}}</p>
      </div>
	</body>

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

创建Vue匿名对象，直接参数就是一个对象，一个类似json格式的js对象，这样的代码结构更加简洁。

Vue对象的参数：

  • el： 绑定到指定名称的html标签上
  • data： 绑定的数据，相当于给html中使用的时候所传的值

Vue生命周期 lifecycle

使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。

如页面创建时，页面加载时，页面更新时，页面销毁时？

在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。

生命周期函数：

  • vue实例在某一个时间点会自动执行这些函数；
  • 生命周期钩子函数不允许写成箭头函数；
    可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

细分每个过程：

默认值取值范围new Vue创建vue实例init events & lifecycle开始初始化beforeCreate组件刚被创建，组件属于计算之前，如data属性等init injections & reactivity通过依赖注入导入依赖项created组件实例创建完成，属性已绑定，此时DOM还未生成el 属性检查vue配置，即new Vue()里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用v.$mount()template检查配置中的template项，如果没有，则被绑定区域的el对象的outHTML（即整个#app DOM ，包括 标签）都作为被填充对象替换掉填充区域beforeMount模板编译、挂载之前create v$el and replace el编译、并替换了被绑定元素mounted编译、挂载befor update组件更新之前updated组件更新之后destroy当v.$destroy()被调用，开始拆卸组件和监听器，生命周期终结

在这里插入图片描述

组件化（Element-UI）

组件 (Component) 是 Vue.js 最强大的功能之一。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。可以理解为组件是对HTML元素的扩展。它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。
在这里插入图片描述
Element：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。界面优美，浏览器兼容，事半功倍。
在这里插入图片描述
官网地址：

https://element.eleme.cn/#/zh-CN #首页
https://element.eleme.cn/#/zh-CN/component/layout #组件页
https://unpkg.com/browse/[email protected]/ 组件下载地址

ElementUI 安装

在Vue项目目录下运行CMD
npm i element-ui -D

将element-ui文件放到rc目录下：
包含：js脚本、css样式文件、.ttf、.woff字体文件
在这里插入图片描述

拓展：观察者设计模式

设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇就来自对经典设计模式的应用。所以如果只会应用不懂其义，那你只是个码农；如何能领会设计模式的奥义，你就有了高级程序员的潜力；如果你能自己仿写，你就有了架构师的入门证。

Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了“观察者设计模式”。

那什么是观察者设计模式呢？

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。
在这里插入图片描述

  • 页面data中的address就是数据
  • get为获取当前数据，set为设置数据新值
  • 观察者watcher就为那多个插值表达式和input文本框，在页面加载时这些关系进行双向绑定
  • 当我们让数据变化时，如input文本框修改内容，其就调用数据的set的方法，把数据进行更新，其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger，进行再次渲染re-render，修改虚拟dom树。最终vue框架局部宣传页面
  • 同样，当我们利用谷歌浏览器改变数据v.address赋值时，就调用数据的setter方法进行数据更新，数据更新后，通知众多的观察者，观察者更新如上面的流程

可以看出Vue设计非常巧妙，我们页面展现的数据，必然会涉及到数据的读写，于是Vue实现了一整套机制，这套机制监控数据的获取（get），数据的更新（set），这样当数据变化，Vue就能知道。它知道有什么用呢？它就能控制当数据变化时就能重新进行页面的渲染，从而用户看到页面展现新的内容。

可以看到Vue这类为何称为框架，名副其实，当之无愧。写javaScript时，我们要先去学习其复杂的api（document.getElementById()），写jQuery时，又学一套复杂的api(一堆的选择器)，特别它的写法虽然简洁，却晦涩难懂，需要死记大量英文单词，初学者极易写错，门槛很高，就现在很多企业的程序员依然被绊倒，说不明白，讲不清楚，使用中bug满天飞，一堆糊涂虫。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK