【Element UI通用后台管理系统】（一）项目搭建_elementui后台管理系统

一、使用Yarn作为项目的包管理工具

1、Yarn是什么？

“Yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，正如官方文档中写的，Yarn是为了弥补npm的一些缺陷而出现的。”这句话让我想起了使用npm时的坑：

• npm install的时候非常慢，特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
• 同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表的含义不同。

 "5.0.3"     表示：安装指定的5.0.3版本

"~5.0.3"    表示：安装5.0.x中最新的版本

"^5.0.3"     表示：安装5.x.x中最新的版本

这就显得很麻烦了，常常会出现同一个项目，有的同事时OK的 ，有的同事会由于安装的版本不一致出现bug。

• 安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。

2、Yarn的优点？

• 速度快。速度快主要来自以下两个方面：

1.  并行安装：无论npm还是Yarn在执行包的安装时，都会执行一系列任务。npm是按照队列执行每个package，也就是说必须要等到当前package安装完成后，才能继续后续的安装。而Yarn是同步执行所有的任务，提高了性能
2. 离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时，直接从缓存中获取，就不用像npm那样再从网络下载了。

• 安装版本统一：为了防止拉取到不同的版本，Yarn有一个锁定文件（lock file）记录了被确切安装上的模块的版本号。每次只要新增一个模块，Yarn就会创建（或更新）yarn lock这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm其实也有很多办法实现处处使用相同版本的packages，但需要开发这执行npm shrinkwrap命令。这个命令将会生成一个锁定文，在执行npm install的时候，该锁定文件会先被读取，和Yarn读取yarn.lock两者的不同之处在于，Yarn默认会生成这样的锁定文件，而npm要通过shrinkwrap命令生成npm-shrinkwrap.json文件，只有这个文件存在的时候，packages版本信息才会被记录和更新。
• 更简洁的输出：npm的输出信息比较冗长。在执行npm install的时，命令行里会不断地打印出所有被安装上地依赖。相比之，Yarn简洁太多：默认情况下，结合了emoji直观且直接地打印出必要信息，也提供了一些命令供开发者查询额外的安装信息。
• **多注册来源处理：**所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去安装，要么是npm要么是bower，防止出现混乱不一致。
• 更好的语义化：yarn改变了一些npm命令的名称，比如yarn add/remove，感觉上比npm原本的install/uninstall要更清晰。

3、Yarn和npm命令对比

 二、搭建Vue-cli4脚手架

1、安装node.js

        进入node官网下载node（这里是node中文网，国际网址有时候非常卡）

Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。http://nodejs.cn/

         可以直接安装，安装完毕后，可以在我们的cmd窗口，输入node -v查看node版本，如果能看到，说明安装成功。

        当node环境安装完成后，npm环境是自动安装好的，也可以在cmd命令输入npm -v，查看是否安装成功。

2、安装cnpm（npm的中国镜像）

        1、说明：npm（node package manager）是nodejs的包管理工具，用于node插件管理（包括安装、卸载、管理依赖等）。

        2、使用npm安装插件：命令提示行执行npm install<name>

        3、选装cnpm，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。

cnpm切换淘宝镜像： npm install -g cnpm --registry=https://registry.npmmirror.com

例如：使用cnpm安装模块：cnpm install（下载package.json的依赖）

 3、安装Yarn

安装Yarn命令：npm install -g yarn

4、安装vue-cli脚手架构建工具

        Vue-cli提供一个官方命令行工具，可用于快速搭建大型单页应用。

安装Vue-cli命令：cnpm install -g @vue/cli  ||  yarn global add vue-cli

测试Vue脚手架是否安装成功：vue -V

5、创建项目

        这里如果有需求的同学，可以翻看我前面的文章。

Vue（四）Vue脚手架——手把手教你安装和使用_小张快跑。的博客-CSDN博客_前端vue脚手架安装Vue脚手架的安装与配置，脚手架的文件结构、我的第一个脚手架项目https://blog.csdn.net/io_123io_123/article/details/122610993

 6、引入Element ui

        之所以使用Element ui，是因为它是Vue所支持的ui组件库，它可以在我们开发过程中，快速生成我们需要的ui样式，并且，它的组件能够做到开箱即用，bug少，样式比较美观。

        1、引入Element ui的两种方式

        CDN

        目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

        脚手架中的引入

• 全局引入

（1）下载全局依赖：npm i element-ui -S  ||  yarn add element-ui -S

（2） 在main.js中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

 （3）在页面中引入element-ui组件

 <el-button  type="primary">按钮</el-button>

         由于全局引入后，会导致我们的项目在打包时，将所有的Elementui组件进行打包，包括没有用到的组件，因此不推荐使用这种方式。

• 按需引入 

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。（也可以选择不安装这个插件）

（1）安装 babel-plugin-component：npm install babel-plugin-component -D

 （2）需要修改bable.config.js中的配置

{
  "presets": [["es2015", { "modules": false }]],
/***添加下面代码****/
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
/***到此结束*****/
}

（3）如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
 
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
 
new Vue({
  el: '#app',
  render: h => h(App)
});

 上述操作之后，我们就能够在我们的项目中使用Element ui框架进行开发了。这里推荐使用按需引入，因为全局引入会将Element ui的所有依赖全部引入，大大影响我们的项目运行速度。