# kbone-vue3

**Repository Path**: MRLH/kbone-vue3

## Basic Information

- **Project Name**: kbone-vue3
- **Description**: 使用kbone+vue3进行开发
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 2
- **Created**: 2020-02-26
- **Last Updated**: 2024-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# kbone-vue3

使用 vue3 多端开发(小程序和Web)，基于 [kbone](https://github.com/wechat-miniprogram/kbone) 的 element 和 render。

## 特性

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

## 开发

* Web 端：直接浏览器访问 localhost:8080/ 即可看到效果。

```
npm run web
```

* 小程序端：使用开发者工具打开 dist/dev/mp 目录即可。
```
npm run mp
```

## 构建

* Web 端：构建完成会生成 dist/web 目录

```
npm run build
```

* 小程序端：构建完成会生成 dist/prod/mp 目录

```
npm run build:mp
```

## 小程序端打开

需要先进入 dist/mp 目录执行 `npm install` 安装相关的依赖包，然后用开发者工具打开 dist/mp 目录后再进行 npm 构建（关于 npm 构建可[点此查看官方文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)）。

## 目录说明

此模板 Web 端使用多入口；小程序端则按照业务分拆成多个页面。

```
├─ build
│  ├─ miniprogram.config.js  // mp-webpack-plugin 配置
│  ├─ webpack.base.config.js // 基础配置
│  ├─ webpack.dev.config.js  // Web 端构建开发环境配置
│  ├─ webpack.mp.config.js   // 小程序端构建配置
│  └─ webpack.prod.config.js // Web 端构建生产环境配置
├─ dist
│  ├─ dev
│     └─ mp        // 小程序端目标代码目录，使用微信开发者工具打开，用于开发环境
│  ├─ prod
│     └─ mp        // 小程序端目标代码目录，使用微信开发者工具打开，用于生产环境
│  └─ web                    // web 端编译出的文件，用于生产环境
├─ src
│  ├─ components             // 通用组件
│  ├─ pages                  // 页面入口目录
│  │  ├─ page1               // page1 页面
│  │  │  └─ main.js          // 入口文件
│  │  ├─ page2               // page2 页面
│  │  │  └─ main.js          // 入口文件
│  │  └─ page3               // page3 页面
│  │     └─ main.js          // 入口文件
│  ├─ app.css                // 小程序端主样式文件
│  └─ app.js                 // 小程序端主文件
└─ index.html                // Web 端入口模板
```

## 其他说明

如果要使用 ts，则在 vue 的 script 标签上加上 `lang="ts"`。如果要使用 reduce-loader，就不能使用 ts，因为 ts 目前没有支持内联 loader。

## License

MIT