关于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