• Stars
    star
    350
  • Rank 121,229 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 5 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

a simple vue template for kbone

vue-kbone

使用 vue 多端开发(小程序和Web),基于 kbone 的 element 和 render。

特性

  • 一键接入,立即使用
  • 支持更完整的 vue 语法及特性
  • webpack、es6、babel、hot reload、cli、vue-router、vuex,你想要的都有

开发

  • Web 端:直接浏览器访问 localhost:8080/ 即可看到效果。
npm run web
  • 小程序端:使用开发者工具打开 dist/mp 目录即可。
npm run mp

构建

  • Web 端:构建完成会生成 dist/web 目录
npm run build
  • 小程序端:构建完成会生成 dist/mp 目录
npm run build:mp

小程序端打开

需要先进入 dist/mp 目录执行 npm install 安装相关的依赖包,然后用开发者工具打开 dist/mp 目录后再进行 npm 构建(关于 npm 构建可点此查看官方文档)。

目录说明

此模板 Web 端使用单入口,通过 vue-router + 动态 import 的方式来运行;小程序端则按照业务分拆成多个页面,同属一个业务的页面则通过 vue-router 来组织。

├─ build
│  ├─ miniprogram.config.js  // mp-webpack-plugin 配置
│  ├─ webpack.base.config.js // Web 端构建基础配置
│  ├─ webpack.dev.config.js  // Web 端构建开发环境配置
│  ├─ webpack.mp.config.js   // 小程序端构建配置
│  └─ webpack.prod.config.js // Web 端构建生产环境配置
├─ dist
│  ├─ mp                     // 小程序端目标代码目录,使用微信开发者工具打开,用于生产环境
│  └─ web                    // web 端编译出的文件,用于生产环境
├─ src
│  ├─ common                 // 通用组件
│  ├─ mp                     // 小程序端入口目录
│  │  ├─ home                // 小程序端 home 页面
│  │  │  └─ main.mp.js       // 小程序端入口文件
│  │  └─ other               // 小程序端 other 页面
│  │     └─ main.mp.js       // 小程序端入口文件
│  ├─ detail                 // detail 页面
│  ├─ home                   // home 页面
│  ├─ list                   // list 页面
│  ├─ router                 // vue-router 路由定义
│  ├─ store                  // vuex 相关目录
│  ├─ App.vue                // Web 端入口主视图
│  └─ main.js                // Web 端入口文件
└─ index.html                // Web 端入口模板

其他说明

如果要使用 ts,则在 vue 的 script 标签上加上 lang="ts",具体可参考 src/list/Index.vue。如果要使用 reduce-loader,就不能使用 ts,因为 ts 目前没有支持内联 loader。

License

MIT

More Repositories

1

miniprogram-demo

微信小程序组件 / API / 云开发示例
JavaScript
6,576
star
2

minigame-unity-webgl-transform

Wechat Mini Game Unity engine adapter documents.
C
2,856
star
3

weui-miniprogram

小程序WeUI组件库
TypeScript
2,070
star
4

threejs-miniprogram

WeChat MiniProgram adapted version of Three.js
JavaScript
692
star
5

api-typings

Type definitions for APIs of Wechat Mini Program in TypeScript
TypeScript
673
star
6

computed

小程序自定义组件 computed / watch 扩展
TypeScript
654
star
7

recycle-view

recycle-view: a wechat miniprogram custom component
JavaScript
620
star
8

miniprogram-simulate

小程序自定义组件测试工具集
JavaScript
487
star
9

kbone-ui

kbone-ui 是一套能同时支持 小程序(kbone) 和 vue 框架开发的多端 UI 库(PS:新版 kbone-ui 已出炉并迁移到 kbone 主仓库,此仓库仅做旧版维护之用)
Vue
439
star
10

sm-crypto

miniprogram sm crypto library
JavaScript
414
star
11

lottie-miniprogram

lottie for miniprogram
JavaScript
351
star
12

minigame-canvas-engine

轻量级canvas2d渲染引擎,开放数据域开发解决方案。
JavaScript
274
star
13

miniprogram-component-plus

JavaScript
253
star
14

miniprogram-custom-component

JavaScript
197
star
15

slide-view

weapp custom component -- slide-view
JavaScript
185
star
16

mobx-miniprogram-bindings

小程序的 MobX 绑定辅助库
TypeScript
175
star
17

glass-easel

Multiple-backend declarative component-based JavaScript framework
TypeScript
172
star
18

minigame-demo

微信小游戏组件 / API / 云开发示例
JavaScript
152
star
19

navigation-bar

weapp custom component -- navigation-bar
JavaScript
148
star
20

wxml-to-canvas

JavaScript
146
star
21

kbone-template-react

a simple react template for kbone
JavaScript
134
star
22

minigame-adaptor

C#
131
star
23

miniprogram-i18n

小程序国际化方案 / The internationalizational (i18n) library for wechat miniprogram
TypeScript
129
star
24

miniprogram-slim

JavaScript
123
star
25

h5-to-miniprogram

a simple tool for transforming h5 to miniprogam
JavaScript
113
star
26

minigame-api-typings

Type definitions for APIs of Wechat Mini Game in TypeScript
TypeScript
106
star
27

minigame-lockstep-demo

JavaScript
102
star
28

awesome-skyline

94
star
29

kbone-api

TypeScript
73
star
30

skylint

Skyline 小程序迁移工具. Migration assistant for Skyline miniapp.
TypeScript
69
star
31

miniprogram-cli

JavaScript
68
star
32

miniprogram-compat

微信小程序 js 执行环境的兼容信息
JavaScript
66
star
33

mpflow

TypeScript
61
star
34

miniprogram-api-promise

JavaScript
59
star
35

miniprogram-file-uploader

JavaScript
57
star
36

xr-frame-cli

Tools for xr-frame in wechat miniprogram.
TypeScript
50
star
37

kbone-template-kboneui

JavaScript
43
star
38

j-component

a mock minprogram component framework
JavaScript
43
star
39

miniprogram-gesture

微信小程序手势库
JavaScript
39
star
40

h5-to-miniprogram-demo

一个简单的使用 h5-to-miniprogram 工具进行 h5 页面转换成小程序的 demo
JavaScript
31
star
41

miniprogram-elder-transform

小程序适老化自动适配工具
TypeScript
31
star
42

miniprogram-barrage

JavaScript
23
star
43

minigame-tuanjie-transform-sdk

JavaScript
22
star
44

miniprogram-hooks

小程序自定义组件 hooks
JavaScript
20
star
45

miniprogram-cloudbase-meeting-demo

云开发直播运营活动 demo
JavaScript
17
star
46

kbone-template-preact

a simple preact template for kbone
JavaScript
12
star
47

miniprogram-game-quickstart

JavaScript
12
star
48

wechat-miniprogram.github.io

HTML
11
star
49

miniprogram-quickstart

JavaScript
10
star
50

gtktest

Flutter linux demo with webview.
C++
9
star
51

miniprogram-offline-demo

小程序弱网/离线 demo
JavaScript
9
star
52

miniprogram-data-panel

小程序数据面板组件
JavaScript
6
star
53

xnet-miniprogram

Python
6
star
54

router

JavaScript
4
star
55

babel-preset-miniprogram

微信小程序 babel 构建环境预设
JavaScript
2
star
56

minigame-playable

TypeScript
2
star
57

miniprogram-mock

mock api for miniprogram
JavaScript
1
star
58

mp-user-avatar

TypeScript
1
star