11 Web全栈 组件化设计（2）

创建项目

创建原则

首先要确保一个认知，当前组件库项目是为了生产出实际的代码库提供给其他开发者使用，并不是为了将项目打包成静态资源放在服务器上运行，所以与应用开发的项目创建思路有很大不同。

包管理器

1、在编辑器中创建项目文件夹

2、初始化项目文件夹

npm init -y

3、接下来看package.json

{
	"name": "", // 应用名称
	"version": "1.0.0", // 版本号
	"description": "", // 应用描述
	"main": "", // 应用作为依赖包被引用的文件
	"scripts": {}, // 应用可执行脚本命令
	"keywords": [], // 应用在资源库中的搜索关键字
	"author": "", // 应用的作者 
	"license": "ISC"// 应用许可证
	
}

镜像管理器

在使用npm命令下载依赖包时很多同学都知道npm install包名时npm工具会优先在本地缓存中寻找依赖报代码，再去远程仓库寻找依赖包，中间有好几次跳转环节，这里边涉及到配置npm包管理器的镜像地址。

使用npm config list 可以查看电脑中的npm基本配置信息，可以通过npm config set 命令进行指定属性的命令行设置，这里关于镜像地址的设置方式则是

npm config set registry '指定镜像地址'

查看设置好的镜像地址可以使用

npm config get registry

这种操作方式可以快速的切换电脑上的npm镜像地址实现在任何网络环境下都可以使用最优的线路来下载远程的依赖包。

如果使用npm config 系列命令来设置镜像地址，虽然比较方便，但不同的镜像地址都是什么，在设置时不差云相关文档开发者也很难记住这么大量的信息，这时一个好用的npm应用便诞生了，这个应用就是nrm。

nrm是适用nodejs开发的一个可以在shell中运行的命令行工具，他的主要作用就是帮助开发者切换和管理大量的npm镜像地址，保证在合适的时机适用最简单的命令随时切换镜像地址而不需要花费精力去记住大量的命令和信息。

nrm的安装方式是：

npm i nrm -g

安装后便可以直接通过nrm命令在命令行工具中操作nrm的功能，比如查看nrm版本。

添加镜像地址

nrm add <镜像名称> <镜像地址>

删除镜像地址

 nrm del <镜像名称>

npm pack

npm pack命令可以将node的项目在本地构建成安装包，类似于java项目中构建jar包的过程，在命令行工具中输入npm pack后会生成.tgz文件， 如果需要安装这个npm到全局，只需要npm i -g

npm 全局安装目录

npm ls -g

脚手架执行原理

vue create vue-test-app

1. 在终端输入vue create vue-test-app
2. 终端解析出vue命令
3. 终端在环境变量中找到vue命令
4. 终端根据vue命令 找到实际的js文件
5. 终端利用node执行js文件
6. js文件解析执行command/options
7. 执行完毕 退出执行

为什么全局安装@vue/cli后会添加的命令为vue ？
由package.json中 bin 下面绑定关系

全局安装@vue/cli时发生了什么 ？
node 会把当前的包下载到node_modules中
解析package.json中的bin配置
如果有这个配置 在操作系统中添加软连接

为什么vue指向一个js文件，为什么我们可以直接通过vue命令去执行他 ？
在环境变量中找到vue 找到软链接 在node_modules中的@vue/cli 包 找到vue.js 并执行vue.js

#!/usr/bin/env node 这句话是能通过命令执行的关键语句
告诉我们操作系统 直接调用这个文件的时候 去环境变量找node命令 通过node去执行
ln -s name path 创建软链接