ElementUI入门和NodeJS环境搭建

一、关于 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-
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。【项目资源
Node.js环境搭建的步骤如下: 1. 首先,你需要下载并安装Node.js。你可以在Node.js的官方网站上找到相应的安装程序。根据你的操作系统选择合适的版本进行下载和安装。 2. 安装完成后,你需要设置Node.js的环境变量。环境变量可以让系统知道Node.js的安装路径,从而能够在任何位置运行Node.js命令。在Windows系统中,你需要配置NODE_HOME和将Node.js的可执行文件路径添加到系统的Path变量中。比如,将NODE_HOME设置为Node.js解压的根路径,并将%NODE_HOME%和%NODE_HOME%\node_global添加到Path变量中。 3. 验证Node.js的安装是否成功。在命令行中输入node -v命令,如果能够正确显示Node.js的版本号,则表示安装成功。 4. 你还可以安装npm,npm是Node.js的包管理工具,可以帮助你安装、管理和分享代码模块。npm是随同Node.js一起安装的,无需单独安装。你可以在命令行中输入npm -v命令来验证npm的安装是否成功。 5. 完成以上步骤后,你的Node.js环境就已经搭建好了。你可以开始使用Node.js来开发和运行JavaScript代码了。 请注意,以上是一般的Node.js环境搭建步骤,具体的步骤可能会因个人需求和操作系统而有所不同。如果你遇到了任何问题,可以参考Node.js的官方文档或在相关的技术社区寻求帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值