用Vue打造微信小程序，让你的开发效率翻倍！_vue开发微信小程序

Vue做为当下最为流行之一的前端框架，作为一款轻量级的JavaScript框架，在开发效率、易用性、灵活性等方面都有着出色的表现。

Vue有哪些优势可以应用于微信小程序？

• 更快的开发速度，vue的模版语法简单易学，开发者可以快速上手
• 更好的可维护性，组件化的架构，代码结构更加清晰更容易维护
• 跨平台支持，支持web端，移动端，桌面应用等多个领域

Vue如何应用于微信小程序？

在微信小程序中使用vue框架，需要借助三方库来实现，目前比较流行的就是，mpvue和uni-app，本文只介绍下uni-app,uni-app是一款基于Vue的跨平台框架，它支持同时开发多个平台（包括微信小程序、H5、App等），使用同一套代码即可完成多个平台的开发。uni-app提供了大量的组件和API,还有插件平台。

一套代码多个平台

uni-app是一款基于Vue的跨平台框架，它支持同时开发多个平台（包括微信小程序、H5、App等），使用同一套代码即可完成多个平台的开发。uni-app提供了大量的组件和API，可以帮助开发者快速完成跨平台应用的开发。

脚手架搭建框架和开发使用

环境，确保已安装 node.js

安装 vue-cli

npm install -g vite

创建uni-app 使用Vue3/Vite版

npx degit dcloudio/uni-preset-vue#vite my-vue3-projectcd my-vue3-projectnpm i

运行调试

提前 下载好微信小程序开发工具

$ npm run dev:weixinDONE Build complete. Watching for changes...运行方式：打开 微信开发者工具, 导入 dist\\dev\\mp-weixin 运行。

打开微信小程序导入dist\\dev\\mp-weixin 如下图

到此就可以进行开发流程了，框架还支持热重载，修改代码，同步编译

打包编译

执行以下代码

npm run build:mp-weixin

更多命令打开 pacage.json 查看

... \"dev:app\": \"uni -p app\", \"dev:app-android\": \"uni -p app-android\", \"dev:app-ios\": \"uni -p app-ios\", \"dev:custom\": \"uni -p\", \"dev:h5\": \"uni\", \"dev:h5:ssr\": \"uni --ssr\", \"dev:mp-alipay\": \"uni -p mp-alipay\", \"dev:mp-baidu\": \"uni -p mp-baidu\", \"dev:mp-jd\": \"uni -p mp-jd\", \"dev:mp-kuaishou\": \"uni -p mp-kuaishou\", \"dev:mp-lark\": \"uni -p mp-lark\", \"dev:mp-qq\": \"uni -p mp-qq\", \"dev:mp-toutiao\": \"uni -p mp-toutiao\", \"dev:mp-weixin\": \"uni -p mp-weixin\", \"dev:quickapp-webview\": \"uni -p quickapp-webview\", \"dev:quickapp-webview-huawei\": \"uni -p quickapp-webview-huawei\", \"dev:quickapp-webview-union\": \"uni -p quickapp-webview-union\", \"build:app\": \"uni build -p app\", \"build:app-android\": \"uni build -p app-android\", \"build:app-ios\": \"uni build -p app-ios\", \"build:custom\": \"uni build -p\", \"build:h5\": \"uni build\", \"build:h5:ssr\": \"uni build --ssr\", \"build:mp-alipay\": \"uni build -p mp-alipay\", \"build:mp-baidu\": \"uni build -p mp-baidu\", \"build:mp-jd\": \"uni build -p mp-jd\", \"build:mp-kuaishou\": \"uni build -p mp-kuaishou\", \"build:mp-lark\": \"uni build -p mp-lark\", \"build:mp-qq\": \"uni build -p mp-qq\", \"build:mp-toutiao\": \"uni build -p mp-toutiao\", \"build:mp-weixin\": \"uni build -p mp-weixin\", \"build:quickapp-webview\": \"uni build -p quickapp-webview\", \"build:quickapp-webview-huawei\": \"uni build -p quickapp-webview-huawei\", \"build:quickapp-webview-union\": \"uni build -p quickapp-webview-union\"...

需要注意的点

1. request请求需要https，在本地运行时，可以使用http（需要设置 勾选不校验合法域名）
   但是预览或者上传时，使用http无法请求，
   另外 上传，下载，webview 对应的域名都需要在后端配置
2. 法动态引入javascript脚本，不能像web端一样写script标签引入，因为不支持动态加载这种方式 引入，无法解决，你只需要知道即可。
3. css 长度单位记得 用rpx