vue+node.js+webpack开发微信公众号功能填坑——组件按需引入
初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果
整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/docs/#/quickstart
app.vue
<template>
<div id="powerrank">
<yd-flexbox>
<yd-flexbox-item><span style="font-size: 16px;">测试数据</span></yd-flexbox-item>
</yd-flexbox>
<yd-flexbox>
<yd-flexbox-item>
<div id="search">
<yd-search cancel-text v-model="value"></yd-search>
</div>
</yd-flexbox-item>
</yd-flexbox>
<yd-flexbox>
<yd-flexbox-item>能耗排行</yd-flexbox-item>
<yd-flexbox-item>房间号</yd-flexbox-item>
<yd-flexbox-item>能耗程度</yd-flexbox-item>
</yd-flexbox>
<div id="data">
<yd-flexbox>
<yd-flexbox-item>测试</yd-flexbox-item>
<yd-flexbox-item>测试</yd-flexbox-item>
<yd-flexbox-item>测试</yd-flexbox-item>
</yd-flexbox>
</div>
</div>
</template>
<script>
export default {
name: 'Powerrank',
data(){
return{
value: '',//对应所有按钮的v-model,不写会报错
}
}
}
</script>
<style>
#powerrank{
}
.yd-flexbox {
height:0.8rem;
background-color: #4695e0;
color: white;
font-size: 14px;
text-align: center;
}
#search{
height:50%;
width:80%;
background-color: white;
margin:auto;
color: #4695e0;
}
#data .yd-flexbox{
height:0.5rem;
color: black;
background-color: #f4f4f4;
}
#data .yd-flexbox:nth-child(2n){//奇数行,偶数行颜色不一样
background-color: #ffffff;
}
</style>
index.html
main.js
import Vue from 'vue';
import {FlexBox, FlexBoxItem} from 'vue-ydui/dist/lib.rem/flexbox';
import {Search} from 'vue-ydui/dist/lib.rem/search';
import Powerrank from './App';
import 'vue-ydui/dist/ydui.base.css';
/**
yd-flexbox,yd-flexbox-item,yd-search对应vue中的
刚开始不知道写啥,后来就蒙上了,尬。。。。。。
*/
Vue.component('yd-flexbox', FlexBox);
Vue.component('yd-flexbox-item', FlexBoxItem);
Vue.component('yd-search', Search);
/* eslint-disable no-new */
new Vue({
el: '#powerrank',
components: { Powerrank },
template: '<Powerrank/>'
});
效果图
vue+node.js+webpack开发微信公众号功能填坑——组件按需引入的更多相关文章
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- Node.js+Koa开发微信公众号个人笔记(一)准备工作
本人也是在学习过程中,所以文章只作为学习笔记,如果能帮到你,那就更好啦~当然也难免会有错误,请不吝指出~ 一.准备工作 1.本人学习教程:慕课网Scott老师的<Node.js七天搞定微信公众号 ...
- Node.js+Koa开发微信公众号个人笔记(二)响应事件
微信公众号中的事件有订阅事件/扫码事件/点击事件/跳转链接事件等等,具体可以查阅文档. 这里来实现一下订阅事件,其他的事件的实现过程也都类似. 当有人订阅了公众号后,微信服务器会向我们的服务器推送一个 ...
- Node.js+Koa开发微信公众号个人笔记(三)响应文本
响应输入文本和响应事件类似,首先对微信服务器发送来的数据的MsgType进行处理,如果是text,说明是文本,接下来可以对文本内容进行处理,比如用户输入了1,可以给用户回复一个文本或者图文或者视频等信 ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
- vux+vuex+vue+Es6开发微信公众号的坑
初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...
- Vue开发微信公众号默认背景为灰色
最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调. ...
- vue开发微信公众号--开发准备
由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...
- 小机器人自动回复(python,可扩展开发微信公众号的小机器人)
api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...
随机推荐
- 扫描工具nmap介绍
NMap,也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包. 简介 nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行在哪些连接端,并且推 ...
- Trensient的使用介绍
1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过 ...
- UIView圆角设置
对于UIview的圆角设置最简单的就是layer的两个属性分别是cornerRadius和masksToBounds,但是对于设置其中某一个角为圆角的时候需要使用贝塞尔曲线 UIView *aView ...
- Python/ selectors模块及队列
Python/selectors模块及队列 selectors模块是可以实现IO多路复用机制: 它具有根据平台选出最佳的IO多路机制,比如在win的系统上他默认的是select模式而在linux上它默 ...
- Java知识体系纲要
最近一段时间,把Java主要涉及到的大概念都大致学习了一遍,为了让自己能够更好地形成对Java知识体系的整体把握,先把学过的知识点添加到自己画的思维导图上. 整个Java知识体系的划分,我自己主要将它 ...
- TCP/IP学习笔记:TCP传输控制协议(一)
1 TCP的服务 尽管TCP和UDP都使用相同的网络层(IP),TCP却向用户提供一种面向连接的,可靠地字节流服务.两个使用TCP的应用,在彼此交换数据之前必须先建立一个TCP连接,在一个TCP连接中 ...
- 开源协议瞎扯淡,什么是 MIT 协议?[转]
图片来源:http://ruby-china.org/topics/15979
- [LeetCode] Minimum Time Difference 最短时间差
Given a list of 24-hour clock time points in "Hour:Minutes" format, find the minimum minut ...
- 洛谷P3159 [CQOI2012]交换棋子
巧妙的拆点方式,首先把1看成黑点,0看成空的,几次交换就可以看成一条路径 1)从容量上看,这条路径为1-2-2-2-2-2----2-1 2)从费用上看,这条路径每条边费用都是1 于是用一种巧妙的拆点 ...
- UVALive - 3027:Corporative Network
加权并查集 #include<cstdio> #include<cstdlib> #include<algorithm> #include<cstring&g ...