传统html+vue+Elementui开发及node.js环境搭建

最新推荐文章于 2024-08-18 16:12:08 发布

俺叫牛爱芳

最新推荐文章于 2024-08-18 16:12:08 发布

阅读量175

点赞数

文章标签： elementui vue.js html

本文链接：https://blog.csdn.net/l32273/article/details/124767681

版权

1、什么是ElementUI？

Element 饿了么前端出品的一套基于 Vue 2.0 的桌面端组件库

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

Vue+ElementUI

CDN方式

<!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">
			{{ts}}
			
			<template>
			<el-popconfirm
			  title="这是一段内容确定删除吗？"
			  >
			  <el-button slot="reference">删除</el-button>
			</el-popconfirm>
			</template>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					ts:new Date().getTime()
				}
			},
			methods:{
				
			}
		});
	</script>
</html>

Node.js

什么是node

node是一个JS运行环境
浏览器也是一个运行环境，JS代码写好之后需要放到浏览器里面去运行，脱离了浏览器是没有办法运行的，现在不仅浏览器能运行JS，Node也能运行Js。

他比浏览器拥有更多能力

浏览器中的JS

Javascript 能写Ecmascript （例如es6，es7，es2016 …）和Ecmascript i （dom操作，bom 操作 …）
Web Api 提供了操作窗口的能力
BOM
DOM
AJAX
这种能力是非常有限的
跨域问题
· 浏览器提出一个同源策略，保证每个网站的数据不被其他网站获取，所以提出了同源策略也就导致了跨域等一系列问题
文件读写
· 我们不能用Js去读取文件（允许有限的读写文件，但是收到浏览器的限制）但是不能代表Js语言不能读取文件

Node.js环境搭建

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。
想一想，java开发的第一步：是不是安装JDK，再配置环境变量java_home/classpath/path

下载 | Node.js

选择相应的版本下载，我使用的是：node-v10.15.3-win-x64.zip ,尝鲜版是最新的，但是容易出错，所以我们用维护版

将文件解压到指定位置(例如：d:\tools)，并在解压后的目录下建立node_global和node_cache这两个目录

node_global：npm全局安装位置
node_cache：npm缓存路径

俺叫牛爱芳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
传统html+vue+Elementui开发及node.js环境搭建

1、什么是ElementUI？Element 饿了么前端出品的一套基于 Vue 2.0 的桌面端组件库官网: http://element.eleme.io/#/zh-CNVue+ElementUICDN方式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> 
复制链接

扫一扫