Vue 企业开发实战

第 1 章 大觅项目架构设计

1.2.2 什么是 NPM

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

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

NPM 常用命令

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

注意： 全局安装和非全局安装的区别： 举例说明，使用“npm install express -g”安装express框架后，就可以在计算机的任意一个文件夹下打开命令提示符窗口，直接使用express创建项目，否则会遇到“'express'不是内部或外部命令，也不是可运行的程序”错误。读者应该也遇到过类似的问题，这就是非全局安装引起的，使用“npm install express”安装express框架为局部安装，局部安装就是将模块下载到当前命令行所在目录下，只有在当前目录下才可以用。

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

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 中做如下配置：

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)
});

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

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

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

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

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

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