ElementUI入门和NodeJS环境搭建

最新推荐文章于 2024-05-22 11:23:12 发布

Vicant 蒋勇

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量388

点赞数

本文链接：https://blog.csdn.net/weixin_44557427/article/details/100070009

版权

这篇博客介绍了ElementUI，一个基于Vue2.0的组件库，提供丰富的PC端组件，便于快速开发。同时，文章详细讲解了NodeJS环境的搭建过程，包括Node.js的性质、npm的作用、下载安装、配置环境变量、修改npm镜像以提高下载速度，并给出了运行Node.js项目的方法。

摘要由CSDN通过智能技术生成

一、关于 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-