vue+ElementUI页面模板
程序员文章站
2022-03-16 07:54:26
...
一 在普通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)
成功效果展示：