cdn方式使用element-ui样式

1.关于vue脚手架注册 使用element-ui  就不在这里详细讲解了 改天在讲解

在页面上面 先引入element-ui的css文件

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

 然后是引入js文件  因为elemnt-ui 是基于vue书写的

所以这里注意了 一定要先引入vue文件     顺序不要乱

<script src="https://unpkg.com/vue/dist/vue.js"></script>

然后在引入element.js

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

然后就可以在代码中使用element-ui的样式了吗? 其实这个时候还不行

我在上面说了是基于vue文件 封装的各种样式组件

所以你要在里面中监听才可以  全都是写在app中

<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">危险按钮</el-button>
</el-row>

</div>

最后在下面实例化vue实例

var app=new Vue({

          el:"#app"

})

到这里就可以看到页面上出现的各种各样的 按钮样式了

发布了107 篇原创文章 · 获赞 64 · 访问量 6673

猜你喜欢

转载自blog.csdn.net/yunchong_zhao/article/details/103787108
今日推荐