传统html+vue+elementUI开发+nodeJS环境搭建

最新推荐文章于 2024-01-21 01:45:28 发布

淼呆

最新推荐文章于 2024-01-21 01:45:28 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_44271884/article/details/98507788

本文介绍了如何使用ElementUI进行前端开发，并详细阐述了Node.js的环境搭建过程，包括下载、解压、配置环境变量、设置npm镜像以提高下载速度。此外，还讲解了如何运行和启动基于Vue的Node.js项目，包括依赖安装和具体操作步骤。

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

ElementUI简介

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

ElementUI官网：http://element-cn.eleme.io/#/zh-CN

注1：类似前端框架还有iview

CDN方式

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>elementui简单案列</title>
		<!-- 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>
	</head>
	<body>
		<div id="aa">
			<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>
		<script type="text/javascript">
			new Vue({
				el:'#aa'
			})
		</script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf

最低0.47元/天解锁文章

200万优质内容无限畅学