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开发的更多相关文章

  1. 57.NodeJS入门--环境搭建 IntelliJ IDEA

    转自:https://blog.csdn.net/wang19891106/article/details/51127133 NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习N ...

  2. NodeJS入门--环境搭建 IntelliJ IDEA

    NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习NodeJS,所以以此做个笔记,欢迎大家提出意见. 1.首先 下载安装NodeJS,下载安装IntelliJ IDEA 2.接下 ...

  3. 第三方web ide开发环境下vuejs开发HMR环境搭建-码农这样开发是快乐的！

    vuejs是一个非常优秀的前端框架,利用该框架可以快速开发出任何web app,之所以vuejs开发非常高效快捷,其中最重要的一点就是利用webpakc提供的HMR(热模块替换)特性,可以边写vue组 ...

  4. 【SSH】 之 Struts2环境搭建及简单应用开发

    在上一篇文章中,我们一起了解了一下struts2的工作机制原理,接下来让我们进行一下简单应用的开发 (一)配置环境 1.建立web项目 2.导入jar包 其中struts2中有很多jar包,我们不需要 ...

  5. 零基础 Vue 开发环境搭建 打开运行Vue项目

    [相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...

  6. Eclipse_luna_J2EE_For_JS+tomcat8.0环境搭建、配置、开发入门

    一.所有需要的软件.插件等下载地址 J2SE的官方下载路径:http://www.oracle.com/technetwork/java/javase/downloads/index.html Ecl ...

  7. appium自动化环境搭建（python语言开发）

    简述 1.安装jdk,配置环境变量 2.安装AndroidSDK,配置环境变量 3.安装Python 4.安装Python集成开发环境PyCharm 5.安装node 6.安装appium服务端 7. ...

  8. win7下docker环境搭建nginx+php-fpm+easyswoole开发环境

    基础的环境已在文章nginx.php-fpm.swoole HTTP/TCP压测对比中搭建了,现在是在这个基础上在搭建easyswoole开发环境 主要要修改的地方是dnmp包里面的docker-co ...

  9. 使用jasmine-node 进行NodeJs单元测试 环境搭建

    关于jasmine就不多说了,关于语法请参加官方文档.http://pivotal.github.io/jasmine/ 关于NodeJS的单元测试框架有多种,如果要在NodeJS中使用jasmine ...

随机推荐

  1. 在JAVA中怎么比较Double类型数据的大小

    在JAVA中怎么比较Double类型数据的大小  我来答  浏览 33044 次   3个回答 #活动# “双11”答题活动,奖励加码!最高得2000元购物礼金! pollutedair 2015- ...

  2. 今天闲来无事给我这老伙计A4L换个机油

    今天闲来无事给我这老伙计A4L换个机油         今天天气不错正好心血来潮给我的老伙计做个小保健.跟我这么久了也不能亏待是吧,也很久没来论坛了顺便冒个泡给我们版主晶晶交个作业要不然又要揍我了. ...

  3. tb刷单怎么不被降权

    淘宝刷单怎么才能不被降权? 1.刷销量时双方都不评价,或者卖号先评,买号等默认好评,这样更安全: 2.刷销量时如果周转资金充足,尽量晚点发货晚确认收货好评,或者等默认: 3.改价需要使用安全减价软件, ...

  4. 字节码(.class)文件的加载过程

    类加载 在Java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的. 类型可以是Class,Interface, 枚举等. Java虚拟机与程序的生命周期 在如下几种情况下,Java虚拟机 ...

  5. Kafka的Topic、Partition和Message

    Kafka的Topic和Partition Topic Topic是Kafka数据写入操作的基本单元,可以指定副本 一个Topic包含一个或多个Partition,建Topic的时候可以手动指定Par ...

  6. 8款超好用的SVG编辑工具用起来

    随着响应式网页的发展,对于内容呈现的要求也越来越高,尤其是图像.为了在各种设备上能实现自然伸缩或扩展而不影响图片质量,所以矢量图形(SVG)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...

  7. CSS清除浮动方法集合

    CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...

  8. SeetaFaceEngine2 实例

    LOG: Creating layer(6):LOG: Creating layer(0):LOG: Creating layer(9):LOG: Creating layer(0):LOG: Cre ...

  9. 报错：Exception: org.apache.sqoop.common.SqoopException Message: DRIVER_0002:Given job is already running - Job with id 1

    报错背景: 创建完成job之后,执行job的时候报错. 报错现象: Exception: org.apache.sqoop.common.SqoopException Message: CLIENT_ ...

  10. ABAP DEMO 年月的搜索帮助

    效果图: *&---------------------------------------------------------------------* *& Report YCX_ ...