小慕读书管理后台开发项目-2.前端框架搭建
1.前端框架下载和启动
在vue-vben-admin官方仓库中克隆代码到本地磁盘
然后安装依赖
1 | |
2.vben三种运行模式
2.1 npm run serve
很常见的运行方式，实际上就是调用vite运行
2.2 preview模式
"preview:" npm run build && vite preview 会先构建然后用vite进行preview.在开发模式下会很慢，但通常用在生产环境
2.3
npm run build:analyze 可以对构建包的大小进行分析
3.vben项目发布的方式
若项目发布在非根目录的域名下，则需要在vite config中编辑。如：localhost/vben/
vben在vite config文件中做了一些封裝，也即写进了vite-config依赖中
package依赖里面的workspace版本号为pnpm的特殊写法，表明了这个项目的依赖需要在本地的workspace中查找，不在网络上下载。也即在interal/vite-config中会有这个依赖
跟踪配置函数的源文件，找到了如下图的代码。我们接着跟进application文件中
即可看见UserConfig interface，关键的就是base字段。
设置值为/vben启动后则可以在控制台看出前后的区别
4.vben esmodule 特性支持
vben使用了module特性加载资源文件
深入来说，在一个index.html使用import语句引入一个js脚本会报错
index.html
test.js：
如果加上type=module则能正常运行
这也是vite快速启动的原因，没有对文件进行编译。只有在对资源进行访问时才拦截然后处理相应资源，例如App.vue会在运行时才被构建编译
4.1 vitejs/plugin-vue深入
该插件的核心用途就是在应用启动后将vue文件进行编译。使用时直接调用即可
Vite在启动时仅仅生成了配置文件，然后在运行过程中才对Vue文件进行编译
想了解程序流程，可以在开发模式下在vue()函数调用处断点然后调试。
4.1 Vite-vue插件原理解析
在defineApplicationConfig函数处下断点后跟进程序到CreatePlugins
CreatePlugin出即可看见Vue()方法的调用
首先也可以看一下VitePlugin的工作流程