使用 Vue-CLI 3.x 快速搭建「Vue + TS + Kbone + Kbone-UI + 云开发」 项目
Vue CLI:一个基于 Vue.js 进行快速开发的完整系统。
TS:TypeScript,一种由微软开发的开源、跨平台的编程语言。它是JavaScript 的超集,最终会被编译为 JavaScript 代码。
Kbone:致力于微信小程序和 Web 端同构的解决方案。
云开发CloudBase:云原生一体化应用开发平台,支持小程序/小游戏、Web和移动应用开发。
使用的工具和库
@vue/cli v4.1.1
vue-cli-plugin-kbone latest
kbone-ui latest
创建项目
关于 vue-cli 3.x
的使用请移步至Vue CLI官方文档查看。
使用 vue-cli 3.x
可视化页面根据自己的需求创建一个ts
空项目即可。
因为我们是用 ts
开发微信小程序,所以需要安装微信小程序对应的 types
miniprogram-api-typings
, 安装好后需要在 tsconfig.json
配置文件中的types
节点添加对应的配置,最好是再加一个忽略校验 *.d.ts
的配置项,因为引入的 types
在编译时也会校验。
{ "compilerOptions": { ... "skipLibCheck": true, "types": [ ... "miniprogram-api-typings" ], ... }, ...}
Kbone
提供了 vue-cli 3.x
的插件,可以一键集成到 vue-cli 3.x
创建的项目中。
在刚刚创建好的空项目中选择 插件
-> 添加插件
搜索 vue-cli-plugin-kbone
点击安装即可。
安装完成后会弹出配置页面:
-
AppID
填写自己的小程序AppID
-
项目名
填写自己的项目名 -
Kbone 入口文件名称
填写为main.mp.ts
-
是否需要输出 app.js、project.config.json 等非页面相关文件
选择不输出 project.config.json
-
选择 app.wxss 输出配置
选择输出默认标签样式
-
选择是否自动构建依赖包
根据自己使用的工具选择npm
或yarn
-
是否需要使用 rem
建议开启其他的配置项默认即可,然后点击完成
插件会自动生成 Kbone
的入口文件、配置文件、以及三条命令脚本。
入口文件
入口文件就是我们刚才输入的 main.mp.ts
,位置在 src
目录下,根据自己创建项目时所安装的库进行修改
例如我在创建时使用了 router
和 vuex
这些需要在入口文件引入的,所以也需要在 main.mp.ts
中引入:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 需要将创建根组件实例的逻辑封装成方法
export default function createApp () {
// 在小程序中如果要注入到 id 为 app 的 dom 节点上,需要主动创建
const container = document.createElement('div')
container.id = 'app'
document.body.appendChild(container)
return new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}
配置文件
配置文件为 miniprogram.config.js
, 位置在项目根目录,其中的内容自行按需修改,对应的配置项可参考 Kbone
官方文档。
命令脚本
插件会在 package.json
中生成的三条命令脚本,分别是 build:mp
、 dev:mp
和 mp
因为我们后面需要再集成 云开发
所以命令需要做一点点修改,将打包目录修改为 dist/mp/miniprogram
build:mp
改为:
"build:mp": "cross-env MP_ENV=miniprogram vue-cli-service build --mode production --dest ./dist/mp/miniprogram/common"
mp
改为:
"mp": "cross-env MP_ENV=miniprogram vue-cli-service build --mode development --dest ./dist/mp/miniprogram/common --watch"
集成Kbone-UI
期待已久的 Kbone-UI
已发布,可以继续使用 vue-cli 3.x
的可视化页面安装,也可以使用命令行安装。
安装完成后在 web
端的入口文件 main.ts
和 KBone
入口文件 main.mp.ts
中引入 Kbobe-UI
main.ts
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import KboneUI from 'kbone-ui'import 'kbone-ui/lib/weui/weui.css'Vue.use(KboneUI)Vue.config.productionTip = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app')
main.mp.ts
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import KboneUI from 'kbone-ui'
import 'kbone-ui/lib/weui/weui.css'
Vue.use(KboneUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
完成上面步骤项目大致是可以跑起来了,但是 Kbone
是不支持 scoped
样式的,所以在项目中用到 scoped
样式的地方需要自己再改一下,这里就不细说了。
还有最重要的一点就是我们在集成 Kbone
时选择的是 不输出 project.config.json
也就意味着打包的时候不会生成 project.config.json
文件,原因也是因为 云开发
中需要在 project.config.json
中配置 miniprogramRoot
和 cloudfunctionRoot
,所以我们需要手动建一个 project.config.json
文件在项目根目录,如果不会建,那就在开发者工具中新建一个 云开发
项目,从里面拷一个吧。
project.config.json
文件创建完后,需要再在项目根目录创建一个 cloudfunctions
文件夹,用于存放 云开发
的代码,关于 云开发
的代码都放在这个文件夹下面就可以了,了解更多云开发能力请查看云开发文档
上面的步骤完成后,还有最后一个关键步骤,配置 webpack
在打包项目时将 云开发
相关的代码也打包进去
在项目根目录创建一个 vue.config.js
文件,添加以下代码:
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.MP_ENV === 'miniprogram') {
config.plugins.push(new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './cloudfunctions'),
to: path.resolve(__dirname, './dist/mp/cloudfunctions'),
toType: 'dir'
},
{
from: path.resolve(__dirname, './project.config.json'),
to: path.resolve(__dirname, './dist/mp/project.config.json'),
toType: 'file'
}
]))
}
}
}
其配置的意思就是如果当前运行的环境变量是 miniprogram
那么就将 cloudfunctions
文件夹和 project.config.json
文件拷贝到小程序的打包目录,到这里就全部集成完了,可以开心的去码代码了~
作者:Stephen,微信开放社区优秀个人贡献者。
- numpy 参数(一) —— np.linalg
- 关于查看dba_data_files的一个小问题(r7笔记第72天)
- 一则备库CPU报警的思考(r7笔记第69天)
- Java设计模式-观察者模式
- 今天处理的三个小问题——20160120(r7笔记第84天)
- 主备切换的准备工作(r7笔记第83天)
- Java设计模式-外观模式
- Java设计模式-组合模式
- 使用shell批量监控磁盘坏块(二) (r7笔记第80天)
- JavaWeb10-request&response你不得不学(1)
- dg的奇怪问题终结和分区问题答疑 (r7笔记第77天)
- 最近让我焦灼的四个问题(有解) (r7笔记第76天)
- JavaWeb10-reques;response你不得不学(2)
- 很多人比较纠结的约束和索引的关系(r7笔记第75天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Codeforces Round #547 (Div. 3)E. Superhero Battle
- 《动态规划_入门 LIS 问题 》
- 栅格化系统的原理以及实现
- vue-qr二维码插件使用简介
- Codeforces Round #547 (Div. 3)F1. Same Sum Blocks (Easy)
- 手机软键盘弹起导致页面变形的一种解决方案
- Codeforces Round #547 (Div. 3)F2. Same Sum Blocks (Hard)
- 《 动态规划_ 入门_最大连续子序列 》
- docker搭建elasticsearch集群
- 用canvas实现手写签名功能
- Codeforces Round #547 (Div. 3)G. Privatization of Roads in Treeland
- 《 动态规划_ 入门_最大连续子序列_HDU_1003 》
- 2015 09CCF计算机软件能力认证试题第三题
- 《内蒙古自治区第十二届大学生程序设计竞赛试题_D: 正品的概率》
- Elasticsearch: Painless script编程