700字范文 > cli3解决 ie11语法错误 vue_使用 VueCLI 3.x 快速搭建Vue + TS + Kbone + KboneUI + 云开发项目...

cli3解决 ie11语法错误 vue_使用 VueCLI 3.x 快速搭建Vue + TS + Kbone + KboneUI + 云开发项目...

时间：2018-09-18 23:52:28

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中引入：

importVuefrom'vue'

importAppfrom'./App.vue'

importrouterfrom'./router'

importstorefrom'./store'

Vue.config.productionTip=false

//需要将创建根组件实例的逻辑封装成方法

exportdefaultfunctioncreateApp(){

//在小程序中如果要注入到id为app的dom节点上，需要主动创建

constcontainer=document.createElement('div')

container.id='app'

document.body.appendChild(container)

returnnewVue({

router,

store,

render:h=>h(App)

}).$mount('#app')

}

配置文件

配置文件为miniprogram.config.js，位置在项目根目录，其中的内容自行按需修改，对应的配置项可参考Kbone官方文档。

命令脚本

插件会在package.json中生成的三条命令脚本，分别是build:mp、dev:mp和mp因为我们后面需要再集成云开发所以命令需要做一点点修改，将打包目录修改为dist/mp/miniprogrambuild:mp改为：

"build:mp":"cross-envMP_ENV=miniprogramvue-cli-servicebuild--modeproduction--dest./dist/mp/miniprogram/common"

mp改为：

"mp":"cross-envMP_ENV=miniprogramvue-cli-servicebuild--modedevelopment--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

importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importKboneUIfrom'kbone-ui'import'kbone-ui/lib/weui/weui.css'Vue.use(KboneUI)Vue.config.productionTip=falsenewVue({router,store,render:h=>h(App)}).$mount('#app')

main.mp.ts

importVuefrom'vue'

importAppfrom'./App.vue'

importrouterfrom'./router'

importstorefrom'./store'

importKboneUIfrom'kbone-ui'

import'kbone-ui/lib/weui/weui.css'

Vue.use(KboneUI)

Vue.config.productionTip=false

newVue({

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文件，添加以下代码：

constpath=require('path')

constCopyWebpackPlugin=require('copy-webpack-plugin')

module.exports={

configureWebpack:config=>{

if(process.env.MP_ENV==='miniprogram'){

config.plugins.push(newCopyWebpackPlugin([

{

from:path.resolve(__dirname,'./cloudfunctions'),

to:path.resolve(__dirname,'./dist/mp/cloudfunctions'),