uni.createAnimation（Uni-app + Vue3 + TS +Vite 创建项目）

一                、npx 与 npm 区别

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 第三方模块的类型声明文件

 

 

 

 

 

 

 

。 main.ts 项目入口文件














，因为使用 ts 语法                        ，所以后缀是 .ts
 

 

 

 

 

 

 

 。 mainfest.json 应用配置文件
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，用于指定应用名称
 
 
 
 
 
 
 
 、图标  
   
   
   
   
   
   
   
、权限等                。 pages.json 全局配置文件






















，可以配置页面文件路径 

 

 

 

 

 

 

 
、窗口样式

 

 

 

 

 

 

 

 、原生的导航栏               、底部tab栏等
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

。 uni.scss 是uni-app的样式包                ，在其他文件中可以快速引用样式包内的样式














。

注意：uni-app目前兼容的vite3版本的
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，我使用的是vite：3.2.4.vite4在本文完成时















，还不支持                        。因此  
  
  
  
  
  
  
  ，默认安装后 
  
  
  
  
  
  
  
 ，如果是vite4以上版本


 


 


 


 


 


 


 


，就要降低vite版本
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
。