一、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]{
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