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

原创

已于 2022-04-30 14:31:02 修改 · 199 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #html

于 2022-04-30 14:29:37 首次发布

本文介绍了ElementUI的基本概念和优势，并详细阐述了如何搭建Node.js环境，包括下载、解压、配置环境变量、设置npm全局路径和镜像，以及运行Node.js项目的方法。

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

1. ElementUI简介

核心思想式组件和数据驱动，但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的

饿了么推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

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

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></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="app">
			<h1>{
  
  {ts}}</h1>
			<el-button  @click="open">打开消息提示</el-button>
			<el-button :plain="true" @click="openVn">VNode</el-button>
		</div>
	</body>
	<script>
		var vue = new Vue({
			el: '#app',
			data: function() {
				return {
					ts: new Date().getTime()
				}
			},
			methods: {
				open() {
					this.$message('这是一条消息提示');
				},

				openVn() {
					const h = this.$createElement;
					this.$message({
						message: h('p', null, [
							h('span', null, '内容可以是 '),
							h('i', {
								style: 'col