1. ElementUI简介

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

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

ElementUI入门

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>elementui入门</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>

         <style>

             .el-row {

                 margin-bottom: 20px;

                 &:last-child {

                     margin-bottom: 0;

                 }

             }

             .el-col {

                 border-radius: 4px;

             }

             .bg-purple-dark {

                 background: #99a9bf;

             }

             .bg-purple {

                 background: #d3dce6;

             }

             .bg-purple-light {

                 background: #e5e9f2;

             }

             .grid-content {

                 border-radius: 4px;

                 min-height: 36px;

             }

             .row-bg {

                 padding: 10px 0;

                 background-color: #f9fafc;

             }

         </style>

     </head>

     <body>

         <div id="app">

             <ul>

                 <li>

                     <h1>{{ts}}</h1>

                     <p>传统html+vue+elementUI开发</p>

                     <el-row>

                         <el-col :span="24">

                             <div class="grid-content bg-purple-dark">

                                 <el-button type="primary" v-on:click="doClick">主要按钮</el-button>

                             </div>

                         </el-col>

                     </el-row>

                     <el-row>

                         <el-col :span="18">

                             <div class="grid-content bg-purple" style="height: 400px;">博客信息</div>

                         </el-col>

                         <el-col :span="6">

                             <div class="grid-content bg-purple-light" style="height: 400px;">分类管理</div>

                         </el-col>

                     </el-row>

                     <el-row>

                         <el-col :span="24">

                             <div class="grid-content bg-purple-dark">版权信息</div>

                         </el-col>

                     </el-row>

                 </li>

             </ul>

         </div>

     </body>

     <script>

         var vm = new Vue({

             el: "#app",

             data: function() {

                 return {

                     ts: new Date().getTime()

                 }

             },

             methods: {

                 doClick: function() {

                     console.log('doClick');

                     this.$alert('这是一段内容', '标题名称', {

                         confirmButtonText: '确定',

                         callback: action => {

                             this.$message({

                                 type: 'info',

                                 message: `action: ${ action }`

                             });

                         }

                     });

                 }

             }

         });

     </script>

 </html>

运行后的界面：

2、NodeJS环境搭建

1. Node.js是什么

1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
1.2 Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言

注1：Node.js-->JavaScript运行环境，开发语言是：javascript
J2EE -->Java运行环境，开发语言是java
注2：Node.js v10.15.3文档地址：http://nodejs.cn/api/

2. npm是什么

npm其实是Node.js的包管理工具（package manager）。

   为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
   如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
   于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，
   直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，
npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

注1：npm类似于Java中的maven

3. Node.js环境搭建

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。

3.1 下载

下载地址：https://nodejs.org/zh-cn/download/
选择相应的版本下载，本章使用的是：node-v10.15.3-win-x64.zip

注1：Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本

3.2 解压

将文件解压到指定位置(例如：D:\initPath)，并在解压后的目录下建立node_global和node_cache这两个目录
      注1：新建目录说明
           node_global：npm全局安装位置
           node_cache：npm缓存路径

3.3 配置环境变量

新增NODE_HOME，值为：D:\initPath\node-v10.15.3-win-x64 (此处为已解压的安装包路劲)
修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

      注1：环境变量查看
           echo %node_home%
           echo %path%

      注2：测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
           node -v
           npm -v

3.4 配置npm全局模块路径和cache默认安装位置

打开cmd，分开执行如下命令：
      npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache" 注：将内容改为本地的安装路径
      npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global" 注：将内容改为本地的安装路径

      注1：将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
      注2：如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
      注3："D:\initPath\node-v10.15.3-win-x64\node_global"，双引号不能少

3.5 修改npm镜像提高下载速度(可以使用 cnpm 或直接设置 --registry ，推荐设置 --registry)

3.5.1 --registry
          ## 设置淘宝源
          npm config set registry https://registry.npm.taobao.org/
          ## 查看源，可以看到设置过的所有的源
          npm config get registry

          注1：其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
               registry=https://registry.npm.taobao.org

3.5 验证安装结果

3.5.1 版本验证(同步骤3.3，注2)
          node -v
          npm -v

    3.5.2 查看淘宝镜像设置情况
          npm get registry

3.6.3 查看npm全局路径设置情况

## 此步骤随便全局安装一个模块就可以测评
          npm install webpack -g
          ## 以上命令执行完毕后，会生成如下文件
          %node_home%\node_global\node_modules\webpack
    注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

4. 如何运行下载的Node.js项目

将下载的项目解压到指定目录，本例是解压到：D:\eeeee\vueproject，后面都以此为例
   ## 1. 打开命令窗口
   cmd

   ## 2. 切换到d盘
   d:

## 3. 进入指定目录
cd D:\eeeee\vueproject

4. 进行依赖安装

命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，
   ##    那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，
   ##    此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖
   ##    那pom文件在哪里呢？其实就是项目中的package.json
   npm install

5. 启动项目

执行命令： npm run dev

最后的运行结果：

好了，到这里NodeJS环境搭建以及测试基本上都完成了。

谢谢观看！！！

ElementUI入门和NodeJS环境搭建的更多相关文章

elementui入门以及nodeJS环境搭建
1. ElementUI简介我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名 ...
elementUI+nodeJS环境搭建
一. ElementUI简介我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名 ...
Cesium入门2 - Cesium环境搭建及第一个示例程序
Cesium入门2 - Cesium环境搭建及第一个示例程序 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 验 ...
windows下基于sublime text3的nodejs环境搭建
第一步:先安装sublime text3.详细教程可自行百度,这边不具体介绍了. 第二步.安装nodejs插件,有两种方式第一种方式:直接下载https://github.com/tanepiper ...
Mule 入门之：环境搭建
Mule 入门之:环境搭建 JDK1.5或以上版本Eclipse3.3以上下载与安装:目前最新版本为2.2.1 下载,下载后得到一名为mule-standalone-2.2.1.zip的压缩文件,解 ...
nodeJS环境搭建
1. Node.js是什么 1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]. Node.js使用了一个事件驱动.非阻塞式I/O 的模型. 1.2 Node.j ...
01-SV入门及仿真环境搭建
1.SV入门参考书籍<SystemVerilog验证测试平台编写指南> [美]克里斯·斯皮尔著 2.仿真环境搭建仿真工具:modelsim se 2019.2,它不仅支持Veril ...
PHP入门教程-开发环境搭建
1.PHP简介: PHP是能让你生成动态网页的工具之一.PHP网页文件被当作一般HTML网页文件来处理并且在编辑时你可以用编辑HTML的常规方法编写PHP. 2.学习需要基础: a.HTML b.Ja ...
Spring框架入门之开发环境搭建（MyEclipse2017平台）
基于MyEclipse2017平台搭建Spring开发环境,这里MyEclipse已将Spring集成好了,我们只需要做一简单配置即可一.环境配置 OS:Windows7 64位 IDE工具:MyE ...

随机推荐

Java开发笔记（一百三十八）JavaFX的箱子
前面介绍了JavaFX标签控件的用法,其中提到Label文本支持中文字体,那么它到底支持哪些中文字体呢?自然要看当前的操作系统都安装了哪些字体才行,对于中文的Windows系统,默认安装了黑体“Sim ...
Python规范:代码规范要注意
主要有以下两种代码规范 <8 号 Python 增强规范>(Python Enhacement Proposal #8),以下简称 PEP8: <Google Python 风格规范 ...
json转义问题
后端程序接受前台传递过来json 1正常json没有问题比如 {"id":21,"userName":"2张天师","phon ...
AS3灰色图像
一开始觉得AS3的滤镜很难使用,尤其是那些矩阵,让人望而生畏.最近写一个聊天模块,要用到离线状态下的灰色头像,于是认真研究了ColorMatrixFilter,发现其实也没有那么难.所谓的矩阵其实就是 ...
Xshell连接虚拟机文档教程
1打开VirtualBox 2 找到导入的虚拟机 3右键虚拟机启动 4 等待加载 5 加载的时候,打开xshell 6 7 填写框住的内容名称: 自己取主机: 127.0.0.1 固定内容端 ...
Nginx四个作用
本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完. Nginx能做什么 ——反向代理 ——负载均衡 ——HTTP服务器(动静分离) ——正向代理以上就是我 ...
memcpy 速度测试
1. 小米8代i5 3840X2160X4 7.77ms 即34Gbps
MQ相关
1. 如何保证消息按顺序执行 2. 如何保证消息不重复消费 3. 如何保证消息不丢失 4.RabbitMQ Java Client简单生产者.消费者代码示例
解决SecureCRT 中文乱码??
在linux服务器上搭建solr,用的是SecureCRT 连接linux服务器,发现不能输入中文,配置文件中的中文也是乱码:先以为是SecureCRT工具编码的问题,把编码改成utf-8之后发现还 ...
xcode 手动管理内存的相关知识点总结
一.XCode4.2以后支持自动释放内存ARC xcode自4.2以后就支持自动释放内存了,但有时我们还是想手动管理内存,这如何处理呢. 很简单,想要取消自动释放,只要在 Build Setting ...

ElementUI入门和NodeJS环境搭建