Vue3 工程化项目使用详解

逆风飞翔的小叔

大数据领域新星创作者

2025-01-13 08:22:18

https://blog.csdn.net/congge_study/article/details/145089960

...全文

57 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的，其实不是。因为vue在工程化开发的时候很依赖webpack，而webpack是将所有的资源整合到一块，弄成一个单页面。但是vue不止可以做单页面，它还可以做多页面，如果要做多页面的话需要对他的依赖，也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。 vue的开发有两种，一种是直接的在script标签里引入vue.js文件即可，这样子引入的话个人感觉做小型的多页面会比较舒坦，一旦做大型一点的项目，还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解

编辑器另外一个很重要的功能就是代码格式化了，VS Code默认提供常见文件的格式化，如.js,.html等。添加对.vue文件的格式化支持这里我们添加对 .vue 文件的格式化支持。 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则： { vetur.format.defaultFormatter: { html: prettier, css: prettier, postcss: prettier, scss: prettier, less: prettier,

前言伴随着vue的全球化，已经各种vue的组件框架越来越完善，从早期的element-ui到vux，iview等越来越多高质量的项目，使用vue进行前端构建已然是一件工程化，模块化，敏捷化的事情在这其中，相信很多人都会选择官方的vue-cli初始化工程模板，然后通过引入第三方组件框架和工具的方式进行开发构建，我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的，在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章，但是很多不是版本太老就是不严谨本文希望能在耗时优化与构建性能提升之间做一个平衡，即花最少的时间，对官方模板做最少的修改

VUE3 工程化项目使用详解

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。Webpack 可以做到按需加载。遍历源文件 > 匹配规则 > 打包这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。

287,133

社区成员

739

社区内容

发帖

与我相关

我的任务

python 个人社区广东省·深圳市

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章