Vue3/ Vue-cli底层是什么 为什么看不见 webpack.config.js文件 、Vue3组合式API(composition Api vs options Api)

最新推荐文章于 2023-10-02 08:10:19 发布
最新推荐文章于 2023-10-02 08:10:19 发布
阅读量818 收藏
点赞数
文章标签： vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64494670/article/details/128572703
版权

一.  Vue-cli底层是什么 为什么看不见 webpack.config.js文件 

  • Vue2项目依赖于 Vue-cli脚手架创建 这个脚手架底层又是依赖webpack 而webpack开发项目又是需要自己配置loader plugin等等参数 但是项目里面没有 webpack.config.js 文件 只有vue.config.js文件 因为vue-cli脚手架给我吧webpack封装起来了

  •  如果硬是要看webpack的配置文件 在vue-cli的项目 直接输入

vue inspect

可以查看Vue.config.js编辑为 webpack.config.js 文件以后的内容

二.Vue3组合式API(composition Api vs options Api)

1.Vue2采用的就是optionsApi

(1) 优点: 每个代码明确位置 (data中 方法放在methods中)

(2) 缺点: 相似的逻辑 不容易复用 在大项目中尤为明显

(3) 虽然 optionsApi可以通过 mixins 提取相同的逻辑 但是并不是特别好维护

2.Vue3的新增的就是 compositionApi

(1) compositionApi 是基于逻辑功能 组织代码的 一个功能api相关放在一起 

(2) 即时项目大了 功能多了 也能快速定位功能相关的api

(3) 大大的提升了 代码的可读性 和 可维护性

3. Vue3推荐使用 compositionApi 同时保留了 options Api

就算不用 compositionApi 用vue2 的写法也完全兼容


 

春暖花开.,
关注
没有webpack.config.js如何配置less ？？
01-08
首先我们最新创建的项目；无论是vue或者react项目，你都找不到webpack.config.js，甚至没有原来的build文件夹，那我们如何配置less或者jq这种插件呢？接下来进入正题 配置less 1.安装less less-loader  打开我们的项目目录，打开CMD终端，安装命令如下 yarn add less less-loader 或者 npm install less less-loader 2.git commit一下 git add . git commit -m 'xx' 3. yarn eject生成config目录及你想要的webpack.config.js 在
Vue 创建项目后没有 webpack.config.js（vue.config.js） 文件
卡尔特斯
11-09 2万+
Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。 vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。 开发者一般不需要再去知道 weboack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。 手动创建一个 vue..
【Vue】项目中没有webpack.config.js
qq_36651752的博客
08-01 5482
Vue新搭建脚手架工程，发现项目结构中没有webpack.config.js(打包配置文件)； 在Vue-CLI3的项目中，起相同作用的文件是vue.config.js。 更多使用相关请参照官网文档：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE 此文章本人原创，如有问题底部留言，如有转载请标明出处。 －－HurryChen Happy C.
如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件
青春木鱼的博客
07-24 6115
这篇文章主要介绍了Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决，具有很好的参考价值，希望对大家有所帮助
没有webpack.config.js如何配置less吗 安装配置less必看
别把代码当饭吃
02-14 3134
首先我们最新创建的项目；无论是vue或者react项目，你都找不到webpack.config.js，甚至没有原来的build文件夹，那我们如何配置less或者jq这种插件呢？接下来进入正题 配置less 1.安装less less-loader yarn add less less-loader 或者 npm install less less-loader 2.git commi...
Vue-cli3项目配置Vue.config.js实战记录
10-18
相比之前的版本，Vue CLI 3 在项目结构上进行了简化，不再包含 `build` 和 `config` 文件夹，而是将大部分配置集中到了 `vue.config.js` 文件中。这个文件位于项目的根目录下，允许开发者自定义 Webpack 配置，以...
详解如何配置vue-cli3.0的vue.config.js
10-18
Vue CLI 3.0的项目不再拥有传统的build目录和那些webpack配置文件，如webpack.base.config.js、webpack.dev.config.js和webpack.prod.config.js。取而代之的是，它基于webpack4，并且遵循了"0配置"的设计理念。在...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
6. 修改webpack.config.js文件，引入mode配置以及添加vue-loader相关配置，包括使用vue-loader插件处理vue文件中的、、等部分。 7. 最后，在package.json文件中添加构建脚本"build":"webpack --config webpack....
vue3-element-plus-webpack5:一个使用webpack5.x的基于vue3.x的element-plus脚手架项目（无vue-cli-service）。 看
03-05
一个使用element-plus框架，基于Vue3.x，使用webpack5.x构建（无vue-cli-service，刹车于扩展插件）的脚手架项目。 参见： : 一个使用webpack5.x的基于vue3.x的element-plus脚手架项目（无vue-cli-service）。 ...
vue-cli3中vue.config.js配置教程详解
10-16
`vue.config.js` 是 Vue CLI 3 的配置文件，位于项目的根目录下。当需要覆盖默认的 Webpack 配置时，我们可以通过这个文件进行自定义设置。以下是一些常见的配置项及其作用： 1. **publicPath**: 这个配置项用于...
webpack教程之webpack.config.js配置文件
12-09
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件。执行如下命令 npm install html-webpack-plugin --save-dev 在项目app目录下建立component.js文件,写入如下代码 export default (text='hello world')=>{ const element=document.createElement('div'); element[removed]=text; return element; } 在根目录下创建webpack.confi
webpack.config.js配置文件
06-19
最近刚学的webpack3.0，从零到一套相对比较齐全的配置
Vue vue-config.js（字段属性详细介绍）
卡尔特斯
11-09 2050
通过官方文档 vue-cli 进行的总结 module.exports={ // 部署应用包时的基本url。 // baseUrl:"/", //从 Vue CLI 3.3 起已弃用 publicPath:"/"， // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。 // 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.
React脚手架中找不到webpack.config.js配置文件
duansamve的博客
07-09 3903
create-react-app脚手架安装好react工程后运行npm run eject，会多出两个目录config和scripts，此时可以在config目录下看到配置文件webpack.config.js
Vue中------webpack.config.js在哪儿
热门推荐
qq_41797053的博客
09-07 3万+
上图是通过Vue init webpack-simple创建的目录，默认没有node-modeules文件，自己下载 上图是vue init webpack 创建的目录，webpack.config.js文件配置到 build=>webpack.base.conf.js文件中，所以没有该文件名称。 网上推荐用中小项目用第一中，大项目用第二种。区别不知道在哪儿，知道的小伙伴望留言...
Vue无法找到Webpack的解决方法
最新发布
2301_79331230的博客
10-02 563
通过执行上述步骤，你应该能够解决Vue无法找到Webpack的问题。如果问题仍然存在，你可以尝试搜索相关的错误信息或者在Vue和Webpack的社区中提问，以获取更多的帮助和支持。确认Webpack是否安装：首先，你需要确认Webpack是否已经正确地安装在你的项目中。安装完成后，确保在Webpack配置文件中正确配置了Vue Loader的加载器规则，如上述示例中所示。请注意，上述示例中的配置是基本的Webpack配置，你需要根据你的项目结构和需求进行相应的调整。命令，并根据你的项目配置进行相应的调整。
为什莫react项目中没有webpack.config.js文件（2021-03-21）
char56789的博客
03-21 4769
当我们使用react的脚手架创建了一个react项目后，一定会有一个疑问，那就是为什么create-react-app创建的项目没有webpack.config.js文件！ 官方文档提示：默认配置文件都是隐藏的，点开package.json文件，可看到配置的命令是以 “react-scripts *” 来执行，所以打开node_modules文件夹，找到react-scripts文件夹进去， config目录即是你需要找的webpack的配置文件。如果要自定义，**运行npm run eject，**就可
webpack.config.js哪里找？react项目关闭eslint监测
Celester_best的博客
02-12 2550
webpack.config.js哪里找？ react项目关闭eslint监测
react项目里添加支持less（无webpack.config.js如何设置
xy_is_fhh的博客
12-06 1231
react项目里添加支持less（无webpack.config.js如何设置
vue-cli3配置完全指南：vue.config.js解析
"本文详细讲述了如何配置vue-cli 3.0的vue.config.js文件，包括vue-cli 3与2的主要区别，以及如何在新的框架下进行个性化配置。文章提供了相关文档链接，并指出vue-cli 3基于webpack 4构建，强调了其‘0配置’的设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值