elementui入门以及nodeJS环境搭建

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

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

CDN导入

<!-- . 导入css -->

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

        <!-- . 引入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>

        <!-- . 引入ElementUI组件 -->

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

elementui入门

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>elementui入门</title>

        <!-- . 导入css -->

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

        <!-- . 引入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>

        <!-- . 引入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: ;

                }

            }

            .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 ;

                background-color: #f9fafc;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <ul>

                <li>

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

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

                    <el-row>

                        <el-col :span="">

                            <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="">

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

                        </el-col>

                        <el-col :span="">

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

                        </el-col>

                    </el-row>

                    <el-row>

                        <el-col :span="">

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

1. Node.js是什么

1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。

  1.2 Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言

2. npm是什么

 为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。

   如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。

   于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，

   直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

   更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，

   npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

1、下载nodeJS的安装包

下载地址：https://nodejs.org/zh-cn/download/

     选择相应的版本下载，本章使用的是：二进制node-v10.15.3-win-x64.zip

3.2 解压

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

3.3 配置环境变量

 新增NODE_HOME，值为：D:\initPath\node-v10.15.3-win-x64

 修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

如果你的path和我一样是分开的就这样添加，如果不是就直接复制上面的就行

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"

3.5设置淘宝网

npm config set registry https://registry.npm.taobao.org/

3.6 验证安装结果

node -v

npm -v

3.6.2 查看淘宝镜像设置情况

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

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

1. 打开命令窗口

cmd

2.切换到你下载的文件解压盘

3. 进入指定目录

cd E:\temp\vueproject

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

5. 启动项目
npm run dev

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 ...

随机推荐

精通awk系列(7)：awk读取行的细节
回到: Linux系列文章 Shell系列文章 Awk系列文章详细分析awk如何读取文件 awk读取输入文件时,每次读取一条记录(record)(默认情况下按行读取,所以此时记录就是行).每读取一条 ...
5.Ansible Jinja2 模板
1.jinja2渲染NginxProxy配置文件 jinja2 房屋建筑设计固定的 jinja2模板与Ansible关系 Ansible如何使用jinja2模板 template模块拷贝文件? te ...
iOS 中使用 webSocket
iOS 中使用 webSocket 是服务器和app之间的一种通信方式 webSocket 实现了服务端推机制(主动向客户端发送消息).新的 web 浏览器全都支持 WebSocket,这使得它的使用 ...
Nginx 简介与安装、常用的命令和配置文件
1.nginx 简介(1)介绍 nginx 的应用场景和具体可以做什么事情 (2)介绍什么是反向代理 (3)介绍什么是负载均衡 (4)介绍什么是动静分离 2.nginx 安装(1)介绍 nginx 在 ...
ABC135记录
date: 2019-07-28 A - Harmony 题目大意: 给你两个不同的整数A和B,要求你找到一个整数K,同时满足|A-K|=|B-K|.找不到时,输出"IMPOSSIBLE&q ...
mysql数据库创建用户、赋权、修改用户密码
创建新用户 create user lisi identified by '123456'; 查看创建结果: 授权命令格式:grant privilegesCode on dbName.tableN ...
网页前端之JavaScript学习记录总结篇
咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩
Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
集合系列 Set（七）：LinkedHashSet
LinkedHashSet 继承了 HashSet,在此基础上维护了元素的插入顺序. public class LinkedHashSet<E> extends HashSet<E& ...
C语言程序设计100例之（21）：折半查找
例21 折半查找问题描述顺序查找是一种最简单和最基本的检索方法.其基本思想是:从检索表的一端(如表中第一个记录或最后一个记录)开始,逐个进行记录的关键字和给定值的比较.若某个记录的关键字和给定值 ...

elementui入门以及nodeJS环境搭建

elementui入门以及nodeJS环境搭建的更多相关文章

随机推荐

热门专题