来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

Vite目录

  • public：存放不会被Vite编译的静态资源
  • src
    • assets：存放静态资源
    • components：存放组件
    • App.vue：Vue全局入口文件
    • main.ts：全局TS文件，可以引入全局样式、全局API、配置等
    • vite-env.d.ts：声明文件扩充，脚手架默认做了*.vue文件的声明扩充
    • index.html：Vite入口文件，使用ES Module形式引入main.ts
    • package.json：一些命令、依赖等
    • tsconfig.json：TS配置文件
    • vite.config.ts：Vite配置文件

Vite基于esbuild做编译；基于rollup.js做打包，性能优异。

单文件组件（SFC）

主要由三部分组成：

  • script，写JS代码，setup形式的script在一个SFC中只能存在一个，非setup形式可存在多个
  • template，写HTML标签，在一个SFC中只能存在一个
  • style：写CSS样式

Vue3开发插件

Volar（Vue Language Features和TypeScript Vue Plugin）：Vue3智能提示，使用时需禁用Vue2的Vetur。

npm run dev

终端输入npm run dev命令后进行的全过程：

  1. 收到命令，寻找package.json的scripts，查看对应的命令
  2. npm run dev对应的是vite命令，执行它
    • 直接执行vite命令一般不生效，如果没做过相应配置，只能通过npm run dev执行
    • Vite在package.json中做了一个软链接（到bin），连至bin目录，里面有三个Vite的配置
      • vite：主要给UNIX操作系统使用，通过shell脚本执行对应的vite.js
      • vite.cmd：主要给Windows操作系统使用
      • vite.ps1：跨平台，在各种操作系统都能使用
    • 查找规则：
      1. node_modules/vite寻找bin中可执行的文件，找到则执行，找不到则到2
      2. 去npm全局包找，找到则执行，找不到则到3
      3. 找环境变量，找到则执行，找不到则报错