位置: IT常识 - 正文
Uni-app + Vue3 + TS +Vite 创建项目
编辑：rootadmin推荐整理分享Uni-app + Vue3 + TS +Vite 创建项目，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
npm 都很熟，可是与 npm 如此相似的 npx 是干嘛的呢？我们为甚要介绍 npx ?
由于 uni-app 官方提供创建命令使用的是 npx，所以我们先来了解下 npx 是干什么的？它与 npm 的区别。
npx 是 npm 的高级版本，它从 npm v5.2 版本开始引入的，与 npm 绑定在一起，无需额外安装，具有更大的功能。npx 是 npm exec 的别名，如果没有时，可以手动：npm install -g npx 进行安装。
区别：
npm 只能通过 package.json 里定义然后执行命令，npx 可以直接执行 node_module 包中的命令。npx 可以指定 node 、命令的版本，解决不同项目使用不同版本的命令问题。临时安装可执行依赖包，不用全局安装，也不用担心长期的污染。二、使用 Vue3/Vite 版创建项目 1、创建js项目npx degit dcloudio/uni-preset-vue#vite my-vue3-js执行命令后会自动创建项目，然后执行：
cd my-vue3-js // 进入my-vue3-js项目执行：
npm install依赖下载完成之后，就可以使用命令：
npm run dev:h5启动网页服务。至此，项目就创建完成，并可进行预览：
2、创建以 typeScript 开发的项目
创建命令：
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project回车开始创建的时候会报错：could not fetch remote https://github.com/dcloudio/uni-prset-vue，由于网络或者域名拦截引起的错误。
可以直接打开 github 地址：https://github.com/dcloudio/uni-preset-vue。
或者 gitee 下载地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip。
下载 zip 压缩包。
解压之后，运行：
npm install安装依赖完成之后，可以使用：
npm run dev:h5就可以正常运行项目了。
如果不熟悉 uni-app 项目的同学，可以自己在官网看看它的运行命令都有哪些以及它们的意义。
官方创建文档地址：
https://uniapp.dcloud.io/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app。
三、项目结构及作用以 uni-app + vue3 + vite + ts 项目为例，项目结构目录如图：
index.html 首页入口文件。package.json 项目配置文件。tsconfig.json typescript 配置文件。vite.config.ts vite 的配置文件。src 存放开发资源文件，基本要做的事情都在这个目录内，里面又包含了几个目录文件：
pages 存放所有页面文件，我们创建的页面组件都放入该文件夹。static 存放静态资源的文件夹。App.vue 页面入口文件，所有页面都在 App.vue 下进行切换。env.d.ts 第三方模块的类型上一篇：Vue使用axios发送get请求并携带参数(vue发送数据)
下一篇：H5移动端适配方案rem/vw(移动端h5页面适配)