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

最新推荐文章于 2024-08-07 15:20:58 发布

-唐醋小排骨

最新推荐文章于 2024-08-07 15:20:58 发布

阅读量721

点赞数

文章标签： elementui vue.js html

本文链接：https://blog.csdn.net/ty0714/article/details/124510598

版权

这篇博客详细介绍了如何使用Vue+ElementUI进行传统HTML开发，并指导如何搭建Node.js环境。首先，对ElementUI进行了简述，它是基于Vue2.0的组件库，提供了丰富的PC端组件。接着，通过CDN方式展示了Vue+ElementUI的安装步骤。随后，博主讲解了Node.js和npm的基本概念，包括Node.js作为JavaScript运行环境的角色和npm作为包管理工具的重要性。最后，逐步解析了Node.js环境的搭建过程，包括下载、解压、配置环境变量以及验证安装结果的步骤。

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

一：传统html+vue+elementUI方式

1. ElementUI简介

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

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

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

2. Vue+ElementUI安装

2.1 CDN方式

<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>

<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

2.2 NPM(略，需要配置NodeJs环境)

## demo1.html(非模块化)
## hello elementUI

<!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 sr