uniapp 小程序 使用vue3+ts运行项目

这篇具有很好参考价值的文章主要介绍了uniapp 小程序 使用vue3+ts运行项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、详细可查看官网介绍,以下是我用vue-cli创建的vue3+ts项目

uniapp官网教程:uni-app官网

uniapp 小程序 使用vue3+ts运行项目,uni-app,小程序,前端

创建方式有2种

第一种:通过HBuilderX可视化界面创建

第二种:通过vue-cli命令行

二、本次使用的是vue-cli命令行创建

1、全局安装 vue-cli(已安装的可忽略)

npm install -g @vue/cli

2、创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板)

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
注意:若不能直接使用命令下载,可去gitee下载模板使用

3、打开文件

下载完模板后进行解压,利用vscode打开文件,会发现报这样的错误👇主要原因是没有下载依赖

uniapp 小程序 使用vue3+ts运行项目,uni-app,小程序,前端

解决以上错误:使用npm i 下载全部依赖即可

npm i

 4、运行uniapp

npm run dev:mp-weixin

此时终端会提示操作步骤👇

uniapp 小程序 使用vue3+ts运行项目,uni-app,小程序,前端

其中dist里面的dev文件就是小程序打包生成的文件👇

uniapp 小程序 使用vue3+ts运行项目,uni-app,小程序,前端

使用微信开发者工具导入项目(选择dist文件下的dev/map-weixin)-----务必填写已注册的AppID

uniapp 小程序 使用vue3+ts运行项目,uni-app,小程序,前端

 微信开发者工具打开项目

uniapp 小程序 使用vue3+ts运行项目,uni-app,小程序,前端

 文章来源地址https://www.toymoban.com/news/detail-644018.html

到了这里,关于uniapp 小程序 使用vue3+ts运行项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • (小程序)基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    版本信息: 点击编辑器的文件 新建 项目(快捷键Ctrl+N) 2.选择uni-app项目,输入项目名/路径,选择项目模板,勾选vue3版本,点击创建,即可成功创建。 3.点击编辑器的运行 运行到浏览器 选择浏览器 当然也可以运行到手机或模拟器、运行到小程序工具。 到这里一个简单的

    2024年02月16日
    浏览(79)
  • uni-app vue3+ts+vite开发小程序采坑说明

    uniapp v3 搭建项目使用官方推荐命令 或者是使用 uniapp官方gitee 模板库 在项目启动前UI调用,建议使用 扩展组件(uni-ui)里面有很多组件,不能满足需求自己可以手动修改 uni_modules 为在插件市场下载出来的插件目录(uni-app官方维护的组件库,能够兼容vue3) 自动引用components文件

    2024年02月09日
    浏览(37)
  • uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】

    微信小程序开发结束之后,点击右上角三个点显示: 1、创建share.ts文件 2、全局使用, 在 main.ts 里面 添加全局的 mixin 这样配置结束之后整个小程序所有页面点击右上角转发分享都走的这个文件,如果需要单个页面可以转发,可以看第三点 3、在需要的页面进行调用就行啦 a.

    2024年02月14日
    浏览(44)
  • 使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)

    uni-create-view :用于快速创建 uni-app 页面 uni-helper uni-app :代码提示 uniapp 小程序扩展 :鼠标悬停查文档 1.在types属性中添加属性名 @types/wechat-miniprogram 和  @uni-helper/uni-app-types. 2.添加vueCompilerOptions选项 ①在VS Code中找到设置 ②在设置中搜索文件关联 ③添加这两个文件名,值为

    2024年04月27日
    浏览(53)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(49)
  • 手写类似于BetterScroll样式的左右联动菜单 uni-app+vue3+ts (使用了script setup语法糖)

     注意:在模拟器用鼠标滚动是不会切换光标的,因为使用的是触摸滑动。【自定义类型贴在最后了】 script 部分如下:  template部分如下: scss样式:  category.d.ts main-arr.d.ts  

    2024年02月05日
    浏览(39)
  • 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发。随着vite.js破局出圈,越来越多的项目偏向于vue3开发,就想着uniapp搭配vite4.x构建项目效果会如何?经过一番尝试果然真香~ uniapp官网提供了  HBuild

    2024年02月09日
    浏览(68)
  • vue3+ts+vite 搭建uniapp项目(微信小程序)

    模板下载: uniapp 官网通过vue-cli 命令行创建uniapp,参考uni-app官网,使用  npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 下载模板; 安装css预处理 sass: 项目终端输入: yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass (模板没有默认安装sass, 如果不安装直接使用会报错)  安装uni-ui组件

    2024年02月09日
    浏览(48)
  • uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了

    想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直接clone下来使用。先看一下pc端和小程序端的效果: 微信小程

    2024年02月05日
    浏览(62)
  • Vue3+TS版本Uniapp:封装uni.request请求配置

    作者: 前端小王hs 阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主 uniapp 的封装逻辑不同于 Vue3 项目中直接使用 axios.create() 方法创建实例(在 create 方法中写入请求的地址、请求头、超时等内容),代码如下: PS:上述代码来自博主在B站的

    2024年04月22日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包