zoukankan      html  css  js  c++  java
  • 关于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]{

        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

  • 相关阅读:
    js 安全
    js压缩 uglify(2)
    js压缩 uglify
    抢红包算法 java
    手机调试
    Java中的随机数生成器:Random,ThreadLocalRandom,SecureRandom
    字符集编码 定长与变长
    db2 sqlcode
    2015.7.14(大盘结束红色,中色连坐4T)
    2015.7.10(全部涨停!想逢高出货,但是担心周一创新高)
  • 原文地址:https://www.cnblogs.com/sna-ling/p/11650638.html
Copyright © 2011-2022 走看看