南京建设集团网站,安徽网站建设哪家有,阜阳市重点工程建设局网站,深圳网站建设推进0 引言
前端的开发模式为MVVM(Model-View-ViewModel)#xff0c;而Vue侧重于VM开发#xff0c;主要用于数据绑定到视图的#xff0c;而ElementUI则侧重于V开发的前端框架#xff0c;主要用于开发美观的页面的。
1 ElementUI介绍
Element#xff1a;是饿了么公司前端开发…0 引言
前端的开发模式为MVVM(Model-View-ViewModel)而Vue侧重于VM开发主要用于数据绑定到视图的而ElementUI则侧重于V开发的前端框架主要用于开发美观的页面的。
1 ElementUI介绍
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。
Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比可以发现ElementUI提供的各式各样好看的按钮 ElementUI的学习方式和我们之前的学习方式不太一样对于ElementUI我们作为一个后台开发者只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。其官网地址Element - The worlds most popular Vue UI framework我们主要学习的是ElementUI中提供的常用组件。
2 快速入门
2.1 安装ElementUI的组件库打开Vue项目所在目录进入控制台命令行然后输入
npm install element-ui 然后我们需要在main.js这个入口js文件中引入ElementUI的组件库其代码如下
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);
具体操作如图所示 然后我们需要按照vue项目的开发规范在src/views目录下创建一个vue组件文件注意组件名称后缀是.vue并且在组件文件中编写之前介绍过的基本组件语法代码如下
template/templatescript
export default {}
/scriptstyle/style 最后我们只需要去ElementUI的官网找到组件库然后找到按钮组件抄写代码即可具体操作如下图所示 然后找到按钮的代码如下图所示 紧接着我们复制组件代码到我们的vue组件文件中操作如下图所示 最后我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件具体操作步骤如下 然后App.vue组件中的具体代码如下代码是我们通过上述步骤引入element-view组件时自动生成的。
templatediv idapp!-- {{message}} --element-view/element-view/div
/templatescript
import ElementView from ./views/Element/ElementView.vue
export default {components: { ElementView },data(){return {message:hello world}}
}
/script
style/style然后运行我们的vue项目浏览器直接访问之前的7000端口展示效果如下图所示 到此我们ElementUI的入门程序编写成功
