ElementUI和nodeJS介绍

前言

在我的上篇博客 Vue路由 中说到了组件，大家也明白了组件的重要性，Vue基本就是靠组件来完成的，在这里大家会发现一个很重要的问题，因为大部分都是组件来完成的，所以编写组件是非常麻烦的，为了解决这一问题，饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件。

ElementUI官网：http://element-cn.eleme.io/#/zh-CN
要使用的话，则是导入4个js，vue和vue-router还有vue路由ElementUI组件。

接下来既可以使用了，我用个案例来测试一下：

	
		
		
		
		
		
		
		
		
		
		
	
	
		

			
				默认按钮
				主要按钮
				成功按钮
				信息按钮
				警告按钮
				危险按钮
			
		

	
	

这里要注意的是，一定要交给Vue的边界来管理，要不然是不出效果的。

说到出效果，一般的前端如果没有后端提供数据的话，是看不出效果的，这样是比较麻烦的，针对这一事件，出现了nodeJS，使前端不需要通过后台的服务器即可运行。
后端运行是通过JDK和服务器，而前端要自己跑起来的话，和后端一样，也是需要搭建运行环境和服务器的。而nodeJS就相当于JDK，服务器，和Maven。和Maven功能一样，nodeJS是通过npm来管理所以使用的js文件，他也拥有一个中央库，也有个代理仓库，通过代理仓库获得国外的js文件。

nodeJS环境搭建

1，要想使用nodeJS的话，第一步，下载！
下载地址：https://nodejs.org/zh-cn/download/
选择相应的版本下载，我使用的是：node-v10.15.3-win-x64.zip
Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本。

2， 然后第二步是解压，
将文件解压到指定位置，并在解压后的目录下建立node_global：npm全局安装位置和node_cache：npm缓存路径这两个目录。

3，第三步是配置环境变量。
与JDK一样，也需要配置环境变量。
在环境变量界面， 新增NODE_HOME，值为你解压好的根目录，我的是D:\download\node-v10.15.3-win-x64
在PATH最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;
测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
node -v npm -v

4，配置好相当于JDK的环境变量后，该配置配置npm全局模块路径和cache默认安装位置了，也就相当于中央仓库，服务器是不需要配置的。
打开cmd，分开执行如下命令：

  npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"

  npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global"

注意：双引号不能少。
这就相当于Maven中修改config文件一样。更换中央仓库位置，

修改好位置，和config一样还要修改镜像。上方提到，他也是要通过代理仓库来获取国外js库的。这一步也是为了提高下载速度(可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry)
在cmd中再输出即可：

 npm config set registry https://registry.npm.taobao.org/

其实此步骤的内容就是将以下代码添加到C:\Users\用户名.npmrc文件中,大家可以 且看看。
注意如果执行命令卡死，可以删除C:\Users\用户名.npmrc 后重新执行。
查看当前源在cmd输入： npm config get registry

5，当全部配置好后，使用之前，最好先测试一番：
首先我在github下载了一个Vue的项目，
然后解压，一般情况下，下载的都是开发环境。

测试

6，要写查看别人的项目，首先打开cmd进入别人的文件夹根目录
输入 npm install
命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，
那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，
此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖,
那pom文件在哪里呢？其实就是项目中的package.json。

7， 然后在原有的cmd上输入 npm run dev 这行命令就是启动项目。

当出现这段话，他会弹出一个网页，即可查看别人的项目了。