一、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组件的更多相关文章

  1. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  2. 为公司架构一套高质量的 Vue UI 组件库

    有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...

  3. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  4. Vue UI组件库

    1. iView UI组件库  iView官网:https://www.iviewui.com/ 2.Vux UI组件库   Vux官网:https://vux.li/ 3.Element UI组件库 ...

  5. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  6. 【转】优秀的Vue UI组件库

    原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...

  7. 创建一个自己的Vue UI组件库,并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  8. 仿写vue UI 组件总结 (自己练习,仿照现有的UI组件)

    UI组件 Vue开发插件流程 本来是昨天要写总结的,感觉自己写不好,就放弃了.今天看到了iview和element有一些摩擦,是关于代码借鉴的问题(哈哈),不做评价.谁下生会写组件,我仿(chao)写 ...

  9. 前端如何搭建vue UI组件库/封装插件(从零到有)

    需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以 ...

随机推荐

  1. BZOJ - 2783 树

    数列 提交文件:sequence.pas/c/cpp 输入文件: sequence.in 输出文件: sequence.out 问题描述: 把一个正整数分成一列连续的正整数之和.这个数列必须包含至少两 ...

  2. 阿里terway源码分析

    背景 随着公司业务的发展,底层容器环境也需要在各个区域部署,实现多云架构, 使用各个云厂商提供的CNI插件是k8s多云环境下网络架构的一种高效的解法.我们在阿里云的方案中,便用到了阿里云提供的CNI插 ...

  3. PHP 插入排序 -- 直接插入排序

    1)直接插入序 -- Straight Insertion Sort 时间复杂度 :O(n^2) 适用条件: 适合记录数不多的情况 1 <?php 2 $a = [0 =>3,4,5,1, ...

  4. 常用函数-String

    /************************************************************************ 函数功能:将字符串中str的old_value子字符 ...

  5. 9.Nginx常用模块

    1.nginx开启目录浏览 提供下载功能 默认情况下,网站返回index指定的主页,若该网站不存在主页,则将请求交给autoindex模块 如果开启autoindex模块,则提供一个下载的页面, 如果 ...

  6. ESP8266开发之旅 网络篇⑥ ESP8266WiFiGeneric——基础库

    1. 前言     在前面的博文中,博主介绍到ESP8266WiFi库是包含了很多功能的一个超级库.ESP8266WiFi库不仅仅局限于 ESP8266WiFi.h 和 ESP8266WiFi.cpp ...

  7. 是可忍孰不可忍!!nodepad++作者台独分子,恶毒言论!!!

    本来用了两年这个软件吧,不带任何情感的,单纯辅助工具.直到今天,在GitHub上,发现了这个作者以及一些同党都是一群尼玛生在中国骂中国的狗币. https://github.com/notepad-p ...

  8. 2019.NET Conf,我们在共同期待

    (一)回顾一个小社区红过的五分钟 不知不觉,距离中国.net社区组织的.net conf只有不到一周的时间,还记得年初在叶伟民老师,潘淳老师和张善友老师的号召下,我们长沙的十几位开发者自发组织起来,拉 ...

  9. ES6对象简洁语法

    对象(object)是 JavaScript 最重要的数据结构.ES6 对它进行了重大升级,本章介绍数据结构本身的改变及语法应用细节. 1.属性的简洁表示法 ◆ ES6 允许直接写入变量和函数,作为对 ...

  10. tcp通信客户端本地日志查看

    最近有一个需求,app要接sdk,只涉及到客户端tcp通信,不涉及服务端接口调用.本文主要从adb环境准备.android/ios本地日志查看实战,进行分析整理. 一.adb查看Android本地日志 ...