创建uniapp+vue3+ts项目

已于 2023-06-18 02:37:46 修改
阅读量987 收藏 5
点赞数 1
文章标签： uni-app vue.js typescript 开发语言 前端 html 小程序
于 2023-06-18 02:35:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Daqiang0907/article/details/131267134
版权

具体细节查看uniapp官网：https://uniapp.dcloud.net.cn

流程：

在文件夹中打开cmd,输入npm命令：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

 创建成功:

 别忘了在根目录下npm i一下

使用HBuilder X运行项目：

 

运行成功：

Daqiang0907
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
前端面试题html+css+js+ts+vue+react+uniapp
04-12
在前端开发领域，掌握HTML、CSS、JavaScript是基础，而TypeScript、Vue.js、React以及UniApp等技术则代表着现代Web应用的高级阶段。这些技术的深入理解和运用，对于前端开发者来说至关重要，尤其是在面试环节。以下...
uni-app基础框架搭建（vue3+ts+vite）
最新发布
LB_bei的博客
05-29 2565
uni-app官网uni-app,uniCloud,serverless,环境安装,创建uni-app,自定义模板,国内特殊情况,更新依赖到指定版本,运行、发布uni-app,运行并发布快应用,运行并发布快应用(webview),运行并发布快应用(webview)-华为,cli创建项目和HBuilderX可视化界面创安装node、hbuilder安装pnpm，相比于npm他的优点是：显著提升了包安装的速度和磁盘空间利用率，同时避免了依赖冲突和重复安装的问题；创建uniapp vue3+ts项目。
uniapp vue3+ts项目创建
qq_44937491的博客
03-13 575
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称。HbuilderX 对 TS 类型支持暂不完善，期待官方完善 👀。通过命令行创建 uni-app 项目，，TypeScript 类型支持友好。：快速创建 uni-app 页面。安装 uni-app 插件。vue3 + ts 版。
uniapp 使用命令行创建vue3 ts 项目
初遇你时动了情
03-26 876
vue3 + ts 版注意 Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0如果下载失败，请去gitee下载。
uniapp创建vue3项目
热门推荐
weixin_57844432的博客
06-14 1万+
uniapp-VUE3-微信小程序项目
uniapp 小程序 使用vue3+ts运行项目
weixin_71403100的博客
07-18 4908
下载完模板后进行解压，利用vscode打开文件，会发现报这样的错误👇主要原因是没有下载依赖。注意：若不能直接使用命令下载，可去gitee下载模板使用。其中dist里面的dev文件就是小程序打包生成的文件👇。解决以上错误：使用npm i 下载全部依赖即可。第一种：通过HBuilderX可视化界面创建。第二种：通过vue-cli命令行。此时终端会提示操作步骤👇。
uniapp(vue3+ts+vite+pinia) 项目架构搭建
weixin_45586038的博客
09-08 1058
最近看uniapp+vue3的社区挺活跃的，所以打算将的版本升级为uniapp+vue3。
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
总的来说，这个项目结合了uniapp的跨平台能力，vue3的性能提升与 Composition API，以及pinia的高效状态管理，旨在构建一个模块化且支持持久化存储的移动应用。项目中的`index.html`是主入口文件，`main.js`是应用的...
unibest最好用的uniapp开发模板，跨端快速启动模板，使用VS Code开发，具有代码提示、自动格式化、统一配置、代码片
02-03
unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件
vue3实现WebRTC实战1v1通话-后端代码(nestjs)
01-09
在本项目中，我们主要关注的是使用Vue3和NestJS构建一个1v1的WebRTC视频通话系统。WebRTC（Web Real-Time Communication）是一种开放的API标准，它允许浏览器之间进行实时通信，包括音频、视频和数据共享，无需任何...
微信小程序uniapp+vue3+ts+pinia的环境搭建
weixin_72707764的博客
03-29 3237
一.创建uniapp项目通过vue-cli创建二.安装依赖：1.pnpm i2.运行项目：将package.json的3.导入微信小程序开发工具打开微信开发者工具, 导入 dist\dev\mp-weixin 运行三. TS 类型校验在tsconfig.json文件中"compilerOptions"配置项内添加"ignoreDeprecations": “5.0”在配置完成后，vue组件就会提示报错信息四. JSON 注释问题。
Uni-app + Vue3 + TS +Vite 创建项目
任磊
01-03 6723
uni-app 是公司常用的一个框架，随着 vue3 的普及，好多公司的项目都已经开始使用 vue3 + uni-app + vite 开发项目，顺手记录和分享一下我在这过程中遇到的问题。
uniApp -- 学习笔记（vue3+ts）
寿春
06-15 1563
（三）我需要的是了解这几个方法的作用，这一个栏目，是uni选择器的了解，和构想一下使用场景的需求，其实从文档中可以得到的信息这几个方法的重载，选择一个节点，选择一个类的所有节点选择某个区域，调用。其实主要就是拿到这个数据，那么后面就比较理解了，比如selectAll 就是获取只要class 或者 id 所有的节点信息，数据为数组的节点位置信息。这是官网给的说法，听起来云里雾里的，但是可以拿到几个关键信息。拿到选择器，获取一定程度组件的，或者是整个页面的部分或者区域的选择器，提供了上述的几个方法。
vue3+ts+uniapp项目搭建
weixin_46646802的博客
02-03 292
vue3+ts+uniapp项目搭建
uniapp 小程序 使用 vue3 + ts
我的小鱼干呢！
06-30 943
1. 全局安装 vue-cli（安装跳过）2. 创建以 typescript 开发的工程（如命令行创建失败，请直接访问。可能会出现以下错误。别慌，npm i 安装全部依赖之后就好了。除了HBuilderX可视化界面，也可以使用。建议直接去下载模版，命令行问题有点多。
uni-app vue3 ts pinia axios router 搭建移动端H5
weixin_37735748的博客
10-07 1798
记录搭建uniapp过程
uniapp（vue3）-小程序搭建与问题
donglingyan的博客
07-02 1479
e.common--公共方法封装（request，api，登录，支付，上传文件方法封装，data模拟数据）"subPackages" : true //启用分包设置。（2）pages同目录建立subpkg。b.components--组件封装。c.filters--过滤器方法封装。a.store--vuex搭建。d.subpkg--分包处理。
在uniapp+vue3+ts，创建一个项目的详细过程
09-25
### 回答1： Uniapp Vue3 TS中创建项目的详细过程如下：1.首先，安装Vue CLI，这是一个用于构建Vue应用程序的命令行界面工具；2.安装uniapp，使用npm或者yarn安装uniapp；3.使用Vue CLI创建一个新的Vue应用；4.在Vue应用中安装uniapp；5.使用uniapp CLI安装需要的组件；6.使用uniapp CLI构建项目；7.使用uniapp CLI运行项目；8.部署应用程序。 ### 回答2： 在UniApp中使用Vue3和TypeScript创建一个项目的详细过程如下： 1. 环境准备：确保已安装Node.js和npm包管理器，然后使用命令行工具执行以下命令安装UniApp CLI工具：`npm install -g @vue/cli @vue/cli-init` 2. 创建项目：在命令行中执行以下命令创建一个UniApp项目：`vue create -p dcloudio/uni-preset-vue@next your-project-name`。 3. 过程中会提示选择预设（Presets）类型，选择"Manually select features"手动选择特性。 4. 选择特性：通过方向键选择"TypeScript"并按空格进行选择，然后按Enter键确认。 5. 选择样式预处理器（Stylus/Sass/Less）：根据需要选择相应的样式预处理器，或选择"None"不使用。 6. 选择静态资源目录：根据需要选择存放静态资源的目录，或选择默认值。 7. 选择ESLint代码检查工具和配置：根据需要选择是否使用ESLint检查代码规范，以及设置相应的规则。 8. 选择保存配置或预设：根据个人需要选择是否保存配置或使用预设。 9. 安装依赖：根据命令行提示，在项目根目录下执行`npm install`命令安装项目所需的依赖。 10. 启动开发服务器：依然在命令行中执行`npm run dev:%PLATFORM%`（%PLATFORM%为平台标识，如h5、app-plus等），启动开发服务器，进行项目开发。 11. 创建页面：在项目的`src/pages/`目录下创建相应的页面，例如`src/pages/index/`，并在该目录下创建`index.vue`作为页面的入口文件。 12. 编写代码：使用Vue3和TypeScript编写页面逻辑和样式代码。 13. 预览页面：在开发服务器启动后，打开浏览器，访问相应的开发链接（如http://localhost:%PORT%）即可预览页面效果。 14. 进行开发和测试：根据需求，在页面中添加事件处理、数据请求等逻辑，并进行开发和测试。 15. 打包发布：完成页面开发和测试后，执行相应的命令进行打包发布。例如使用`npm run build:%PLATFORM%`（%PLATFORM%为平台标识，如h5、app-plus等）命令打包相应平台的代码。 以上就是在UniApp中使用Vue3和TypeScript创建项目的详细过程。根据个人需求和项目的特点，还可以进一步配置和调整相应的开发环境、插件和工具等。 ### 回答3： 在Uniapp中使用Vue3和TypeScript创建一个项目的详细过程如下： 1. 首先，确保已经安装了Node.js和npm（Node.js自带）。 2. 打开终端命令行窗口，进入要创建项目的文件夹。 3. 运行以下命令安装uniapp-cli： ``` npm install -g @vue/cli @vue/cli-init ``` 4. 使用以下命令创建一个新的uniapp项目： ``` vue create -p dcloudio/uni-preset-vue my-project ``` 5. 创建过程中会提示选择预设配置，选择"Manually select features"并按回车。 6. 在选择特性的界面上，选择"TypeScript"并按回车。 7. 继续选择其他你需要的特性，或者直接按回车跳过。 8. 等待项目依赖安装完成。 9. 进入项目文件夹： ``` cd my-project ``` 10. 运行以下命令启动开发服务器： ``` npm run dev:mp-weixin ``` 11. 打开微信开发者工具，导入项目。 在微信开发者工具中，选择"导入项目"，然后选择项目文件夹。 12. 选择小程序开发目录为项目文件夹中的`dist/dev/mp-weixin`文件夹。 13. 点击确定，等待项目导入完成。 14. 点击微信开发者工具的"编译"按钮，以确保项目成功运行。 通过以上步骤，你已经成功创建了一个基于Uniapp的Vue3和TypeScript项目，并且可以在微信开发者工具中进行调试和开发。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值