Vue框架简介和环境搭建

前言：

此篇随笔为个人学习前端框架Vue,js的技术笔记，主要记录一些自己在学习Vue框架的心得体会和技术总结，作为回顾和笔记使用。

这种写博客的方式，对刚开始学习Vue框架的我，也是一种激励，我相信，随着时间的推移与沉淀，可以写出更好的参考笔记和技术文档。

一、Vue简介

Vue官网地址：https://cn.vuejs.org/

1.前端技术的发展

HTML：HTML主要用来编写网页的结构，例如<a></a>表示超链接。

CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。

JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。

jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。

Vue：Vue通过虚拟DOM技术来减少对DOM的直接操作；通过尽可能简单的API来实现响应的数据绑定，支持单向和双向数据绑定。

2.什么是Vue

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

ps:深入了解vue框架

2.1Vue的基本工作原理图：

Vue的数据驱动通过mvvm(model-view-viewmodel ) 模式实现，其基本工作原理如下图所示

VUE的工作原理：

由上图可见，MVVM主要由模型、视图和视图模型三部分组成。 Model是指数据部分，主要负责业务数据的View是指视图的部分，也就是DOM元素，负责处理视图。 ViewModel是连接视图和数据的数据模型，用于拦截模型或视图的更改。

MVVM无法直接与数据模型和视图视图进行通信。 视图模型ViewModel相当于观察者，监视双方的动作，及时通知进行适当的操作。 当Model发生变化时，ViewModel可以拦截该变化，并通知View适当的修改。 相反，当View发生变化时，ViewModel在拦截变化后，通知Model修改，解除视图和模型的相互连接。

2.2Vue的特性

• 轻量级

Angular学习成本高，使用方便，但Vue比较简单直接，所以Vue更容易使用。

• .数据绑定

Vue是一个MVVM框架，数据是双向绑定的。 这意味着，当数据发生变化时，视图也会发生变化，当视图发生变化时，数据也会同步发生变化。 这也是Vue的精髓。 Vue的双向数据绑定非常有用，特别是在表单处理方面。

• .命令

命令主要包括内置命令和自定义命令，以“v-”开头，作用于HTML元素。 指令具有在将指令绑定到元素时向绑定元素添加特殊行为的特殊特性。 例如，v-bind动态绑定命令、v-if条件渲染命令和v- for列表渲染命令。

• .插件

插件用于扩展Vue框架的功能，在MyPlugin.install中完成插件的创建，并可以轻松地配置和全局使用。 常用的扩展插件有vue-router、Vuex等。

ps:参考博主

3.前端三大主流框架

React 、Angular 、Vue 也是Web前端开发必学的三大框架

3.1React

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

特性：

• 声明式设计：React采用声明范式，可以轻松描述应用。
• 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 灵活：React可以与已知的库或框架很好地配合。

3.2Angular

Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

特性：

• 良好的应用程序结构
• 双向数据绑定
• 指令
• HTML模板
• 可嵌入、注入和测试

3.3Vue

Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

渐进式构建能力是vue.js最大的优势，vue有一个简洁而且合理的架构，使得它易于理解和构建。

二、开发环境的搭建

1.Visual Studio Code编辑器

下载地址：https://code.visualstudio.com/Download

1.1Visual Studio Code编辑器特点：

• 轻巧极速，占用系统资源较少
• 具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能
• 跨平台
• 主题界面的设计比较人性化
• 提供了丰富的插件

2.Vue的下载和引入

Vue官网地址：https://cn.vuejs.org/

Vue官网版本展示：

Vue核心文件vue.js引入：

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

3.git-bash命令行工具

官网地址：https://git-scm.com/

git-bash下载安装：

git-bash启动：

可以在桌面（安装完成后自动出现在右键菜单里）或者文件夹下右键启动，注意命令位置

4.Node.js环境

node官网地址：http://nodejs.cn/download/

打开node官网下载压缩包：

安装node：点击对话框中的“Next”，进入下一步。

查看node版本：打开命令工具，执行“node –v” 命令查看版本号。

5.npm包管理工具

npm的基本概念：npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题。

配置npm服务器为淘宝服务器：

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

使用场景需求：

• 从npm服务器下载别人编写的第三方包到本地使用。
• 从npm服务器下载并安装别人编写的命令程序到本地使用。
• 将自己编写的包或命令行程序上传到npm服务器供别人使用。

npm官网地址：https://www.npmjs.cn/

常用命令：

• pnpm install：安装项目所需要的全部包，需要配置package.json文件。
• pnpm uninstall：卸载指定名称的包。
• pnpm install 包名：安装指定名称的包。
• pnpm update：更新指定名称的包。
• pnpm start：项目启动。
• npm run build：项目构建。

6.Chrome浏览器和vue-devtools扩展

vue-devtools：vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用，只需下载官方压缩包，配置Chrome浏览器的扩展程序即可使用

vue-devtools安装包的安装步骤：

• ①下载vue-devtools-5.1.1.zip压缩包到本地。
• ②解压好的vue-devtools-5.1.1目录，安装依赖。
• ③构建vue-devtools工具插件。

扩展配置：打开浏览器，单击浏览器地址栏右边的“   ”按钮，在弹出的菜单中选择“更多工具” →“扩展程序”。

配置完成后查看vue-devtools工具的信息。

三、安装webpack

官网地址：https://www.webpackjs.com/

1.webpack的基本概念：

webpack是一个模块打包工具，可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起，实现自动化构建，给前端开发人员带来了极大的便利。

webpack的安装以及卸载，以及查看webpack版本：

• 安装webpack：npm install webpack@4.27.x webpack-cli@3.3.x -g
  
   
• 查看webpack版本：webpack -v
  
   
• 卸载webpack：npm uninstall webpack webpack-cli -g

注：

• -g为全局配置
• 4.X版本的webpack还需要安装webpack-cli命令行工具，
• 3.x版本的webpack打包工具已经集成了命令行工具。

2.webpack的简单使用

2.1案例：编写example.js文件。

function add(a, b) {
  return a + b
}
console.log(add(1 , 2))

webpack打包example.js文件到app.js。

webpack example.js -o app.js

在浏览器中执行结果。

3.构建Vue项目

HelloWorld实例

 

案例实现：安装脚手架工具vue-cli@2.9.x。

下载前需要将服务器改为国内服务器下载：

配置npm服务器为淘宝服务器：

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

下载自动配置工具脚手架

npm install vue-cli@2.9.x -g

初始化Vue项目myapp。

vue init webpack myapp

3.1使用脚手架创建的Vue项目目录结构解读。

目录结构	说明
build	项目构建（webpack）相关代码
config	配置文件目录
node_modules	依赖模块
src	源码目录
static	静态资源目录
test	初始测试目录
index.html	首页入口文件
package.json	项目配置文件
README.md	项目说明文档

启动Vue项目。

cd myapp

npm run dev

项目展示：通过访问localhost:8080，展示启动后的Vue项目

四、vue配置问题

1.webpack : 无法加载文件

执行此方法

解决问题后

参考博主：https://blog.csdn.net/qq_44728901/article/details/114434972

2.pack.json测试-如何寻找pack.json文件：

参考博主：https://blog.csdn.net/dfsgwe1231/article/details/107260212

3.谷歌类中vue扩展工具出错

Vue.js not detected:

参考博主：https://www.cnblogs.com/yummylucky/p/10506001.html

ps:以上内容为个人学习笔记，仅供参考

参考文献：传智播客-黑马程序员 教材《Vue.js前端开发实战》