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

創建項目

關于 vue-cli 3.x 的使用請移步至Vue CLI官方文檔查看。使用 vue-cli 3.x可視化頁面根據自己的需求創建一個ts 空項目即可。因為我們是用 ts 開發微信小程序，所以需要安裝微信小程序對應的 typesminiprogram-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，微信開放社區優秀個人貢獻者。

---

*點擊

歡迎在下方評論區留言或在微信開放社區?進入云開發專區與我們交流。

??更多精彩點擊下方圖片即可了解△ 如何用 CloudBase Framework 部署 Vue 項目？

△?實戰丨基于云開發實現的外賣小程序

---

---

由于公眾號推送規則更改，請多多分享、點贊和“在看”，以及時獲取云開發Cloudbase的最新動態。

? ? ? 點擊在看讓更多人發現精彩

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。