1、Vue是什么？

1、Vue是什么？

一套用于构建用户界面的渐进式 JavaScript框架

当 Vue 与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页面应用提供驱动。

1.1、渐进式：

• Vue 可以自底向上逐层的应用
• 简单应用：只需一个轻量小巧的核心库
• 复杂应用：可以引入各式各样的 Vue 插件

1.2、Vue 的优势

• 轻量级
• 数据绑定
• 指令
• 插件

1.3、Vue 的特点

1. 采用组件化模式，提高代码复用率、且让代码更好维护。
2. 声明式编码，让编码人员无需直接操作 DOM ，提高开发效率。
3. 使用虚拟 DOM +优秀的 Diff 算法，尽量复用DOM节点。

1.3、npm 包管理工具

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

1.3.1、使用 npm 包管理工具可以解决如下场景的需求

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

1.3.2、npm 中的常用命令

• npm install：安装项目所需要的全部包，需要配置 package.json。
• npm uninstall：卸载指定名称的包。
• npm install 包名：安装指定名称的包，后面可以跟参数 “-g” 表示全局安装，“-save” 表示本地安装。
• npm update：更新指定名称的包。
• npm start：项目启动；通过 CDN 方式引入 Vue，可以缓解服务器的压力，加快文件的下载速度。
• npm run build：项目构建。

设置淘宝NPM镜像：

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

1.4、webpack 打包工具

webpack 是一个模块打包工具，可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起，实现自动化构建。

1.4.1、安装 webpack

在命令行中执行如下命令即可安装 webpack

npm install webpack@4.27.x -g

上述代码中， 4.27.x 是 webpack 版本号，表示安装 4.27.x 范围内的最新版本。

安装完成后，执行 “webpack -v” 命令，查看 webpack 版本

webpack -v4.27.1

如果要卸载 webpack

npm uninstall webpack

1.5、创建 Vue 项目

1. 先完成 vue-cli 脚手架工具的安装

   1. npm install vue-cli@2.9.x -g	
      

2. 执行命令初始化 vue 项目

   1. vue init webpack myapp
      

3. 在创建项目时，程序会询问项目的一些配置选项，直接按回车键使用默认值即可

   ​

   ​ myapp 目录结构

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