1. PingCode智库首页
  2. 百科

原生js如何引入elementui

Edit2 • • 百科

原生js如何引入elementui

原生JS引入Element UI：使用CDN、通过NPM安装、在HTML文件中引入、初始化组件。在这些方法中，使用CDN是一种非常直接且方便的方式，适合快速上手和测试。CDN即内容分发网络，通过CDN引入Element UI，可以避免本地安装和配置的麻烦，只需在HTML文件中添加相应的链接即可。

一、使用CDN引入Element UI

使用CDN引入Element UI是最简单快捷的方法，适合快速测试和开发。以下是具体步骤：

1、添加CSS和JS链接

在HTML文件的<head>标签中添加Element UI的CSS和JS文件。以下是常见的CDN地址：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>


    <!-- 引入Element UI CSS -->


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


</head>


<body>


    <!-- 你的HTML内容 -->


    <!-- 引入Vue -->


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


    <!-- 引入Element UI JS -->


    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <script>


        // 初始化Vue应用


        new Vue({


            el: '#app',


            data: function() {


                return { message: 'Hello Element UI' }


            }


        });


    </script>


</body>


</html>

2、初始化Vue应用

在HTML文件中，创建一个Vue实例，并在实例中使用Element UI的组件。以下是一个简单的示例：

<div id="app">


    <el-button type="primary">{{ message }}</el-button>


</div>

二、通过NPM安装Element UI

对于大型项目或生产环境，推荐使用NPM安装Element UI，这样可以更好地进行版本控制和依赖管理。

1、安装Vue和Element UI

首先，确保已经安装了Node.js和NPM。然后在项目目录中运行以下命令：

npm install vue


npm install element-ui

2、引入Element UI

在项目的入口文件中引入Element UI和相关样式：

import Vue from 'vue';


import ElementUI from 'element-ui';


import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

3、创建Vue实例

然后，在HTML文件中创建Vue实例，并在实例中使用Element UI的组件：

<div id="app">


    <el-button type="primary">{{ message }}</el-button>


</div>


<script src="path/to/your/bundle.js"></script>

三、在HTML文件中引入Element UI

除了使用CDN和NPM安装外，还可以直接在HTML文件中引入Element UI的CSS和JS文件。这种方法适合不使用模块打包工具的小型项目。

1、引入CSS和JS文件

在HTML文件的<head>标签中添加Element UI的CSS和JS文件：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>


    <!-- 引入Element UI CSS -->


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


</head>


<body>


    <!-- 你的HTML内容 -->


    <!-- 引入Vue -->


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


    <!-- 引入Element UI JS -->


    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <script>


        // 初始化Vue应用


        new Vue({


            el: '#app',


            data: function() {


                return { message: 'Hello Element UI' }


            }


        });


    </script>


</body>


</html>

四、初始化组件

不论使用哪种方法引入Element UI，都需要在Vue实例中进行组件的初始化。以下是一个完整的示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Element UI Example</title>


    <!-- 引入Element UI CSS -->


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


</head>


<body>


    <div id="app">


        <el-button type="primary">{{ message }}</el-button>


    </div>


    <!-- 引入Vue -->


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


    <!-- 引入Element UI JS -->


    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <script>


        // 初始化Vue应用


        new Vue({


            el: '#app',


            data: function() {


                return { message: 'Hello Element UI' }


            }


        });


    </script>


</body>


</html>

五、使用组件

引入Element UI后，可以在Vue实例中使用各种组件。例如，使用el-button组件：

<div id="app">


    <el-button type="primary">{{ message }}</el-button>


</div>

还可以使用更多的组件，如输入框、表单、对话框等：

<div id="app">


    <el-input v-model="input" placeholder="请输入内容"></el-input>


    <el-button type="primary" @click="handleClick">点击我</el-button>


</div>


<script>


    new Vue({


        el: '#app',


        data: function() {


            return {


                input: ''


            }


        },


        methods: {


            handleClick() {


                alert(this.input);


            }


        }


    });


</script>

六、使用高级功能

Element UI提供了许多高级功能，如国际化、主题定制等。以下是一些示例：

1、国际化

Element UI支持多种语言，可以通过以下方式进行配置：

import Vue from 'vue';


import ElementUI from 'element-ui';


import locale from 'element-ui/lib/locale/lang/en';


Vue.use(ElementUI, { locale });

2、主题定制

可以通过SCSS变量来定制Element UI的主题：

$--color-primary: #409EFF;


@import "~element-ui/packages/theme-chalk/src/index";

七、总结

通过本文的介绍，我们了解了原生JS引入Element UI的多种方法，包括使用CDN、通过NPM安装、在HTML文件中引入和初始化组件。每种方法都有其适用的场景和优缺点，可以根据具体需求选择合适的方法。同时，Element UI提供了丰富的组件和高级功能，可以帮助我们快速构建高质量的前端界面。希望本文能对你有所帮助，让你在项目中更好地使用Element UI。如果你需要管理项目团队，可以考虑使用研发项目管理系统PingCode或通用项目协作软件Worktile，它们能有效提升团队协作效率。

相关问答FAQs：

1. 原生js如何引入ElementUI？

ElementUI是一个基于Vue.js的UI组件库，所以在原生js中引入ElementUI的方法是通过引入Vue.js和ElementUI的CDN链接。以下是具体步骤：

  • 首先，在HTML文件中引入Vue.js和ElementUI的CDN链接，放在<head>标签中：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  • 接下来，在原生js代码中使用ElementUI的组件，需要先创建一个Vue实例，并在实例的components中注册所需的组件。例如，如果要使用ElementUI的Button组件，可以这样写：
var app = new Vue({
  el: '#app',
  components: {
    'el-button': ElementUI.Button
  }
});
  • 最后，在HTML文件中使用ElementUI的组件，可以直接使用组件的标签名进行调用。例如，在<body>标签中添加以下代码：
<div id="app">
  <el-button type="primary">这是一个ElementUI的按钮</el-button>
</div>

通过以上步骤，就可以在原生js中成功引入和使用ElementUI的组件了。

2. 如何在原生js中使用ElementUI的表单组件？

要在原生js中使用ElementUI的表单组件，可以按照以下步骤进行操作：

  • 首先，引入Vue.js和ElementUI的CDN链接，同样放在<head>标签中。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  • 然后，创建一个Vue实例，并在实例的components中注册所需的组件。例如，要使用ElementUI的Input和Button组件，可以这样写：
var app = new Vue({
  el: '#app',
  components: {
    'el-input': ElementUI.Input,
    'el-button': ElementUI.Button
  },
  data: {
    inputValue: ''
  },
  methods: {
    submitForm: function() {
      console.log('提交的表单值为：', this.inputValue);
      // 在这里可以进行表单提交的操作
    }
  }
});
  • 最后，在HTML文件中添加表单和按钮，绑定相应的事件。例如，在<body>标签中添加以下代码：
<div id="app">
  <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  <el-button type="primary" @click="submitForm">提交</el-button>
</div>

通过以上步骤，就可以在原生js中使用ElementUI的表单组件，并通过点击按钮来提交表单数据。

3. 如何在原生js中使用ElementUI的弹窗组件？

要在原生js中使用ElementUI的弹窗组件，可以按照以下步骤进行操作：

  • 首先，引入Vue.js和ElementUI的CDN链接，同样放在<head>标签中。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  • 然后，创建一个Vue实例，并在实例的components中注册所需的组件。例如，要使用ElementUI的Dialog组件，可以这样写：
var app = new Vue({
  el: '#app',
  components: {
    'el-dialog': ElementUI.Dialog
  },
  data: {
    showDialog: false
  },
  methods: {
    openDialog: function() {
      this.showDialog = true;
    },
    closeDialog: function() {
      this.showDialog = false;
    },
    confirmDialog: function() {
      console.log('确认弹窗');
      // 在这里可以进行确认弹窗的操作
    }
  }
});
  • 最后，在HTML文件中添加触发弹窗的按钮和弹窗组件，并绑定相应的事件。例如，在<body>标签中添加以下代码：
<div id="app">
  <el-button type="primary" @click="openDialog">打开弹窗</el-button>
  <el-dialog :visible="showDialog" @close="closeDialog">
    <span>这是一个弹窗</span>
    <span slot="footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="confirmDialog">确认</el-button>
    </span>
  </el-dialog>
</div>

通过以上步骤，就可以在原生js中使用ElementUI的弹窗组件，并通过按钮来打开和关闭弹窗，以及执行相应的操作。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/2279270

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部