传统html+ElementUI开发以及node.js环境搭建

最新推荐文章于 2023-12-26 20:54:03 发布

秃头程序汪

最新推荐文章于 2023-12-26 20:54:03 发布

阅读量1.1k

点赞数

分类专栏： node.js环境搭建文章标签： vue

本文链接：https://blog.csdn.net/qq_45464930/article/details/108072045

版权

本文介绍了ElementUI，一个基于Vue2.0的组件库，提供了丰富的前端组件。接着详细讲解了Node.js的基础知识，包括其与J2EE的区别，以及为什么需要npm。还详细阐述了Node.js的环境搭建步骤，包括下载、配置环境变量、验证安装等，并指导如何运行Node.js项目，包括依赖安装和项目启动。

摘要由CSDN通过智能技术生成

传统html+element开发以及node.js环境搭建

前言

前言

今天这篇博客呢，理论知识偏多一点，请耐心阅读 !

ElementUI简介

学习了一段时间的Vue，会发现VUE的核心思想是组件和数据驱动,同时为了方便不再每个组件自己去编写模板、样式以及添加事件等操作，所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件!

接下来看一下ElementUI开发的官网链接：

ElementUI官网

当然类似前端框架：iview

官网首页：

在这里插入图片描述
仔细看看，可以发现ElementUI中的组件还是比较多的！

在这里插入图片描述
这不仅仅包括我圈出来的这些！

1、案例演示

例如：我们需要一个MessageBox弹框的组件，使用html片段来完成一个简单的案例！

在这里插入图片描述
此时我们copy整个代码块：

在这里插入图片描述
新建项目，将copy的代码调整位置，并进行粘贴：
可以发现调整了项目位置之后，直接运行是会报错的！

在这里插入图片描述

2、代码实现

需要引入的js以及css样式

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.2/vue-router.js"></script>
<!-- 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组件 --