vue脚手架项目创建uniapp项目开发小程序使用云开发

写bug的小秃驴

已于 2022-05-18 14:06:03 修改

阅读量593

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 小程序 javascript

于 2022-05-18 14:01:19 首次发布

本文链接：https://blog.csdn.net/sq7141879/article/details/124840926

本文详细介绍了如何在Vue脚手架项目中创建并配置UniApp，以实现小程序的开发，并利用云开发功能。关键步骤包括：安装特定版本的依赖，如copy-webpack-plugin和path，修改vue.config.js，创建cloudfunctions文件夹，以及在src/manifest.json中添加配置字段。成功配置后，微信开发者工具中将显示cloudfunctions文件夹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置云开发注意事项

基于node@^12.0.0版本进行配置

1. 首先安装依赖 copy-webpack-plugin@^6.0.0 版本，其他版本存在兼容性问题

2. 安装 [email protected] 依赖

3. 在项目根目录 vue.config.js 文件中配置(没有这个文件自行创建),如下：

//引入path模块
const  path = require("path");
//初始化配置
const  CopyWebpackPlugin = require("copy-webpack-plugin"

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

写bug的小秃驴

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniApp+Vue3+Vite微信小程序开发指南

青柠豆腐

06-01

7203

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。可查阅官方文档：https://vue-macros.dev/features/reactivity-transform.html。webstorm 下载地址：https://www.jetbrains.com/webstorm/

用Vue CLI创建uniapp项目

weixin_45416189的博客

03-03

7870

用Vue CLI创建uniapp 用Vue CLI创建uni-app，摆脱HBuilder，npm命令行运行及发布除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。如果是老的项目，也可以通过下方步骤，创建一个 uni-app 选择默认模板，然后将项目原封不动的复制到新项目的 ./src 目录。执行 npm run serve / npm run build 就可以运行和打包了。 1. 环境安装全局安装vue-cli npm ins

参与评论您还未登录，请先登录后发表或查看评论

使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法

10-15

主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

使用vue-cli脚手架创建uni-app工程

六耳石猴的博客

07-19

621

全局安装vue-cli npm install -g @vue/cli @vue/cli是新版本，旧版本需要先卸载，再安装新版本，或者覆盖安装（容易出错）创建工程 vue create -p dcloudio/uni-preset-vue %projectName% 这一步是使用github上dcloud的模板创建项目，所以需要联网，且访问github服务器时可能会出问题。按照如下步骤排查解决：检查命令拼写是否错误尝试更换npm镜像推荐淘宝镜像或npmjs镜像检查机器网络配置是否设置了拦截或代

uni-app脚手架搭建

最新发布

坚持写博客，大家的关注是我前进的动力！

05-28

227

4、微信小程序开发者工具导入项目。3、启动项目（微信小程序）

用脚手架创建一个uni-APP项目

weixin_46381556的博客

08-10

814

创建uni-app项目

如何用脚手架搭建uni-app(vue微信小程序)

weixin_45270158的博客

10-27

2374

如何用脚手架搭建uni-app(vue微信小程序) 1.全局安装 npm install -g @vue/cli 2.创建项目 vue crete -p dcloudio/uni-preset-vue myweixin(命名) 3.启动项目命令 npm run dev:mp-weixin 4.启动后打开文件导入微信小程序开发工具导入项目输入启动命令到这里就可以将文件导入微信小程序开发工具中 ⚠️注意不是直接将该文件导入而是该文件的 dist>dev>mp-weixin(你搭建时的名字)

Vue——创建uni-app脚手架

qq812457115的博客

06-24

294

1. 安装vue-cli npm install -g @vue/cli 2. 创建uni-app vue create -p dcloudio/uni-preset-vue my-project

使用uniapp生成小程序项目

前端职场小白_炜晨科技的博客

08-18

2196

注意：如果运行的过程中，发现最终在开发中工具中查看不了效果，那么大家就重新运行下 npm run dev:mp-weixin 同时，把开发者工具重启，然后重新导入试试。在uniapp中写小程序代码虽说使用vue，但是跟我们之前讲的vue中的用法还是有所差异（但是差异不大），下面就罗列出跟我们在Web平台中使用vue不一样的地方。（此时是开发阶段，所以运行 dev: 开头的指令，等项目做完了，要打包了，这个时候运行 build: 开头的指令）3、在创建的时候，它会提示你选择什么模板，选择。......

uniapp版vue脚手架

07-10

通过uniapp，开发者可以使用一套代码实现iOS、Android、微信小程序、支付宝小程序、百度小程序等多个平台的应用开发，大大降低了开发成本和维护难度。【压缩包子文件的文件名称列表】：虽然没有具体的文件名列表，...

html初始化代码__React-Typescript项目初始化

weixin_34861332的博客

12-27

354

第一篇：初始化React-TS项目你的先安装react-appnpm install -g create-react-app然后再使用这个命令创建ts的开发环境，Reacttypescript.bootcss.com<!-- 此种方法已经废弃 create-react-app react-for-typescript --scripts-version=react-scripts-ts -...

cloudbase-vue-next:云开发 Vue 插件（vue 3）

04-17

云开发 Vue3插件是云开发官方维护的 Vue 插件，提供全局入口、Vue 逻辑组件等功能。安装 npm install --save cloudbase-vue-next 使用下面我们使用 LoginState 组件，来动态绑定当前页面的登录态。页面初始化时，显示 '未登录' 之后我们调用[匿名登录]( anonymous.html)，如果登录成功，则文案将变成 '已登录' main.js import {createApp} from "vue" import Cloudbase from "cloudbase-vue-next" import App from "./App.vue" const app = createApp(App) app.use(Cloudbase, { env: "your-env-id" }) App.vue <template> <

Vue 云开发-结合survey.js+boostrapVue

m0_46239267的博客

01-04

1230

新建一个vue项目安装云开发vue插件 npm install --save @cloudbase/vue-provider 安装之后在main.js里面配置 import Cloudbase from "@cloudbase/vue-provider"; Vue.use(Cloudbase, { env: "xxx" }); 之后要注意以下这句话，如果匿名登录的话需要使用自定义安全规则登录验证登录方式有多种，可以使用邮箱登录在腾讯云控制台-环境-登录授权开启邮箱登录，并且配置好之后安装

Vue项目部署到云开发前端网页托管｜unicloud版

Evan Liu的博客

09-18

3625

当我们想要部署我们的`前后端分离项目`，由于我们又不想花RMB去购买专用的服务器，而`内网穿透`免费的一次只能穿透一个端口，怎么办呢????️，小编以前学云开发的时候经常使用前端网页托管，今天给分享大家，实现前后端分别部署：前端`Vue`项目（部署到前端网页托管，会生成一个临时的公网访问域名，当然有自己的域名可以进行绑定）、后端`Spring Boot`项目（使用`内网穿透`部署在本机）；

基于taro-vue2 开发小程序

qq_47793359的博客

03-21

1429

Taro 项目基于 node，请确保已具备较新的 node 环境（>=12.0.0） 1：使用 npm 或者 yarn 全局安装 @tarojs/cli 官网地址：https://taro-docs.jd.com/taro/docs/GETTING-STARTED // 使用 npm 安装 CLI npm install -g @tarojs/cli // 使用 yarn 安装 CLI yarn global add @tarojs/cli // 安装了 cnpm，使用 cnpm 安

Vuejs项目如何部署到云开发上？

weixin_45790562的博客

11-30

675

语雀链接：web项目部署到云开发 掘金链接：Vuejs项目如何部署到云开发上？ 1.创建Vue脚手架项目 #前提是之前全局安装过vue vue create projectName cd projectName vue add router #添加路由 #运行项目 npm run serve #打包项目 npm run build #执行这个命令才会生成dist目录，下面会用到 2.开通云服务注意选择按量计费开通静态网站托管，只支持按量计费，这是已开通成功图记住环境ID，下面会用 3.项目部署

uni-app vue3/vite版本开发小程序使用微信云函数

weixin_43715157的博客

10-19

646

1、src目录创建cloudfunctions文件夹，需要用到的云函数放入此文件夹。2、manifest.json配置 “cloudfunctionRoot”: “cloudfunctions/”。3、vite.config.js配置。

vue 中watch函数名_如何在Vue中使用云开发的云函数，实现邮件发送

weixin_31885977的博客

12-31

533

云开发的云函数能够让我们无需购买和管理服务器，就能够实现一些前端做不了，必须在服务端做的复杂操作，让我们大大降低了运维成本。本篇将会为您讲解，如何在前端主流框架Vue中使用云开发的云函数。通过本篇您将可以学习到：如何创建云开发环境如何在Vue中使用云开发如何在Vue中利用云开发的云函数，实现邮件的发送1.创建云开发环境打开云开发控制台地址：https://console.cloud.te...

快速实现一个带后端服务的 Vue 项目，用云开发Vue插件！

TCB_CloudBase的博客

05-17

1002

导语 云开发CloudBase作为一站式的云端一体化研发平台，为前端开发者提供了一站式的计算、存储、数据库、托管等服务；开发者可以通过云开发，快速开发出一个业务完善，性能强劲的 Web 应用，极大节约了研发的时间、人力和物力成本。秉承“为开发者提供更好用的云服务”的服务宗旨，云开发团队推出云开发Vue插件，使用云开发Vue插件，开发者可以无需搭建服务器，一键实现VUE项目的服务端构建。 云开发 Vue 插件 云开发 Vue 插件是云开发官方维护的 Vue 插件，提供全局入口、Vue 逻辑组件等功能。如

使用脚手架如何创建基于vue3的uniapp小程序项目

05-27

要创建基于 Vue 3 的 uni-app 小程序项目，可以按照以下步骤进行： 1. 确保已经安装了 Node.js 和 npm。 2. 全局安装 uni-app 的命令行工具 uni-cli，命令为：`npm install -g @dcloudio/uni-cli`。 3. 创建一个新的 uni-app 项目，命令为：`uni-app create -t vue3 my-project`。其中，`my-project` 是你要创建的项目名称。 4. 根据提示输入需要的选项，如项目名称、项目描述等。 5. 等待创建完成后，进入项目目录，命令为：`cd my-project`。 6. 使用 HBuilderX 或其他编辑器打开项目目录，开始进行开发。需要注意的是，由于目前 uni-app 对 Vue 3 的支持还不是很完善，可能会存在一些兼容性问题。如果在开发过程中遇到问题，可以查看官方文档或者在社区中寻求帮助。