ElementUI和nodeJS介绍

最新推荐文章于 2023-10-24 18:21:18 发布

琉璃街

最新推荐文章于 2023-10-24 18:21:18 发布

阅读量829

点赞数

CC 4.0 BY-SA版权

分类专栏： ElementUI nodeJS 基础教程文章标签： ElementUI nodeJS

本文链接：https://blog.youkuaiyun.com/qq_44676460/article/details/98514737

基础教程同时被 3 个专栏收录

32 篇文章

订阅专栏

ElementUI

1 篇文章

订阅专栏

nodeJS

1 篇文章

订阅专栏

本文介绍如何使用ElementUI丰富Vue2.0组件库，包括环境搭建、Vue与ElementUI的集成，以及通过nodeJS搭建前端运行环境，实现无需后台服务器即可运行前端项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

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

<!-- 1. 导入css -->
      <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
      <!-- 2. 引入vue和vue-router-->
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
      <!-- 未使用vue路由功能可不导入 -->
      <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
      <!-- 3. 引入ElementUI组件 -->
      <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 1. 导入css -->
		<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
		<!-- 2. 引入vue和vue-router-->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<!-- 未使用vue路由功能可不导入 -->
		<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
		<!-- 3. 引入ElementUI组件 -->
		<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-button disabled>默认按钮</el-button>
				<el-button type="primary" disabled>主要按钮</el-button>
				<el-button type="success" disabled>成功按钮</el-button>
				<el-button type="info" disabled>信息按钮</el-button>
				<el-button type="warning" disabled>警告按钮</el-button>
				<el-button type="danger" disabled>危险按钮</el-button>
			</el-row>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
		})
	</script>
</html>

这里要注意的是，一定要交给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 这行命令就是启动项目。
在这里插入图片描述
当出现这段话，他会弹出一个网页，即可查看别人的项目了。