Vue中Element的使用
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
这里介绍cdn和npm的方式。
一. cdn的方式
1.引入cdn
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2.使用element组件测试效果
打开element官网,选取一个例子测试效果
Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.io/#/zh-CN
可以直接复制代码使用,在页面下面还有这个组件的属性和方法介绍
3. 使用后就可以在页面查看效果(记得要创建vue实例)
再贴一张整页的代码吧
二.npm
推荐使用 npm 的方式安装,它能更好地和webpack打包工具配合使用。
1通过npm install element-ui安装(本人是这样的)
安装完成后可以在package.json文件中查看,或者打开node_modules文件夹,都能看到
2. 在main.js文件中引用
import Vue from 'vue'
import App from './App.vue'
//引用element
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';//使用
Vue.use(Element);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3. 接下来就可以在vue文件中使用了,使用一个例子测试一下效果
三. 到此,本次的介绍就结束了,element中组件的使用还是要多通过例子来尝试的。代码这种东西,就是要多练多试才能熟练使用。本文代码都是我自己写的demo和我自己的个人理解,如果介绍有不恰当或您不认同的地方,还请多多包涵,也欢迎您的指正!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)