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版本
 
 
 
 
 
 
 
 
 
 
 
 
 
 。