关于vue ui组件
一、vue ui 组件
1: vue 当前很火前端框架vue 针对PC用户
pc 端与移动端区别
(1)屏幕宽度:992px >
(2)操作方式:鼠标 事件 手指:触碰操作
-饿了么:基于VUE框架开发移动端组件库 Mint-UI
-MUI :开源团队 MUI
http://dev.dcloud.net.cn/mui/
-滴滴:
2: vue ui 组件mint-ui安装与使用
方式一:学习环境下载安装
下载mint-ui js/css/font
方式二:生产环境下载安装(脚手架)
下载 npm i mint-ui #电脑联网
配置 复杂配置
3: vue ui 组件mint-ui组件分类
-css Components 组件
-js Components 组件
-Form Components 组件
4: vue ui 组件mint-ui组件 Toast 提示框
-下载 mint-ui js mint css
-下载 vue.js
#html加载文件顺序先加载vue.js 再加mint.js
this.$toast("提示消息");
this.$toast({})
message |
提示性文字 |
postion |
top;middle;bottom |
duration |
持续时间(毫秒) -1 不消失 |
className |
添加样式名称 |
close() |
(关闭) 删除提示消息对象 |
4: vue ui 组件mint-ui组件 lazyLoad
<ul>
<li>
<img v-lazy="x.png" />
<li>
...
</ul>
#懒加载图片显示样式
img[lazy=loading]{
width:150px;
height:40px;
margin:auto;
}
5: vue ui 组件mint-ui组件 轮播图
<mt-swipe :auto="4000" :show-indicators="true">
<mt-swipe-item>
<img src="x.jpg" />
</mt-swipe-item>
</mt-swipe>
#注意:mint-ui 组件轮播图默认高度0
6:vue cli 脚手架--学子商城(vue ui版本)
6.1:完成学子商城
(后端程序):node.js 服务器 mysql数据库
服务器程序
node.js 非常高效 跑车
apache 稳定 家用轿车
nginx 高效 高档家轿车
mysql 关系型开源免费数据库 (互联网产品)
redis 非关系型数据库 (并发量高)
(前端程序):vue-cli 脚手架
6.3:完成学子商城--vue cli 脚手架
项目为什么用脚手架
(1)前端项目太复杂
(2)脚手架管理维护项目第三方库
(3)热部署
-src: 你创建程序目录
main.js 入口文件
作用:负责加载此次项目使用模块
负责配置模块
负责创建Vue 实例对象
router.js 路由模块
作用:引入不同组件并且配置组件
访问路径
App.vue 根组件
components 项目中开发组件
lib/mui/css mui库使用样式
/fonts 字体图标
/js mui库js
-node_modules 第三方模块
axios vue 发送ajax请求第三方模块
mint-ui mint-ui 组件库
#安装第三方模板npm i 库名称;
-package.json 项目描述文件和配置文件
配置启动脚手架命令 server
配置启动脚手架端口号 8080
-启动项目 npm run serve
#常规开发组件简单工作流程
(1)需要哪些第三方组件在 main.js 加载配置
(2)在components目录下创建你的组件
(3)在router.js 配置访问路径
6.4:完成学子商城--vue cli 脚手架-创建测试组件
-main.js 加载需要第三方模块
-在components 创建自定义组件 Exam01.vue
<template></template> 显示数据与格式
<script></script> 完成业务功能
<style></style> 外观样式
-在router.js 配置如果访问组件(访问路径)
引入组件
import 组件对象名称 from "./components/Exam01.vue"
配置组件访问路径
{path:"/访问路径",component:组件对象名称}
#注意:访问路径加 /
-访问组件
http://127.0.0.1:8080/#组件访问路径 回车
练习:创建组件 List.vue
-显示data中定义用户列表信息
-编号;名称;地址 三个对象保存数组
常见错误:
(1)创建组件模板
- Failed to compile 编译出错 <template>标签出错
<div>...<div>
-创建组件没有显示 组件访问路径缺少 /
-脚手架启动失败
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
原因:启动脚手架位置不正确
原因:脚手架内容损坏
vue_app_00/npm run serve
(1)package.json
- router.js 配置路径出错
* ./components/List01.vue in ./src/router.js
关于vue ui组件的更多相关文章
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- 为公司架构一套高质量的 Vue UI 组件库
有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- Vue UI组件库
1. iView UI组件库 iView官网:https://www.iviewui.com/ 2.Vux UI组件库 Vux官网:https://vux.li/ 3.Element UI组件库 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
- 创建一个自己的Vue UI组件库,并将它发布在npm上
本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...
- 仿写vue UI 组件总结 (自己练习,仿照现有的UI组件)
UI组件 Vue开发插件流程 本来是昨天要写总结的,感觉自己写不好,就放弃了.今天看到了iview和element有一些摩擦,是关于代码借鉴的问题(哈哈),不做评价.谁下生会写组件,我仿(chao)写 ...
- 前端如何搭建vue UI组件库/封装插件(从零到有)
需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以 ...
随机推荐
- BZOJ - 2783 树
数列 提交文件:sequence.pas/c/cpp 输入文件: sequence.in 输出文件: sequence.out 问题描述: 把一个正整数分成一列连续的正整数之和.这个数列必须包含至少两 ...
- 阿里terway源码分析
背景 随着公司业务的发展,底层容器环境也需要在各个区域部署,实现多云架构, 使用各个云厂商提供的CNI插件是k8s多云环境下网络架构的一种高效的解法.我们在阿里云的方案中,便用到了阿里云提供的CNI插 ...
- PHP 插入排序 -- 直接插入排序
1)直接插入序 -- Straight Insertion Sort 时间复杂度 :O(n^2) 适用条件: 适合记录数不多的情况 1 <?php 2 $a = [0 =>3,4,5,1, ...
- 常用函数-String
/************************************************************************ 函数功能:将字符串中str的old_value子字符 ...
- 9.Nginx常用模块
1.nginx开启目录浏览 提供下载功能 默认情况下,网站返回index指定的主页,若该网站不存在主页,则将请求交给autoindex模块 如果开启autoindex模块,则提供一个下载的页面, 如果 ...
- ESP8266开发之旅 网络篇⑥ ESP8266WiFiGeneric——基础库
1. 前言 在前面的博文中,博主介绍到ESP8266WiFi库是包含了很多功能的一个超级库.ESP8266WiFi库不仅仅局限于 ESP8266WiFi.h 和 ESP8266WiFi.cpp ...
- 是可忍孰不可忍!!nodepad++作者台独分子,恶毒言论!!!
本来用了两年这个软件吧,不带任何情感的,单纯辅助工具.直到今天,在GitHub上,发现了这个作者以及一些同党都是一群尼玛生在中国骂中国的狗币. https://github.com/notepad-p ...
- 2019.NET Conf,我们在共同期待
(一)回顾一个小社区红过的五分钟 不知不觉,距离中国.net社区组织的.net conf只有不到一周的时间,还记得年初在叶伟民老师,潘淳老师和张善友老师的号召下,我们长沙的十几位开发者自发组织起来,拉 ...
- ES6对象简洁语法
对象(object)是 JavaScript 最重要的数据结构.ES6 对它进行了重大升级,本章介绍数据结构本身的改变及语法应用细节. 1.属性的简洁表示法 ◆ ES6 允许直接写入变量和函数,作为对 ...
- tcp通信客户端本地日志查看
最近有一个需求,app要接sdk,只涉及到客户端tcp通信,不涉及服务端接口调用.本文主要从adb环境准备.android/ios本地日志查看实战,进行分析整理. 一.adb查看Android本地日志 ...