Vue基础入门

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