Vue快速上手

Vue快速上手

前端核心分析

Vue 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转 ， vue-resource：通信， vuex：管理）或既有项目整合。

• 视图层：Vue
• 网络通信：axios
• 页面跳转：vue-router
• 状态管理：vuex

渐进式解释：先使用 Vue 的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。相较于 Angular 和 React 没有那么强势的主张，易于和其它技术混用。

详细解释：Vue----渐进式框架的理解

CSS预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS增加了一些编程的特性。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web 页面样式设计，再通过编译器转化为正常的 CSS文件，以供项目使用”。

常用的 CSS 预处理器有：

• SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
• LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于SASS，但在实际开发中足够了，所以后台人员如果需要的话，建议使用 LESS。

总结：使用 less 进行编程开发，最后可以生成常见的 CSS。

JS

原生 JS 开发，按照【ECMAScript】标准的开发方式，简称是 ES，特点是所有浏览器都支持。ES 标准已发布如下版本：

• ES3
• ES4
• ES5（全浏览器支持）
• ES6（常用，但版本较高，通过 webpack 打包可以成为 ES5 支持的）
• ……

TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

总结：使用 TS 进行编程开发，最后可以生成 JS。

UI 框架

• Ant-Design：阿里巴巴出品，基于 Reac t的 UI 框架
• ElementUl、iview：饿了么出品，基于 Vue 的 UI 框架
• Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
• AmazeUI：又叫“妹子UI”,一款 HTML5 跨屏前端框架

留意两个前端解决方案：iview-admin、vue-element-admin（天然与 vue 是适配，一定要会）

JS 构建工具

• Babel：JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript
• WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

NodeJS

前端人员为了方便开发也需要掌握一定的后端技术，但 Java 后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了 NodeJS 这样的技术。

• Express：NodeJS 框架
• Koa：Express 简化版
• NPM：项目综合管理工具，类似于 Maven
• YARN：NPM的替代方案，类似于 Maven 和 Gradle 的关系

使用 NodeJs 后，前端也可以造数据进行开发、测试，类似 “全栈”。

Vue 基础

• Model：模型层，在这里表示 JavaScript 对象（就是数据）
• View：视图层，在这里表示 DOM（ HTML 操作的元素）
• ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者。

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者。

• ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
• ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定。

关于 vue 基础语法、事件、双向绑定，在之前的黑马四小时入门中已经有过记录，这里不再重复。

计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存!

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

第一个vue-cli程序

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板。

使用 vue-cli 需要环境：node.js（安装时无脑下一步即可）

检验安装：

在 cmd 下输入 node -v，查看是否安装成功

在 cmd 下输入 npm -v，查看是否安装成功（安装 node.js 时已经包含 npm）

安装 Node.js 淘宝镜像加速器（cnpm）：

# -g 全局安装
npm install cnpm -g
# 或不安装，直接使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

一般直接用 npm 即可，当下载国外的依赖过慢时，再考虑 cnpm（因为它可能存在一些莫名其妙的问题）。

安装 vue-cli：

cnpm install vue-cli -g

# 检测安装成功
# 查看可以基于哪些模板创建 vue 程序
vue list

创建一个空文件夹

直接在桌面建了：D:\Desktop\vue-test

然后在 cmd 下进入该目录：

创建基于 webpack 模板的 vue 程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

然后会出现一堆选项，如果不想后续手动配置，直接一路回车/yes 即可，这里为了学习，全选 no。

• Project name：项目名称，默认 回车 即可
• Project description：项目描述，默认 回车 即可
• Author：项目作者，默认 回车 即可
• Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
• UseESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
• Set up unit tests：单元测试，选择 n 不安装（后期需要再手动添加）
• Setup e2e tests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
• Should we run npm install for you after the project has been created：创建完成后直接初始化，选择n，我们手动执行;运行结果!

初始化并运行

cd myvue # 进入刚刚新建的项目
npm install # 根据 package.json 文件下载相关依赖
npm run dev # 运行

成功运行如下：

目录结构

关于 assets 和 static ，都能存放静态资源：区别

Webpack

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片 等都作为模块来处理和使用。

能讲 ES6 降级 为 ES5，使得所有浏览器都能运行该项目。

安装：

npm install webpack -g
npm install webpack-cli -g

# 测试安装成功
webpack -v
webpack-cli -v

使用

1.创建一个空的项目

2.创建一个名为 modules 的目录，用于放置 JS 模块等资源文件

3.在 modules 文件下创建模块文件，如 hello.js（用于编写 JS 模块相关代码）

4.在 modules 文件下创建 main.js 入口文件（打包时从这个文件开始）

在实际开发过程中，可能有很多个类似于 hello.js 这样的模块，但最终都能通过入口文件找到。

5.创建 webpack.config.js 配置文件，使用 webpack 命令打包

打包后自动生成 dist 文件：

6.任意创建 html 页面，引入刚刚打包好的 bundle.js 进行测试

vue-router路由

vue-router 是一个插件包，需要 npm 进行安装。（基于第一个 vue-cli 项目进行测试）

安装

npm install vue-router --save-dev

好家伙，一安就报错：

一看就是版本问题，因此更换命令：

cnpm install [email protected] --save-dev

安装成功后可以在 node_modules 下搜索到：

小tip：vue-router3 对应 vue2，vue-router4 对应 vue3

安装完毕后，如果要使用则需引入：

测试

1.定义一个 Content.vue 的组件

2.安装路由，在 src 目录下，新建 router 文件夹存放路由

注意：上面写了个空路由会报错 [vue-router] "path" is required in a route configuration. 因此必须删去。

3.在 main.js 中配置路由

4.在 App.vue 中使用路由

参考

【狂神说Java】Vue最新快速上手教程通俗易懂 ，与黑马的四小时入门有所不同。

两者风格不同，黑马的教程更系统、基础一些，狂神的更宽泛，直接讲项目实操，两者可相互补充。