Vue.js 学习足迹(五)

最新推荐文章于 2020-06-12 19:44:48 发布
最新推荐文章于 2020-06-12 19:44:48 发布
阅读量484 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39469688/article/details/83049427
版权

文章目录

ElementUI的安装与引用

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面(PC)端组件库
ElementUi组件类似bootstrap 样式布局等等可以直接拷贝代码
http://element-cn.eleme.io

下载安装Element
cd 到项目目录下
cnpm i element-ui -S
-S表示开发者模式
-D表示生产者模式

引入element
index.js

//引入Element-ui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
/*
*   use的使用
*   组件库在内部注册了各种全局的组件
*   插件 挂载属性(axios) Vue.prototype.$ = $    this.$.get()

ElementUi 部分代码的应用

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

HelloWorld.vue

<template>
  <div class="hello">


    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>

    <hr>

    <el-switch
            v-model="value2"
            active-color="#13ce66"
            inactive-color="#ff4949">
    </el-switch>

    <hr>

    <div class="block">
      <span class="demonstration">格式化 Tooltip</span>
      <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
    </div>
    <div class="block">
      <span class="demonstration">禁用</span>
      <el-slider v-model="value5" disabled></el-slider>
    </div>

    <hr>
    <div class="banner">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="banner1">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <hr>

    <el-collapse accordion>
      <el-collapse-item>
        <template slot="title">
          一致性 Consistency<i class="header-icon el-icon-info"></i>
        </template>
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
      <el-collapse-item title="效率 Efficiency">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
      </el-collapse-item>
      <el-collapse-item title="可控 Controllability">
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-collapse-item>
    </el-collapse>

    <hr>

  </div>


</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {


            return {
                radio: '1',
                value1: true,
                value2: true,
                value1: 0,
                value2: 50,
                value3: 36,
                value4: 48,
                value5: 42
            }

        },
        methods: {
            formatTooltip(val) {
                return val / 100;
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }


  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .banner{
    width:1200px;
    margin:0px auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .banner1{
    width:1200px;
    margin:0px auto;
  }
</style>

在这里插入图片描述

Mint Ui 组件

基于 Vue.js 的移动端组件库
http://mint-ui.github.io/

拦截器Indicator(是用来在点击按钮数据请求结束之前的加载动作)

在这里插入图片描述

原生UI 组件 MUI

一个不基于框架的UI组件，同样可以应用其代码，需要先下载组件包
http://dev.dcloud.net.cn/mui/ui/
下载组件包
GitHub地址

在这里插入图片描述

下载压缩包拷贝到项目下static文件夹内

引入UI组件样式mui.min.css 和 mui.min.js

index.html


    <!--引入原生MUI组件-->
    <link rel="stylesheet" href="static/mui-master/dist/css/mui.min.css">
    <script src="static/mui-master/dist/js/mui.min.js"></script>
MUI原生组件的部分代码应用

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <button type="button" class="mui-btn mui-btn-outlined">默认</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
    <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
    <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
    <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button>
    <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>

    <div>

      <!-- 开关打开状态，多了一个.mui-active类 -->
      <div class="mui-switch mui-active">
        <div class="mui-switch-handle"></div>
      </div>

      <!-- 简洁模式开关关闭状态 -->
      <div class="mui-switch mui-switch-mini">
        <div class="mui-switch-handle"></div>
      </div>


      <!-- 蓝色开关关闭状态 -->
      <div class="mui-switch mui-switch-blue">
        <div class="mui-switch-handle"></div>
      </div>
      

    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

  .mui-switch{
    margin:0px auto;
  }
</style>

在这里插入图片描述

较为靠谱的移动端组件框架

http://www.auicss.com/
下载安装包同上

部分代码的引用

在这里插入图片描述

对于代码的引用

1.拷贝文档流代码div到模板中，此处eg为HelloWorld.vue
2.script引入文件aui-toast.js到index.html中(引入什么文件根据文档提示)
3.拷贝script标签下的代码到index.html

页面效果
在这里插入图片描述

We-Vue UI组件

基于vue.js的移动开发组件
http://wevue.org
安装组件
cnpm install we-vue -S

1.概述
we-vue语法提示
2.快速上手
引入we-vue

  import WeVue from 'we-vue'
  import 'we-vue/lib/style.css'
  Vue.use(WeVue)
Vue.js框架开发项目中 引入阿里图标

1.在阿里图标网站 http://iconfont.cn 选取图标添加到购物车在下载至项目
2.在vue项目下新建全局文件夹global>css/js/font
3.将阿里图标项目文件压缩包拷贝至font文件夹并解压
4.在css中添加全局css默认样式 cssReset.css
5.将阿里图标压缩包解压中的demo.css iconfont.css 默认样式拷贝至cssReset.css
注意iconfont.css中的路径需要根据cssReset.css进行修改, …/返回上一级找到font文件夹即可

在这里插入图片描述

对于阿里图标的class类名引用
1.index.html 引入cssReset.css文件
2.添加类名

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Muse-Ui 组件

登录Muse-Ui组件库主页github下载压缩包到项目下
基于 Vue 2.0 优雅的 Material Design UI 组件库
http://muse-ui.org
安装muse-ui组件
cnpm install muse-ui -S
在这里插入图片描述

部分代码应用
index.html 引入上图链接
代码拷贝页面效果
在这里插入图片描述

Vue可视化布局
安装可视化布局组件
cnpm i iview -S
链接 https://jaweii.github.io/Vue-Layout/dist/#/

在这里插入图片描述

下载项目代码
https://github.com/jaweii/Vue-Layout
下载压缩包

项目下新建文件夹 Vue-Layout
将别人的代码中的global.css拷贝到文件夹下

https://github.com/jaweii/Vue-Layout/blob/master/src/main.js
组件库，内有可视化布局组件的引用方式

main.js

import '../Vue-Layout/global.css'

在这里插入图片描述

KrisChung
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Mysql+Vue+Django的协同过滤和内容推荐算法的智能音乐推荐系统-深度学习算法应用（含全部工程源码）+数据集
08-17
2.项目运行环境：包括 Python 环境、MySQL 环境和 VUE 环境。需要安装的依頼包为: Django 2.1、PyMySQL 0.9.2、jieba 0.39、xlrd 1.1.0、gensim 3.6.0 3.项目包括4个模块：数据请求及存储、数据处理、数据存储与后台...
使用api制作我的足迹地图
sunon_的博客
05-28 4028
查看我的足迹 很早的时候看到别人博客的足迹地图，就想着自己也搞一个，但是没找到相关的技术文章。不知道从何下手，前两天有了思路就做了起来。可以网上找地图的素材也可以用百度高德的开放平台做，还有一些其他的jQuery地图插件，也可以做出很漂亮很酷炫的地图，不过感觉没有百度地图这样的。。。。 我是用的百度地图api，所以说说怎么利用百度地图来做。 因为之前没接触过，所以一直觉得很复杂，也没有仔细看...
Vue 公众号商城实现浏览足迹
zqhs5599的博客
06-12 738
一、HTML <div class="product-page" v-if="product" @touchstart="touchstart()" @touchmove="touchmove()"> <van-popup v-model="is_history" position="top" class="history-popup" v-if="viewLog.length > 0"> <div class="history-tl">浏览足迹({{a
Vue.js 学习足迹(三)
KrisChung博客
10-13 341
文章目录vue项目的构建工具vue-cli搭建脚手架vue-cli环境 vue项目的构建工具vue-cli 搭建脚手架vue-cli环境 会用到vue全家桶 vue vue-cli axios vue-router vue-vueX vue-cli 脚手架 一个基于vue的构建工具 搭建vue项目的环境 好处 兼容 方便 快速 可以不用 脚手架（vue-cli） 就可以基于 webpac...
Vue.js 学习足迹(一)
KrisChung博客
10-13 461
文章目录安装Vue 安装Vue 可以在script标签中引入，但是需要在网络环境下 可以访问Vue官网 http://cn.vuejs.org 找到安装，点击开发版本，ctrl+s 保存vue.js文件到项目下 ...
流浪猫狗救助/医院管理系统，基于springboot+vue+java
04-11
本系统使用了SpringBoot2.X VUE2.6 Antd1.7.2 MyBatisPlus Shiro1.5.0 Java1.8等一系列技术。** ** 后台管理系统具备的功能： 1.实现了系统管理，包括了，系统用户管理，权限管理，角色管理 2.实现宠物救助站的账务...
基于uniapp+Vue框架的《露营》App开发与实现+毕业论文
09-04
简述：露营app为一个旅游服务app，用户可以寻找自己心仪的露营地点，并预定。 露营App主要内容，露营的教程以及注意事项，露营地点的搜索以及推荐，结合地图...我的：就订单，评价，足迹之类的。账号的管理，设置的内容
基于springboot+vue的商场系统源码和微信小程序用户移动端
05-12
前端管理页面主要是Vue.js框架，使用的是JavaScript语言。 管理后台系统也是SpringBoot框架，使用Java语言。 * 首页 * 专题列表、专题详情 * 分类列表、分类详情 * 品牌列表、品牌详情 * 新品首发、人气推荐 * 优惠...
java实现商城后台管理系统+H5端+小程序端+api后端接口（vue、java、springboot、mysql）
06-19
地址、收藏、足迹、意见反馈 客服 管理平台功能 会员管理 商城管理 商品管理 推广管理 系统管理 配置管理 统计报表 快速启动 配置最小开发环境： MySQL JDK1.8或以上 Maven Nodejs 微信开发者工具 数据库依次导入...
电力系统调度过程连续潮流matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar
04-26
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：330】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 付费问答系统通过MySQL数据库与Spring Boot框架进行开发，付费问答系统能够实现新闻类型管理，问题帖子管理，付费记录管理，新闻信息管理，用户管理，轮播图管理等功能。
关于旁路电容和耦合电容-(详细说明)
最新发布
04-26
关于旁路电容和耦合电容-(详细说明)
Git 与 Simulink 测试：远程测试的最佳实践.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
重庆大学电气工程学院2011级电机学课堂测验 直流电机.pdf
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
LabVIEW 数据采集模板.zip
04-26
labview 与 C 和BASIC 一样，LabVIEW [2]也是通用的编程系统，有一个完成任何编程任务的庞大函数库。LabVIEW [3]的函数库包括数据采集、GPIB、串口控制、数据分析、数据显示及数据存储，等等。LabVIEW [3]也有传统的程序调试工具，如设置断点、以动画方式显示数据及其子程序（子VI）的结果、单步执行等等，便于程序的调试。 LabVIEW [2]（Laboratory Virtual Instrument Engineering Workbench）是一种用图标代替文本行创建应用程序的图形化编程语言。传统文本编程语言根据语句和指令的先后顺序决定程序执行顺序，而 LabVIEW 则采用数据流编程方式，程序框图中节点之间的数据流向决定了VI及函数的执行顺序。VI指虚拟仪器，是 LabVIEW 的程序模块。 LabVIEW [2] 提供很多外观与传统仪器（如示波器、万用表）类似的控件，可用来方便地创建用户界面。用户界面在 LabVIEW 中被称为前面板。使用图标和连线，可以通过编程对前面板上的对象进行控制。这就是图形化源代码，又称G代码。
营业额日报.xlsx
04-26
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
Matlab菌丝检测识别项目.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
PictureUnlock_s_678376.pictureunlock
04-26
PictureUnlock_s_678376.pictureunlock
vue.js学习计划表
03-22
1. 学习前端基础知识：在开始学习Vue.js之前，建议先掌握HTML、CSS和JavaScript的基础知识，包括DOM操作、事件处理等。 2. 了解Vue.js的基本概念：学习Vue.js之前，先了解Vue.js的核心概念，如组件、指令、响应式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值