Vue工程化:学习VUE第十天课程（2.VUE工程化---node简介与环境搭建）

分手后的思念是犯贱 2023-06-10 05:20 6阅读 0赞

# 2.VUE工程化—node简介与环境搭建 #

### 核心思想 ###

vue两大核心思想→组件化和数据驱动  
（1）组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用  
（2）数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化，不必过多的关注DOM，只需要关注数据层即可

### 工程化 ###

Vue工程化项目需要用到脚手架工具vue-cli，类似于工人手里面的脚手架一样，帮助工人搭架子用，同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

### 环境需求 ###

vue-cli是属于node的包，所以需要node去安装它，故在此之前应该先安装node。

首先介绍下Node.js  
Node.js是一个JS运行环境(runtime environment)，不是一个js文件，实质是对Chrome V8引擎进行了封装。Node.js 是一个让 JS运行在服务端的开发平台，它让 JS成为与PHP、Python 等服务端语言平起平坐的脚本语言。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

## npm简介 ##

在正式介绍Node.js学习之前，先认识一下npm。

（1）npm是什么东西？  
npm其实是Node.js的包管理工具（node.js package manager）

（2）啥是包管理工具？为啥需要一个包管理工具？  
因为在Node.js上开发时，会用到很多别人写的JS代码。如果要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。  
作用：方便开发，可以快速下载开发依赖（例如jQuery、boostrap、swiper）。  
举个例子：  
如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。  
![在这里插入图片描述][20191025185718202.png]  
比如之前的swiper开发，需要引入jquery类型文件，普通方案需要挨个引入，有了npm即nodejs的包管理工具后，它会自己根据文件依赖安装相应文件。  
场景：  
当一个网站依赖的js代码越来越多，程序员发现这是一件很麻烦的事情：  
①去 jQuery 官网下载 jQuery  
②去 BootStrap 官网下载 BootStrap  
…

有些程序员就受不了了，于是npm就出来了，全称是 Node Package Manager 包管理工具。  
NPM 的实现思路：

①有一个远程代码仓库（registry），在里面存放所有需要被共享的js代码（all所有），每个js文件都有自己唯一标识。

②用户想使用某个js的时候，只需引用对应的标识，js文件会自动下载下来，包含相关的依赖文件都会自动下载好（如bootstrap的js插件依赖jquery文件，利用npm下载时会根据两者依赖关系下载好）。

##### npm特性：根据依赖关系下载好相应的代码库 #####

### 介绍完npm包管理工具，接下来继续讲解node.js ###

①Node.js平台是在后端运行JS代码，可以把它理解成PHP和java同等的后台开发语言----MongoDB非关系型数据库。  
②Node.js是一个基于Chrome JavaScript运行时建立的平台，非常适合开发数据密集型实时应用。

### 以上摘自百度百科，简单来说 ###

Node.js很适合搭建数据密集型实时服务器应用，所以它又被称为服务器语言，前端中的后端语言。node翻译过来是节点的意思，而node.js后面特地带了.js，就表示它与JS有莫大的关系。 node.js是JS的一种运行环境，是服务器端的JS解释器。

## chrome浏览器和Node.js在解析javascript都使用了v8引擎： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

## npm与node.js发展 ##

npm作者已经将npm开发完成，于是发邮件通知 jQuery、Bootstrap作者，希望他们把 jquery、bootstrap 放到npm远程仓库，但是没有收到回应，于是npm的发展遇到了瓶颈。  
Node.js作者后来也将Node.js开发完成，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了 npm。  
后来的事情大家都知道，Node.js 火了。随着 Node.js 的火爆，大家开始用 npm 来共享 JS 代码了，于是 jQuery 作者也将 jQuery 发布到 npm 了。所以现在，你可以使用 npm install jquery 来下载 jQuery 代码。  
现在用 npm 来分享代码已经成了大前端的标配。

## Node.js与npm安装 ##

npm由于内置在node.js中，所以就一并安装了。  
如果只想单独安装npm，不想安装node.js，这种做法目前不支持。

# 环境安装 #

（1）运行环境  
安装nodejs：  
node.js安装步骤→查看”node环境安装.docx”文件

（2）开发环境  
推荐使用webstorm和HBuilder X等，支持vue语法

## 浅谈包管理工具npm与cnpm ##

NPM介绍：  
（1）简介：NPM是NodeJS的包管理器，用于管理node相关依赖包（安装，卸载等）  
（2）安装：npm install \[-g\]  
（3）卸载：npm uninstall \[ -g \]  
（4）更新：npm update \[ -g \]  
（5）更新全部插件： npm update  
（6）查看当前目录已安装插件：npm list \[ -g \]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

# 淘宝NPM镜像—CNPM #

CNPM介绍：  
（1）说明：  
因为通过安装node插件是从国外服务器下载，受网络影响大，可能出现异常，如果服务器在中国就好了，所以乐于分享的淘宝团队干了这事。

![在这里插入图片描述][20191025190016186.png]

（2）官方网址：http://npm.taobao.org  
3）安装：命令提示符执行  
npm install cnpm -g --registry=https://registry.npm.taobao.org  
![在这里插入图片描述][2019102519003449.png]  
（4）测试  
输入cnpm -v或者cnpm --version检测版本及是否安装成功  
注意：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

## 课堂总结 ##

###### （1）cnpm淘宝镜像与npm用法相同，区别就是服务器的区别，npm服务器在境外，而cnpm(淘宝npm)服务器在境内，推荐使用cnpm。 ######

###### （2）npm install - g中的install可以简写为i ######

###### （3）node --version可以简写为node -v ######

###### （4）npm --version可以简写为npm-v ######

###### （5）cnpm -v ######

## 如有疑问或者问题请留言联系小编！！！ ##

## 感谢来访 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/6536bce974a54f7fb83006e53ed9de6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/581f9877c12043a287a65e900c203c79.png
[20191025185718202.png]: /images/20230531/01e4d07408104b499a6a6758317e0c35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/1d37c3eda7664eb7947ab865acd002a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/07c028bacc024660afbd9802adbca254.png
[20191025190016186.png]: /images/20230531/1413e79afb00470186d6d308f0292357.png
[2019102519003449.png]: /images/20230531/da000efa8d514afd95a7e06553a58ec3.png