vue项目的进一轮学习

程序员文章站 2022-03-07 18:44:07

...

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” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
vue项目的进一轮学习

如果你安装的是旧版本的 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模板都可以模块化打包。
如下图所示：
vue项目的进一轮学习

（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）