vue+ElementUI页面模板

2023年1月1日 441次阅读 来源: Muchen灬

一 在普通HTML项目中引入elementUI

vue+elementUI的HTML页面模板，可以直接套用

引入 vue  CDN:

<!-- 引入vue组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

引入elementUI  CDN:   官方文档地址：https://element.faas.ele.me/#/zh-CN/component/installation

<!-- 引入样式 -->
<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>

 

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入ElementUI  CDN -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>模板</title>
</head>
<style type="text/css">

</style>

<body>
    <div id="app">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger" v-for="(list,index) in 3">危险按钮{
  {index}}</el-button>
        </el-row>
    </div>

</body>
<!-- 引入vue组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //注册使用vue
    var Vue = window.Vue;
    var app = new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        methods: {

        }

    })

</script>

</html>

效果展示：如果出现下面的效果，表示可以正常使用了

《vue+ElementUI页面模板》

 

二 在vue-cli 项目中引入elementUI

(1)  切换到项目中，输入指令 npm i element-ui -s 来安装elementUI

如果npm 下载失败 ，建议使用cnpm 进行下载  指令  cnpm i element-ui -s

在国内使用npm是非常慢的，所以我推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具，安装cnpm需要npm,打开终端窗口，输入

npm install -g cnpm -registry=https://registry.npm.taobao.org

具体安装详情：https://blog.csdn.net/qq_40976321/article/details/94079344

 

(2)接着在main.js中引入并使用elementUI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

《vue+ElementUI页面模板》

 

 

 

成功效果展示：

《vue+ElementUI页面模板》

    原文作者：Muchen灬
    原文地址: https://blog.csdn.net/qq_40976321/article/details/104479251
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞