跳转至

01-创建项目

基于 vue-cli 创建

vue create peoject_name

基于 vite 创建

参考:vitejs.cn

💡 极速的服务启动 - 使用原生 ESM 文件,无需打包!

⚡️ 轻量快速的热重载 - 无论应用程序大小如何,都始终极快的模块热重载(HMR)

🛠️ 丰富的功能 - 对 TypeScript、JSX、CSS 等支持开箱即用。

📦 优化的构建 - 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

🔩 通用的插件 - 在开发和构建之间共享 Rollup-superset 插件接口。

🔑 完全类型化的API - 灵活的 API 和完整 TypeScript 类型。

已安装 18.0 或更高版本的 Node.js

npm create vue@latest

目录结构

vue3-vite-demo                     
├─ public                          
  └─ favicon.ico                  
├─ src                             
  ├─ assets                       
    ├─ base.css                  
    ├─ logo.svg                  
    └─ main.css                  
  ├─ components                   
    ├─ icons                     
      ├─ IconCommunity.vue      
      ├─ IconDocumentation.vue  
      ├─ IconEcosystem.vue      
      ├─ IconSupport.vue        
      └─ IconTooling.vue        
    ├─ HelloWorld.vue            
    ├─ TheWelcome.vue            
    └─ WelcomeItem.vue           
  ├─ App.vue                      
  └─ main.ts                      
├─ README.md                       
├─ env.d.ts                        
├─ index.html                      
├─ package.json                    
├─ tsconfig.app.json               
├─ tsconfig.json                   
├─ tsconfig.node.json              
└─ vite.config.ts                  

这个是什么意思 /// <reference types="vite/client" />

/// <reference types="vite/client" /> 是一个用于引入类型声明文件的指令,通常被放置在TypeScript文件的最顶部。

在Vue 3中,Vite是一种现代化的构建工具,它可以在开发环境中提供快速的热重载和冷重启功能。当使用Vite构建Vue 3项目时,可以使用/// <reference types="vite/client" />指令来引入Vite相关的类型声明文件。

Vite的类型声明文件包含了一些特定于Vite的全局类型,例如import.metaimport.meta.env。通过引入这些类型声明文件,可以在代码中使用这些特定于Vite的全局类型,并获得代码补全和类型检查的支持。

具体来说,/// <reference types="vite/client" />指令会告诉TypeScript编译器在编译过程中引入Vite的类型声明文件,以便在开发过程中正确地处理Vite相关的类型。这样,就可以在Vue 3项目中使用Vite提供的特定功能,并且在开发过程中获得类型安全的支持。