vue3实战技巧 - Vite和项目结构

vue3脚手架 Vite

Vite-Next Generation Frontend Tooling

• Vite是一个前端的脚手架，支持React/Vue......
• vite是vue作者尤雨溪开发

npm init vite@latest / yarn create vite@latest
'name'
vue
vue-ts
cd 'name'
npm install    /    yarn install
npm run dev

Vite特性：No Bundling

• 基于浏览器支持ES Module【export、import】，不需要bundle【打包】

 

Vite特性：HMR提速

• 原理：基于浏览器的ESM：ES Module【export、import】
• 自研HMR【一种热更新】
• Per文件加载（因此和APP体积无关）

Vite特性：插件体系

• 基于rollup体系，rollup插件经过简单包装就可以在vite中使用
• 丰富的插件生态

Plugins | Vite

项目结构

结构一【所有能力在一个项目中】

• pages【页面】
• components【组件】
• layout【布局组件】
• util【一些函数】
• model【模型：如class Form等】

结构二【多项目架构：如大项目包子项目】【更能够发挥出封装复用的优势】

• packages
  • util
  • component
  • model
  • ui