1、重识npm

（1）为什么会出现npm

起初我们开发一个网站所需要的一些代码要从它的官网去下载，如果我们要开发的这个网站需要不同网站的代码，就比较麻烦了，要从各个官网去下载，这是一件非常麻烦的事情，有没有什么工具能够解决这个问题呢？这个时候一个大牛lsaaz写了一个 npm 来应对以上问题。

（2）npm是什么

npm,全称是 Node Package Manager, 它是基于Node.js使用JavaScript语言开发的, npm的操作原理是各个官网使用npm publish把代码提交到npm的服务器，其他人想要使用这些代码，使用npm install就会从服务器下载下来，下载完的代码会出现在 node_modules 目录里，到这里就可以随意使用了。

• Node.js 开发出来以后缺少一个包管理器，最终 Node.js 内置了 npm。后来Node.js 火了，各个官网的作者他们愿意上传代码到npm了，到这里我们就可以使用npm下载自己所需要的代码了。由于nodejs已经集成了npm，所以安装Node.js后就可以使用npm了。

（3）npm的使用

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
• 允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：

npm install npm -g

使用淘宝镜像的命令：

npm install -g cnpm --registry=https://registry.npmmirror.com

（4）使用npm命令操作

• 安装

$ npm install <Module Name>

• 引用

var express = require('express');

• 卸载

$ npm uninstall express

2、vue-cli脚手架

（1）vue-cli是什么

vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

（2）vue-cli的安装

npm install -g vue-cli; (-g表示全局安装)

（3）查看vue-cli的版本

vue -V

（4）使用vue-cli创建vue项目

• vue init webpack prjectName
• vue create projectName
• 以上的区别是 Vue-cli 2 和 Vue-cli3 创建项目的两个命令，之所以两个命令不同，根本原因是 Vue-cli2 是基于webpack 3，而 vue-cli3 是基于 webpack 4 的

3、webpack

（1）webpack是什么

webpack 就是前端模块化打包工具。讲人话就是，webpack 的理念就是一切皆模块化，把一堆堆的 js、css等文件放在一个总的入口文件引入，剩下 webpack 会把引入的文件根据对应的关系合并成一个 bundle.js 。打包后的 index.html 引入 bundle就可以了。除了 css、js还有图片、字体、html模板都可以模块化打包。
如下图所示：

（2）为什么要将所有资源放在一个文件内？

我们都知道，网页渲染的时候，加载的东西越少，响应的也就更快，网页的加载速度就能快好多，有时为了优化性能，我们会把资源都合并到一个文件内，导致这个文件会很大，往往会出现两个问题：

• 当项目庞大的时候，不同页面不能做到按需加载，而且将所有的资源一并加载，耗费时间过长，性能反而降低
• 导致依赖库之间关系混乱，当项目越来越大时，会变得难以维护。

但是对于 webpack，可以很好地解决上述两个问题，webpack 有同步和异步两种加载方式，正确配置后，可以进行按需加载。所以 webpack 是一个十分聪明很有优秀的打包工具。

（3）为什么使用webpack ?

• 对模块化规范 CommonJS 、AMD、CMD支持性友好。
• 形成项目依赖树，每个依赖都可拆分成一个模块，进行按需加载。
• 有强大的插件系统，可以实现代码压缩、分包、模块热替换等，自定义模块等自动化工作。
• 开发配置快速高效。是前端目前最主流的模块化打包工具。

（4）安装webpack

webpack 是一个基于 node 的项目，所以使用之前我们需要安装 node.js

• 全局安装

npm install webpack -g

在c盘下会生成 node_modules 文件夹中会包含 webpack，此时此刻我们可以使用 webpack命令了；

• 当前项目安装

npm install webpack --save

npm install webpack --save-dev

npm install webpack —save 与 npm install webpack —save-dev 区别在于是否将依赖存入 dependencies 以及 devdependencies。

4、通过脚手架Vue cli 脚手架来创建项目有三种方式

• 1、基于 交互式命令行 的方式，创建 Vue项目 使用命令 vue create my-project （基于Vue cli 3.X以上版本 npm install -g @vue/cli）

• 2、基于vue cli 2.x 的模板（ npm install -g @vue/cli-init），创建 vue 项目 vue init webpack my-project

• 3、基于 图形化界面 的方式，创建 vue 项目 vue ui（基于Vue cli 3.X以上版本 npm install -g @vue/cli）

（1）vue cli 2.x版本

• 1、打开cmd全局安装vue cli 2.x 的模板 ，安装脚手架命令 npm install -g vue-cli ，初始化2.x脚手架模板 npm install -g @vue/cli-init

安装脚手架

初始化2.x脚手架模板

• 2、初始化项目 vue init webpack my-project

• 3、询问选择安装哪些插件或者依赖 (安装选择Y否则输入N ，多项选择按上下箭头选择) ，选择完后按enter 进行项目创建

• 4、项目创建完毕后 ，cd 进入项目my-project 更目录 输入 npm run dev把项目运行起来

• 5、打开浏览器输入地址查看运行的项目

• 6、项目文件介绍

（2）Vue cli 3.X版本

• 1、同样的首先要安装脚手架 输入命令 npm install -g @vue/cli

• 2、创建项目 输入命令 vue create my-project （my-project是默认项目名称，可以自己命名其他的）按enter键弹出下图 ，询问创建方式

• 3、选择手动创建方式，选择要安装的依赖或者插件 ，按键盘的方向见上下箭头移动光标 ，按空格键选择要安装的项打上 ’*‘ 号，用到就安装 ，用不到可以先不装

• 4、当我们选择要安装的依赖后 ，就会询问下面一些安装步骤 ，路由模式我们一般都是默认的hash模式 ，所以选择not ， Babel, ESLint, etc.的配置文件选择单独创建 ，方便修改配置 ，最后的是否保存创建模板，也可以选择是 ，这样以后就不用选择这些创建步骤 ，直接选择模板一键创建项目

• 5、创建好项目 ，同样的先cd my-vue进入项目根目录 ，然后输入命令npm run serve 让项目运行起来

• 6、介绍项目文件

区别：Vue cli3.X之后对比Vue2.X版本 ，我们发现2.x里面的bulid和config配置文件夹不见了，文件目录被简化了很多

那么我们怎么修改webpack和一些开发环境的配置呢？那就是手动创建文件vue.config.js进行配置

（3）基于 图形化界面 的方式