第 1 章 Vue.js 基础

为什么选择 Vue.js

使用框架，项目代码可维护程度提高，简化了大部分工作。

使用 Ajax 下载一个列表数据并在页面上显示。

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<ul class="js-items"></ul>

<script>
  $(function(){
    $.get('https://example.com/items.json')
      .then(function(data){
        ar $itemUL = $('.js-items');
        if(! data.items.length){
          var $noItems = $('li');
          $noItems.text('Sorry,there are no items');
          $itemsUl.append($noItems);
        }else{
          data.items.forEach(function(item){
            var $newItem = $('li');
            $newItem.text(item);
            if(item.includes('blue')){
              $newItem.addClass('is-blue');
            }
            $itemUl.append($newItem);
          })
        }
      })
  })
</script>

这段代码执行了以下逻辑：
1、使用 $.get() 发起 Ajax 请求。
2、选取类名为 .js-items 的元素并将它存入 $itemUl 变量。
3、如果下载的列表中没有列表项，则创建一个 li 元素，设置这个 li 元素的文本节点以表示当前没有列表项，然后将它添加到文档流中。
如果列表中存在列表项，则循环遍历每一个列表项。
4、为列表中的每一项创建一个li元素，并将其文本节点设置为该列表项的值。然后判断该列表项是否包含blue字符串，如果包含则将li元素的类名设置为is-blue。最后，将li元素添加到文档流中。

Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul class='js-items'>
  <li v-if='! items.length'> Sorry, there are no items. </li>
  <li v-for="item in items" :class="{'is-blue': item.includes('blue')}">
    {{item}}
  </li>
</ul>

<script>
  new Vue({
    el: '.js-items',
    data: {
      items: []
    },
    created(){
      fetch('https://example.com/items.json')
        .then((res) => res.json())
        .then((data) =>{
          this.items = data.items;
        })
    }
  })
</script>

这段代码执行了以下逻辑：
1、使用fetch()发起一个Ajax请求。
2、将返回的JSON数据解析为JavaScript对象。
3、将下载的列表项存储为data对象中的items属性。

vue-router 用于路由控制——根据应用的不同URL来显示不同的内容。
vuex 用于状态管理——通过一个全局数据中心在组件间共享数据。
vue-test-utils 用于 Vue 组件的单元测试。

第 1 章 大觅项目架构设计

1.2.2 什么是 NPM

Node.js 的包管理器 NPM 是全球最大的开源库生态系统，它集成在 Node.js 中，在安装 Node.js 的时候就已经自带了 NPM 包管理工具。验证 NPM 是否安装成功的方法同验证 Node.js 的方法。

在命令行窗口中输入“npm -v”可得到 NPM 的版本，说明 NPM 已经安装成功，如图 1.10 所示。

NPM 常用命令

1
2
3
4

npm install<Module Name>-g　　　//安装模块　加不加“-g”代表是不是全局安装
npm list<Module Name>　　　　　//查看某个模块的版本号
npm uninstall<Module Name>　　　//卸载模块
npm update<Module Name>　　　　//更新模块

1.2.3 安装 cnpm

NPM 安装插件需要从国外服务器下载，受网络影响大，下载比较慢，容易出现异常。说明来自淘宝 NPM 镜像官网：这是一个完整的 npmjs.org 镜像，可以用此代替官方版本（只读），同步频率目前为 10 分钟一次，以保证尽量与官方服务同步。既然淘宝 NPM 镜像这样方便，那么该如何使用呢？使用方法比较简单，只需要在命令行中输入以下内容，按回车键等待安装成功即可。npm install -g cnpm –registry=https://registry.npm.taobao.org安装CNPM成功之后，输入“cnpm -v”。

1.2.3 Vue-cli 脚手架

Vue-cli 是一个官方命令行工具，可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程，只需几分钟即可创建并启动一个带热重载、保存时静态检查，以及可用于生产环境构建配置的项目。

单页面应用（Single Page Web Application，SPA）只有一个 Web 页面的应用，是一种从 Web 服务器加载的客户端，单页面跳转仅刷新局部资源，公共资源（js、css 等）仅需加载一次。
多页面应用（Multi-Page Application，MPA）多页面跳转刷新所有资源，每个公共资源（js、css 等）需选择性重新加载。

全局安装 Vue-cli

1

cnpm install vue-cli -g

命令交互的含义如下：
➢ project name：如果输入新的项目名称，则会使用新输入的项目名称；直接回车的话，就会默认使用 webpack 后面跟的项目名称。
➢ Project description：项目的描述内容，可以自定义一些内容。
➢ Author: 作者，可以写上自己的邮箱或者 GitHub 的地址。
➢ Vue build：打包的方式，这里直接回车即可。
➢ Install vue-router? (Y/n)：是否安装 Vue 路由，建议选择 Yes，一般项目都需要路由功能。
➢ Use ESLint to lint your code? (Y/n)：是否启用 ESlint 检测，选择不启用。
➢ Set up unit tests (Y/n)：是否需要单元检测，建议选择不需要。
➢ Setup e2e tests with Nightwatch? (Y/n)：是否需要端对端的检测，建议选择不需要。

使用原始的方式进行开发有什么问题呢？看一下原始开发存在的以下问题。
➢ 难以维护
➢ 加载缓慢
➢ 体验差
➢ 重复编码
➢ 扩展困难
➢ 前后端耦合度高

分层架构的主要优势在于：易维护、可扩展、易复用、灵活性高，因此深受前端开发工程师喜爱。

模块化。模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性反映其内部特性，同时模块化还可以解耦实现并行开发。主要的模块化解决方案有：AMD（requirejs）、CMD（seajs）、CommonJS、ES6。模块化用来分割、组织和打包软件。

分离方式
➢ 不分离
➢ 部分分离
➢ 完全分离 

不分离和部分分离有什么缺点呢？
不分离：前后端共用同一个项目目录，本地开发环境搭建成本高，项目比较复杂、不宜维护且维护成本高、发布风险高，不利于问题的定位和修改。
部分分离：本地环境搭建成本较高，需要后端提供页面模板（JSP 等），更新和修改模板需要后端人员操作，效率低且不易维护，发布方式需要同时发布，且沟通成本比较高。

完全分离又分为两种：分离开发集成部署和分离开发分离部署。

分离开发分离部署。前端使用纯 HTML 通过接口的方式进行数据的交互，降低系统的复杂度，部署时单独部署到一台服务器上，使用代理进行数据的交互。

1.3.4 UI 框架

UI 框架的优缺点。

优点：
➢ 快速搭建 Web 页面
➢ 集中精力完成业务代码
➢ 缩短开发周期

缺点：
➢ 冗余代码
➢ 无法定制化、精细化开发

UI 框架的选择标准
UI 框架是否能够满足项目要求
组件丰富度，效果炫酷度
UI 框架的 API 完整度、社区的活跃程度

说明
–save 与–save-dev 的区别
–save 会把依赖包添加到 package.json 文件 dependencies 下
–save-dev 会把依赖包添加到 package.json 文件 devDependencies 下。

dependencies 是产品上线运行时的依赖，
devDependencies 是产品开发时的依赖。
devDependencies 下的模块是产品开发时用的。

在项目中引入 iView 框架
引入方式一般是在 Webpack 的入口页面 main.js 中做如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';

// 引入iView框架
import iView from 'iview';
// 引入iView框架样式
import 'iview/dist/styles/iview.css';
Vue.use(VueRouter);
Vue.use(iView);
// The routing configuration
const RouterConfig = {　
  routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({　　
  el: '#app',　　
  router: router,　　
  render: h => h(App)
});

组件是什么？
组件是将一个或几个完成各自功能的代码段封装为一个或几个独立的部分。用户界面组件就包含了这样一个或几个具有各自功能的代码段，最终完成了用户界面。
另外一种方式是按需引入组件，也就是项目中需要什么组件，就引入什么组件，实现按需加载，减少文件体积。

按需引入的加载方式：
安装插件

1

npm install babel-plugin-import --save-dev

babel-plugin-import 插件可以从组件库中引入需要的模块，而不是把整个库都引入，从而提高性能。

然后在.babelrc 文件中添加代码：

1
2
3
4
5
6
7

"plugins": [
  ["import", {　　
    "libraryName": "iview",
    "libraryDirectory": "src/components"　
    }]
  ]
}

代码层面的优化

v-if 和 v-show 区分使用场景

v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做 —— 直到条件第一次变为真时，才会开始渲染条件块。
v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好。