Vue CLI：一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)。TS：TypeScript，一種由微軟開(kāi)發(fā)的開(kāi)源、跨平臺(tái)的編程語(yǔ)言。它是JavaScript 的超集，最終會(huì)被編譯為 JavaScript 代碼。Kbone：致力于微信小程序和 Web 端同構(gòu)的解決方案。云開(kāi)發(fā)CloudBase：云原生一體化應(yīng)用開(kāi)發(fā)平臺(tái)，支持小程序/小游戲、Web和移動(dòng)應(yīng)用開(kāi)發(fā)。使用的工具和庫(kù)@vue/cli v4.1.1vue-cli-plugin-kbone latestkbone-ui latest

創(chuàng)建項(xiàng)目

關(guān)于 vue-cli 3.x 的使用請(qǐng)移步至Vue CLI官方文檔查看。使用 vue-cli 3.x可視化頁(yè)面根據(jù)自己的需求創(chuàng)建一個(gè)ts 空項(xiàng)目即可。因?yàn)槲覀兪怯?ts 開(kāi)發(fā)微信小程序，所以需要安裝微信小程序?qū)?yīng)的 typesminiprogram-api-typings， 安裝好后需要在 tsconfig.json 配置文件中的types 節(jié)點(diǎn)添加對(duì)應(yīng)的配置，最好是再加一個(gè)忽略校驗(yàn) *.d.ts 的配置項(xiàng)，因?yàn)橐氲?types 在編譯時(shí)也會(huì)校驗(yàn)。{??"compilerOptions":?{????...????"skipLibCheck":?true,????"types":?[??????...??????"miniprogram-api-typings"????],????...??},??...}

Kbone 提供了 vue-cli 3.x 的插件，可以一鍵集成到 vue-cli 3.x 創(chuàng)建的項(xiàng)目中。

在剛剛創(chuàng)建好的空項(xiàng)目中選擇 插件 -> 添加插件 搜索 vue-cli-plugin-kbone 點(diǎn)擊安裝即可。

安裝完成后會(huì)彈出配置頁(yè)面：

• AppID 填寫(xiě)自己的小程序 AppID
• 項(xiàng)目名 填寫(xiě)自己的項(xiàng)目名
• Kbone 入口文件名稱(chēng) 填寫(xiě)為 main.mp.ts
• 是否需要輸出 app.js、project.config.json 等非頁(yè)面相關(guān)文件 選擇 不輸出 project.config.json
• 選擇 app.wxss 輸出配置 選擇 輸出默認(rèn)標(biāo)簽樣式
• 選擇是否自動(dòng)構(gòu)建依賴(lài)包 根據(jù)自己使用的工具選擇 npm 或 yarn
• 是否需要使用 rem 建議開(kāi)啟其他的配置項(xiàng)默認(rèn)即可，然后點(diǎn)擊完成

插件會(huì)自動(dòng)生成 Kbone 的入口文件、配置文件、以及三條命令腳本。

入口文件

入口文件就是我們剛才輸入的 main.mp.ts ，位置在 src 目錄下，根據(jù)自己創(chuàng)建項(xiàng)目時(shí)所安裝的庫(kù)進(jìn)行修改

例如我在創(chuàng)建時(shí)使用了 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

//?需要將創(chuàng)建根組件實(shí)例的邏輯封裝成方法
export?default?function?createApp?()?{
??//?在小程序中如果要注入到?id?為?app?的?dom?節(jié)點(diǎn)上，需要主動(dòng)創(chuàng)建
??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 ， 位置在項(xiàng)目根目錄，其中的內(nèi)容自行按需修改，對(duì)應(yīng)的配置項(xiàng)可參考 Kbone官方文檔。

命令腳本

插件會(huì)在 package.json 中生成的三條命令腳本，分別是 build:mp 、 dev:mp 和 mp因?yàn)槲覀兒竺嫘枰偌?云開(kāi)發(fā) 所以命令需要做一點(diǎn)點(diǎn)修改，將打包目錄修改為 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 已發(fā)布，可以繼續(xù)使用 vue-cli 3.x的可視化頁(yè)面安裝，也可以使用命令行安裝。安裝完成后在 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')

完成上面步驟項(xiàng)目大致是可以跑起來(lái)了，但是 Kbone 是不支持 scoped 樣式的，所以在項(xiàng)目中用到 scoped 樣式的地方需要自己再改一下，這里就不細(xì)說(shuō)了。

還有最重要的一點(diǎn)就是我們?cè)诩?Kbone 時(shí)選擇的是 不輸出 project.config.json 也就意味著打包的時(shí)候不會(huì)生成 project.config.json 文件，原因也是因?yàn)?云開(kāi)發(fā) 中需要在 project.config.json 中配置 miniprogramRoot 和 cloudfunctionRoot ，所以我們需要手動(dòng)建一個(gè) project.config.json 文件在項(xiàng)目根目錄，如果不會(huì)建，那就在開(kāi)發(fā)者工具中新建一個(gè) 云開(kāi)發(fā) 項(xiàng)目，從里面拷一個(gè)吧。

project.config.json 文件創(chuàng)建完后，需要再在項(xiàng)目根目錄創(chuàng)建一個(gè) cloudfunctions 文件夾，用于存放 云開(kāi)發(fā) 的代碼，關(guān)于 云開(kāi)發(fā) 的代碼都放在這個(gè)文件夾下面就可以了，了解更多云開(kāi)發(fā)能力請(qǐng)查看云開(kāi)發(fā)文檔

上面的步驟完成后，還有最后一個(gè)關(guān)鍵步驟，配置 webpack 在打包項(xiàng)目時(shí)將 云開(kāi)發(fā) 相關(guān)的代碼也打包進(jìn)去

在項(xiàng)目根目錄創(chuàng)建一個(gè) 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'
??????}
????]))
??}
}
}

其配置的意思就是如果當(dāng)前運(yùn)行的環(huán)境變量是 miniprogram 那么就將 cloudfunctions 文件夾和 project.config.json 文件拷貝到小程序的打包目錄，到這里就全部集成完了，可以開(kāi)心的去碼代碼了～

作者：Stephen，微信開(kāi)放社區(qū)優(yōu)秀個(gè)人貢獻(xiàn)者。

---

*點(diǎn)擊

歡迎在下方評(píng)論區(qū)留言或在微信開(kāi)放社區(qū)?進(jìn)入云開(kāi)發(fā)專(zhuān)區(qū)與我們交流。

??更多精彩點(diǎn)擊下方圖片即可了解△ 如何用 CloudBase Framework 部署 Vue 項(xiàng)目？

△?實(shí)戰(zhàn)丨基于云開(kāi)發(fā)實(shí)現(xiàn)的外賣(mài)小程序

---

---

由于公眾號(hào)推送規(guī)則更改，請(qǐng)多多分享、點(diǎn)贊和“在看”，以及時(shí)獲取云開(kāi)發(fā)Cloudbase的最新動(dòng)態(tài)。

? ? ? 點(diǎn)擊在看讓更多人發(fā)現(xiàn)精彩

總結(jié)

以上是生活随笔為你收集整理的cli3解决 ie11语法错误 vue_使用 VueCLI 3.x 快速搭建Vue + TS + Kbone + KboneUI + 云开发 项目...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。