vue+ElementUI页面模板

vue+elementUI的HTML页面模板，可以直接套用引入 vue CDN:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>引入elementUI CDN:官方文档地址：https://element.f...

Muchen灬

19878人浏览 · 2020-02-24 16:16:41

Muchen灬 · 2020-02-24 16:16:41 发布

一在普通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-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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^