Vue基础入门

一、了解Vue的核心设计思想
- 1.1 初识Vue
- - 1.1.1 前端技术的发展
  - 1.1.2 Vue的基本概念
  - 1.1.3 Vue的基本工作原理图
  - 1.1.4 Vue的优势
  - 1.1.5 Vue、Angular和React的区别
二、开发环境
- 2.1 Visual Studio Code编辑器
- - 2.1.1 下载地址
  - 2.1.2 Visual Studio Code编辑器特点
- 2.2 Vue的下载和引入
- 2.3 git-bash命令行工具
- 2.4 Node.js环境
- 2.5 npm包管理工具
- - 2.5.1 npm官网地址
  - 2.5.2 npm的基本概念
  - 2.5.3 使用场景需求
  - 2.5.4 常用命令
- 2.6 Chrome浏览器和vue-devtools扩展
- - 2.6.1 vue-devtools安装包的安装步骤
  - 2.6.2 vue-devtools扩展配置
  - 2.6.3 vue-devtools扩展配置
- 2.7 Hello World案例
三、 webpack打包工具
- 3.1安装webpack
- - 3.1.1 webpack官网地址
  - 3.1.2 webpack的基本概念
  - 3.1.3 webpack的安装以及卸载，以及查看webpack版本
- 3.2 webpack的简单使用
- 3.3 构建Vue项目
小结

一、了解Vue的核心设计思想

1.1 初识Vue

1.1.1 前端技术的发展

HTML：HTML主要用来编写网页的结构，例如表示超链接。
CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。
JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。
jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。
Vue：Vue通过虚拟DOM技术来减少对DOM的直接操作；通过尽可能简单的API来实现响应的数据绑定，支持单向和双向数据绑定。

1.1.2 Vue的基本概念

Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架。
与其他大型框架相比，Vue被设计为可以自底向上逐层应用。
Vue可以开发一个全新项目，也可以将Vue引入到一个现有的项目中。

1.1.3 Vue的基本工作原理图

Model-View-ViewModel
在这里插入图片描述

1.1.4 Vue的优势

轻量级：Vue简单、直接，所以Vue使用起来更加友好；
数据绑定：数据驱动视图，视图也可以驱动数据；
指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为；
插件：插件用于对Vue框架功能进行扩展。

1.1.5 Vue、Angular和React的区别

React和Vue的中心思想是一切都是组件，组件之间可以实现嵌套；
React依赖虚拟DOM，而Vue使用的是DOM模板；
Vue在模板中提供了指令，过滤器等，可以非常方便和快捷的操作DOM；
React采用了特殊的JSX语法，Vue中也推崇编写以*.vue后缀命名的文件格式。

二、开发环境

2.1 Visual Studio Code编辑器

2.1.1 下载地址

Visual Studio Code下载地址：https://code.visualstudio.com/Download
在这里插入图片描述

2.1.2 Visual Studio Code编辑器特点

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

2.2 Vue的下载和引入

Vue官网地址：https://cn.vuejs.org/。
在这里插入图片描述

Vue官网版本展示：
在这里插入图片描述
Vue核心文件vue.js引入：

javascript">/*!1. Vue.js v2.6.102. (c) 2014-2019 Evan You3. Released under the MIT License.*/
<script src="vue.js"></script>

2.3 git-bash命令行工具

git-bash命令行工具官网地址： https://git-scm.com/。
在这里插入图片描述
git-bash下载安装：

git-bash启动：

2.4 Node.js环境

node官网地址：http://nodejs.cn/download/。
在这里插入图片描述
打开node官网下载压缩包：

安装node：点击对话框中的“Next”，进入下一步。
安装教程：2025最新版Node.js下载安装~保姆级教程

安装完成之后查看node版本：打开命令工具，执行“node –v” 命令查看版本号。
在这里插入图片描述
案例：编写Hello World程序，并在REPL交互式环境中执行JavaScript代码。

2.5 npm包管理工具

2.5.1 npm官网地址

npm官网地址：https://www.npmjs.cn/。
在这里插入图片描述

2.5.2 npm的基本概念

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

2.5.3 使用场景需求

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

2.5.4 常用命令

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

2.6 Chrome浏览器和vue-devtools扩展

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

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

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

2.6.2 vue-devtools扩展配置

打开浏览器，单击浏览器地址栏右边的“ ”按钮，在弹出的菜单中选择“更多工具” →“扩展程序”。
在这里插入图片描述

2.6.3 vue-devtools扩展配置

配置完成后查看vue-devtools工具的信息。
在这里插入图片描述

2.7 Hello World案例

案例：将使用Vue在页面中输出“Hello Vue.js”。
在这里插入图片描述
案例：引入vue.js核心文件。

javascript"><script src="vue.js"></script>
<body><div id=“app”>  // 根元素<!-- 将msg绑定到p元素 --><p>{{msg}}</p>  // 插入msg数据</div>  
</body>

案例：创建Vue实例。

javascript"><script>
var vm = new Vue({el: '#app',data: {msg: 'Hello Vue.js'}
})
</script>

三、 webpack打包工具

3.1安装webpack

3.1.1 webpack官网地址

webpack官网地址：https://www.webpackjs.com/。
在这里插入图片描述

3.1.2 webpack的基本概念

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

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

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

注意：旧版本的webpack还需要安装webpack-cli脚手架工具，而最新版本的webpack打包工具已经集成了脚手架工具。

3.2 webpack的简单使用

案例：编写example.js文件。

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

案例：webpack打包example.js文件到app.js。-o打包到指定文件
webpack example.js -o app.js
案例：在浏览器中执行结果。
在这里插入图片描述

3.3 构建Vue项目

项目展示：通过访问localhost:8080，展示启动后的Vue项目。
在这里插入图片描述
案例实现：安装脚手架工具vue-cli@2.9.x。

npm install vue-cli@2.9.x -g
案例实现：初始化Vue项目myapp。

vue init webpack myapp
案例实现：Vue项目目录结构。

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

案例实现：启动Vue项目。
cd myapp
npm run dev

附：
1.安装node.js
https://nodejs.org/download/release
根据操作系统不同选择不同版本
win7系统建议安装v12.x
安装后进入dos命令行输入
node -v
查看安装版本
2.npm包管理工具
查看版本
npm -v
3.修改镜像源
npm config set registry https://registry.npm.taobao.org
4.查看镜像源
npm config get registry
5.恢复默认的镜像源
npm config set registry https://registry.npmjs.org
6.查看安装的包
npm list --depth 0
7.卸载已安装的包 -g是否是全局
npm uninstall 报名@版本 -g
8.安装webpack打包工具
npm i webpack@4 webpack-cli@3 -g
9.将example.js打包成app.js
webpack example.js -o app.js
10.构建Vue项目
npm i vue@2 vue-cli@2 -g
npm i webpack@4 webpack-cli@3 -g
vue init webpack lesson
后面根据提示执行命令

小结

本文主要讲解了什么是Vue、Vue的特点和发展前景、Vue开发环境的搭建，以及webpack打包工具的使用。通过本文的学习，你应对Vue有一个整体的认识，能够编写一个简单的Hello World程序了。