关于vue ui组件

Posted 2020-11-15 sna-ling

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