企业网站建设资金预算表,最新国家大事新闻,开发公众号需要多少钱,南宁网站建设q479185700棒我之所以将Element归类为Vue.js#xff0c;其主要原因是Element是#xff08;饿了么团队#xff09;基于MVVM框架Vue开源出来的一套前端ui组件。我最爱的就是它的布局容器#xff01;#xff01;#xff01;
下面进入正题#xff1a;
1、Element的安装
首先你需要创建…
我之所以将Element归类为Vue.js其主要原因是Element是饿了么团队基于MVVM框架Vue开源出来的一套前端ui组件。我最爱的就是它的布局容器
下面进入正题
1、Element的安装
首先你需要创建一个Vue初始项目再在初始项目中进行安装~初始项目的创建参见我之前的博客Vue项目初始化
通过cd命令进入想要安装Element的目录即上一步初始化得到的Vue项目
cd D:
cd D:\WebstormProjects\test_vuecli
安装Element
npm i element-ui -S
安装完成后可以在 \test_vuecli\node_modules\目录下找到element-ui还可以在项目根目录\test_vuecli\下的package.json文件中的dependencies项中找到element-ui的版本信息如element-ui: ^2.4.4
2、使用Element
1Element的引入
在项目\test_vuecli\src\目录下的main.js文件中写入以下内容 import Vue from vue;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import App from ./App.vue;Vue.use(ElementUI);new Vue({el: #app,render: h h(App)
}); 以上代码便完成了 Element 的引入需要注意的是样式文件需要单独引入即index.css。
2使用Element组件
以分页样式组件为例我们在Element官网组件中找到了Pagination 分页项。 假设我们选定“带背景色的分页”查看源代码源码非常简洁 el-paginationbackgroundlayoutprev, pager, next:total1000
/el-pagination 接下来在\test_vuecli\src\components\目录下创建名为paging.vue的组件直接将上面的源代码复制到templatediv/div/template标签中。
3加载Element组件
在第2步创建paging,vue时会自动生成以下代码
scriptexport default {name: paging}
/script
目的是方便我们加载该组件,组件名为“paging”接下来找到项目入口文件App.vue在需要放分页的地方加上paging/paging
el-footer!--分页--paging/paging
/el-footer
并在App.vue文件的script/script中添加以下代码 import paging from ./components/paging.vue
export default {name:App,components:{paging}}; 保存后运行项目在Webstrom中的左下角点击npm右键start→run start 运行结果 点击链接查看页面。
