NodeJS的环境搭建+传统ELmentui+vue开发
ElementUI简介
我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件
官网(http://element-cn.eleme.io/#/zh-CN)
简单按钮案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 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> <title></title>
</head>
<body>
<div id="ht">
<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>
</body>
<script type="text/javascript">
new Vue({
el:'#ht'
})
</script>
</html>
效果图:
什么是Node.js
Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
Node.js是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚.
注意:
Node.js-->JavaScript运行环境,开发语言是:javascript
J2EE -->Java运行环境, 开发语言是java
官方中文网(http://nodejs.cn/api/)
npm是什么
npm其实是Node.js的包管理工具(package manager)。
为啥我们需要一个包管理工具呢?
因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。
如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。
于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,
直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。
更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,
npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。
Node.js环境搭建
· 由于Node.js平台是在后端运行JavaScript代码,所以,必须首先在本机安装Node环境。
下载nodeJS的安装包
下载地址:https://nodejs.org/zh-cn/download/
楼主使用的是:node-v10.15.3-win-x64.zip
解压nodeJS的解压包,在根目录下新增两个文件夹node_global和node_cache
注意:最好解压放在全英文目录下,我就吃过这个亏=.=
配置环境变量
步骤如下:
打开此电脑的属性
创建NODE_HOME 输入解压路径我的是 E:\nodeJS\node-v10.15.3-win-x64
然后再Path中放我配置好的路径并且还有我的文件 %NODE_HOME%;%NODE_HOME%\node_global
配置npm的全局模块的下载地址
打开cmd命令
node -v npm -v我是用来测试版本的(如果显示就成功了)
npm config set cache “E:\nodeJS\node-v10.15.3-win-x64\node_cache”
npm config set prefix “E:\nodeJS\node-v10.15.3-win-x64\node_global”
npm config set registry https://registry.npm.taobao.org/
通过运行项目来看配置是否成功
下载github的Vue的项目解压
就是下载的一个vue项目,来运行项目看一下是否配置成功
项目包:nmgwap-vueproject-master.zip
解压的项目中是没有node_modules的
·
所以需要通过npm install进行再次依赖下载
在通过npm run dev 启动项目
输入npm run dev
测试效果:
谢谢观看!
NodeJS的环境搭建+传统ELmentui+vue开发的更多相关文章
- 57.NodeJS入门--环境搭建 IntelliJ IDEA
转自:https://blog.csdn.net/wang19891106/article/details/51127133 NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习N ...
- NodeJS入门--环境搭建 IntelliJ IDEA
NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习NodeJS,所以以此做个笔记,欢迎大家提出意见. 1.首先 下载安装NodeJS,下载安装IntelliJ IDEA 2.接下 ...
- 第三方web ide开发环境下vuejs开发HMR环境搭建-码农这样开发是快乐的!
vuejs是一个非常优秀的前端框架,利用该框架可以快速开发出任何web app,之所以vuejs开发非常高效快捷,其中最重要的一点就是利用webpakc提供的HMR(热模块替换)特性,可以边写vue组 ...
- 【SSH】 之 Struts2环境搭建及简单应用开发
在上一篇文章中,我们一起了解了一下struts2的工作机制原理,接下来让我们进行一下简单应用的开发 (一)配置环境 1.建立web项目 2.导入jar包 其中struts2中有很多jar包,我们不需要 ...
- 零基础 Vue 开发环境搭建 打开运行Vue项目
[相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...
- Eclipse_luna_J2EE_For_JS+tomcat8.0环境搭建、配置、开发入门
一.所有需要的软件.插件等下载地址 J2SE的官方下载路径:http://www.oracle.com/technetwork/java/javase/downloads/index.html Ecl ...
- appium自动化环境搭建(python语言开发)
简述 1.安装jdk,配置环境变量 2.安装AndroidSDK,配置环境变量 3.安装Python 4.安装Python集成开发环境PyCharm 5.安装node 6.安装appium服务端 7. ...
- win7下docker环境搭建nginx+php-fpm+easyswoole开发环境
基础的环境已在文章nginx.php-fpm.swoole HTTP/TCP压测对比中搭建了,现在是在这个基础上在搭建easyswoole开发环境 主要要修改的地方是dnmp包里面的docker-co ...
- 使用jasmine-node 进行NodeJs单元测试 环境搭建
关于jasmine就不多说了,关于语法请参加官方文档.http://pivotal.github.io/jasmine/ 关于NodeJS的单元测试框架有多种,如果要在NodeJS中使用jasmine ...
随机推荐
- nginx只允许域名访问,禁止ip访问 禁止其他域名访问
背景:为什么要禁止ip访问页面呢?这样做是为了避免其他人把未备案的域名解析到自己的服务器IP,而导致服务器被断网,我们可以通过禁止使用ip访问的方法,防止此类事情的发生. 解决方法:这里介绍修改配置文 ...
- spring线程池的同步和异步(1)
spring线程池(同步.异步) 一.spring异步线程池类图 二.简单介绍 2.1. TaskExecutor---Spring异步线程池的接口类,其实质是java.util.concurrent ...
- 什么是epistatic effects | 上位效应
epistatic与interaction之间的区别与联系? genetic上的interaction是如何定义的? Epistasis is the phenomenon where the eff ...
- git命令note
日志查看 git log 太乱? git log --pretty=oneline 版本回退 git reset --hard commit_id git reset --hard HEAD^ 上上版 ...
- 关于Kubernetes Master高可用的一些策略
关于Kubernetes Master高可用的一些策略 Kubernetes高可用也许是完成了初步的技术评估,打算将生产环境迁移进Kubernetes集群之前普遍面临的问题. 为了减少因为服务器当机引 ...
- docker 安装redis 并配置外网可以访问
1, docker 拉去最新版本的redis docker pull redis #后面可以带上tag号, 默认拉取最新版本 2, docker安装redis container 安装之前去定义我们的 ...
- netty5心跳与阻塞性业务消息分发实例
继续之前的例子(netty5心跳与业务消息分发实例),我们在NettyClientHandler把业务消息改为阻塞性的: package com.wlf.netty.nettyclient.handl ...
- oracle DBA 常用表和视图
☆dba_开头..... dba_users 数据库用户信息 dba_segments 表段信息 dba_extents 数据区信息 dba_objects 数 ...
- 报错:Connection to node -1 could not be established. Broker may not be available. (org.apache.kafka.clients.NetworkClient)
报错背景: 启动kafka消费者之后出现这种报错,持续打印相同信息. 报错现象: [root@master kafka_2.-]# /opt/kafka/kafka_2.-/bin/kafka-con ...
- Swift细节记录<一>
1.全局变量记录: import UIKit class HHTSwitchGlobalData: NSObject { var isWaiterAutoPop: Bool = true privat ...