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