element ui 入门和nodeJS环境搭配

element ui 入门和nodeJS环境搭配

1、element ui 入门
1.1 ElementUI简介
我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件
详细了解请去官网：http://element-cn.eleme.io/#/zh-CN

	注：类似前端框架还有iview

2、Vue+ElementUI安装
2.1 方式一：CDN方式：（先导入下列代码）

然后这里写了一个简单的案例，把按钮写了一下

	
		
		
		
		
		
		
		
		
		
		
	
	
		

			
				默认按钮
				主要按钮
				成功按钮
				信息按钮
				警告按钮
				危险按钮
			
		
	
	/* 注意：这里不用vue的方式，按钮没效果，而且不报错 */
	

运行结果如下：

想学这种方式的，注意用把代码用vue的方式运行就行了

2、nodeJS环境搭配

1. Node.js是什么
   1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
   1.2 Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言
   注1：Node.js–>JavaScript运行环境，开发语言是：javascript
   J2EE -->Java运行环境， 开发语言是java
   注2：Node.js v10.15.3文档地址：http://nodejs.cn/api/

2. npm是什么
   npm其实是Node.js的包管理工具（package manager）。

   为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
   如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
   于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，
   直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

   更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，
   npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

   注1：npm==maven 有点类似

   3、环境搭配：
   先去下载地址：https://nodejs.org/zh-cn/download/把安装包下载好了之后，解压到一个路径，记住这个路径，并且在解压好的包里面新增加两个文件夹：
   
   然后去属性里面配置环境变量，如下图：

   
   然后输入cmd在里面检验环境变量搭配好了没有，出现了版本号，代表搭配好了
   

环境搭配好之后就 配置npm全局模块路径和cache默认安装位置
在cmd里面输入下面两个代码：

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

注意：这里后面是自己安装的路径名，那个包里面没有着两个文件，自己新建一个就好了，
还有就是双引号不能少，中途执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。
（用户名：为当前电脑的用户名）

然后设置淘宝源：

	 ## 设置淘宝源

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

      ## 查看源，可以看到设置过的所有的源

      npm config get registry

查看淘宝镜像设置情况

      npm get registry

设置完之后开始运行Node.js项目
将下载好的项目解压到一个文件去，然后在此文件内按住shift+鼠标右键，运行命令提示符：
在里面输入npm run dev 开始运行，若是中途丢失文件，删掉重新解压项目再次运行：
如图：

可以看见上面有个网址：http://localhost:9999；（若是运行结束后自动弹出一个登录页面，随便输入使其填满就行）
结果如下：

运行出来后就代表你的环境搭配配置好了，谢谢