基于Element，快速开发Vue项目

Element，是一套基于Vue2.0的UI组件库，利用它，我们可以可以快速开发我们的Vue项目。

官网网址：http://element-cn.eleme.io/#/zh-CN

闲话不多说，我们将基于刚创建好的vue-demo项目介绍如何使用Element：

1.使用IDE打开vue-demo项目，下面使用WebStom作为IDE演示

2.使用命令行安装Element-UI

3. 在项目目录输入npm run dev 运行项目

4.进入项目目录的main.js文件，引入ElementUI组件

5.接下来我们简单来熟悉vue文件的结构：

Vue是贯彻组件化的概念，页面里每个标签元素，都可以抽象为一个组件，通过多个组件的堆叠布局，最后形成一个页面

其中App是默认的根组件，我们会发现，这个App页面只有一个<img/>图片标签，但是我们的默认首页不仅有图片还有文字，那么文字是从哪里来的呢？

我们如果看看HelloWorld.vue文件的话，会发现首页少了的文字标签都在这里面

其实，HelloWorld.vue文件是作为一个子组件，路由放到了App.vue这个根组件里面，最后形成了我们看到的首页：logo+文字链接

知道了它们的关系以后，我们试着用ElementUI写一个组件，并放到App里面试试效果吧

6.首先删掉一些App默认图片代码，删除后得到什么都没有的根App组件，其中<router-view/>是一个路由标签，保留下来：

7. 我们新建一个Home组件，结合ElementUI,然后把这个组件挂载到App.vue这个根组件里面去：

8.编写Home组件的路由

9.接着，我们去ElementUI官网里面找个合适的组件，复制代码，简单使用一下：

10.大功告成，我们打开网页看看效果：

以上就是对ElementUI的简单使用，ElementUI这个PC端Web组件库十分的强大，里面组件十分全面也十分美观，而且用法十分简单，只需要知道vue的语法，使用起来非常方便，基于它，我们能快速开发出我们所需要的页面。

ElmentUI是一个PC端页面的组件库，后面给大家介绍一个Mint-UI的移动端组件库，也是一个十分好用的组件库。

项目源码github网址：https://github.com/aa792978017/vue-demo

分享一个自己的公众号：JavaUp

基于Element，快速开发Vue项目相关推荐

基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
Jeecg-Boot 一款基于SpringBoot 快速开发平台
Jeecg-Boot 一款基于SpringBoot 快速开发平台 Jeecg-Boot 是一款基于SpringBoot+代码生成器的快速开发平台!采用前后端分离架构:SpringBoot,Mybati ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
【vue】基于vue2.x的vue项目最最最基础模板
前言好久不见啊大家,今天想写这篇博客的时候才发现博客已经断更大半年了(手动滑稽) 由于去年十二月份被公司再次发配到上海出差,而且这次主要开发的是针对IE浏览器的一个插件(c++ 和 js 的交互) ...
Vue笔记——搭建脚手架并快速创建Vue项目
现在的Vue脚手架已经升级到3.x版本,即vue-cli3. 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程,以及使用新旧版本脚手架创建项目的过程. 下面的安装 ...
10个Spring Boot快速开发的项目，接私活利器（快速、高效）
本文为大家精选了码云上优秀的 Spring Boot 语言开源项目,涵盖了企业级系统框架.文件文档系统.秒杀系统.微服务化系统.后台管理系统等,希望能够给大家带来一点帮助:) 1.项目名称:分布式 ...
11个springboot快速开发的项目，接私活利器
转自公众号:码云Gitee 本文为大家精选了码云上优秀的 Spring Boot 语言开源项目,涵盖了企业级系统框架.文件文档系统.秒杀系统.微服务化系统.后台管理系统等,希望能够给大家带来一点帮 ...
创建基于webpack打包的vue项目
创建基于webpack打包的vue项目结合win7.element-ui.vue(vue-router.vue-cli).webpack等技术,完成了项目的基础工作.难则不会,会则不难:贵在经验总结 ...
vue-cli快速构建vue项目和本地模拟请求数据
Vue-cli快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使 ...

基于Element，快速开发Vue项目

基于Element，快速开发Vue项目相关推荐

最新文章

热门文章