uniapp搭建vite+vue3+ts项目

TAT-Li

已于 2022-03-22 12:01:59 修改

阅读量3.3k

点赞数 2

文章标签：学习前端 typescript vue

于 2022-03-21 00:30:41 首次发布

本文链接：https://blog.csdn.net/weixin_46795923/article/details/123625246

版权

运行以下命令，如果报错可以直接在gitee clone一个下来 gitee

# 创建以 javascript 开发的工程  
npx degit dcloudio/uni-preset-vue#vite my-vue3-project  



# 创建以 typescript 开发的工程  
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

进入项目，npm i 安装依赖

然后就可以直接用uniapp运行

也可以通过命令行

# 运行到 h5   
npm run dev:h5  
# 运行到 app   
npm run dev:app  
# 运行到 微信小程序  
npm run dev:mp-weixin

命令行运行需要手动将dist中打包的文件用小程序的开发者工具中运行，如果是H5,直接点开链接就行

如果运行过程中有报错，可以先检查一下uniapp的版本，和更新编译器

使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别

编译器的区别

cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，可以使用 @dcloudio/uvm 管理编译器的版本，如 npx @dcloudio/uvm。
HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。