1、Vue是什么?
一套用于构建用户界面的渐进式 JavaScript框架
当 Vue 与现代化的工具链以及各种支持类库结合使用时,也完全能够为复杂的单页面应用提供驱动。
1.1、渐进式:
- Vue 可以自底向上逐层的应用
- 简单应用:只需一个轻量小巧的核心库
- 复杂应用:可以引入各式各样的 Vue 插件
1.2、Vue 的优势
- 轻量级
- 数据绑定
- 指令
- 插件
1.3、Vue 的特点
- 采用组件化模式,提高代码复用率、且让代码更好维护。
- 声明式编码,让编码人员无需直接操作 DOM ,提高开发效率。
- 使用虚拟 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 项目
-
先完成 vue-cli 脚手架工具的安装
-
npm install vue-cli@2.9.x -g
-
-
执行命令初始化 vue 项目
-
vue init webpack myapp
-
-
在创建项目时,程序会询问项目的一些配置选项,直接按回车键使用默认值即可
myapp 目录结构
目录结构 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置文件目录 |
mode_modules | 依赖模块 |
src | 源码目录 |
static | 静态资源目录 |
test | 初始测试目录 |
index.html | 首页入口文件 |
package.json | 项目配置文件 |
README.md | 项目说明文档 |