vue+ElementUI页面模板

一在普通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>//注册使用vuevar 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)

成功效果展示：