elementUI入门和nodeJS环境搭建

最新推荐文章于 2024-07-18 11:19:22 发布

爕藝響

最新推荐文章于 2024-07-18 11:19:22 发布

阅读量788

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/what_to/article/details/98514500

本文介绍了ElementUI的基本概念和Vue+ElementUI的安装，详细阐述了Node.js的性质以及npm的重要性。接着，通过详细的步骤指导如何搭建Node.js环境，包括下载、解压、配置环境变量、设置npm全局模块路径和缓存位置。最后，演示了如何从GitHub下载Vue项目并运行。

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

1. ElementUI简介

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

ElementUI入门ElementUI官网：http://element-cn.eleme.io/#/zh-CN
注1：类似前端框架还有iview
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>

需要加在

样式里面不然显示不出样式

<body>
		<div id="app">
			<el-row>
				<el-button>默认按钮</el-button>
				<el-button type="primary">主要按钮</el-button>
				<el-button type="success">成功按钮</el-button>
				<el-button type="info">信息按钮</el-button>
				<el-button type="warning">警告按钮</el-button>
				<el-button type="danger">危险按钮</el-button>
			</el-row>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app'
		})
	</script>

图片显示
在这里插入图片描述

1.node.js是什么？

Node.js 不是一种独立的语言，与 PHP、Python、Perl、Ruby 的“既是语言也是平台”不同。Node.js 也不是一个 JavaScript 框架，不同于 CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为脚本语言世界的一等公民，在服务端堪与 PHP、Python、Perl、Ruby 平起平坐。
Node.js 是一个划时代的技术，它在原有的 Web 前端和后端技术的基础上总结并提炼出了许多新的概念和方法，堪称是十多年来 Web 开发经验的集大成者。Node.js 可以作为服务器向用户提供服务，与 PHP、Python、Ruby on Rails 相比，它跳过了 Apache、Nginx 等 HTTP 服务器，直接面向前端开发。Node.js 的许多设计理念与经典架构（如 LAMP）有着很大的不同，可提供强大的伸缩能力，以适应21世纪10年代以后规模越来越庞大的互联网环境。

2.npm是什么

npm(node package manager)为你和你的团队打开了连接整个JavaScript天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有30亿次的下载量，包含超过600000个包(即代码模块）。来自各大洲的开源软件开发者使用npm互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

3.Node.js环境搭建

环境搭建流程

1、下载nodeJS的安装包
2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache
3、配置环境变量
NODE_HOME:配置的是nodeJS解压的根路径D:\initPath\node-v10.15.3-win-x64
path:%NODE_HOME%;%NODE_HOME%\node_global
node -v
npm -v
4、配置npm的全局模块的下载地址
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”
npm config set registry https://registry.npmjs.org/
5、下载github的Vue的项目解压
6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm install进行再次依赖下载（package.json）
7、在通过npm run dev 启动项目

下载

下载地址：https://nodejs.org/zh-cn/download/
在这里插入图片描述

解压

将会得到一个安装包解压到指定路径
并再指定路径下建立node_global和node_cache这两个目录
注1：新建目录说明
node_global：npm全局安装位置
node_cache：npm缓存路径

在这里插入图片描述

配置环境变量

添加node_home

在这里插入图片描述
再path 变量值后面添加上;%NODE_HOME%;%NODE_HOME%\node_global;

注1：环境变量查看
echo %node_home%
echo %path%

注2：测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
node -v
npm -v

配置npm全局模块路径和cache默认安装位置

打开cmd 分开执行这几条代码
注1：将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
注2：如果执行命令卡死，可以删除C:\Users\用户名.npmrc 后重新执行。（用户名：为当前电脑的用户名）
注3：“D:\initPath\node-v10.15.3-win-x64\node_global”，双引号不能少

 npm config set cache "C:\Program Files\node-v10.16.1-win-x64\node-v10.16.1-win-x64\node_cache"
 npm config set prefix "C:\Program Files\node-v10.16.1-win-x64\node-v10.16.1-win-x64\node_global"
 npm config set registry https://registry.npmjs.org/

在这里插入图片描述