vue+ElementUI页面模板

一 在普通HTML项目中引入elementUI

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

引入 vue  CDN:

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

 

代码：

    
    
    
    




    

        
            默认按钮
            主要按钮
            成功按钮
            信息按钮
            警告按钮
            危险按钮{{index}}
        
    

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

 

二 在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)

 

 

 

成功效果展示：