vue 基于webpack 的项目文件解析，在哪个文件该做什么事情

最新推荐文章于 2023-06-14 16:20:12 发布
原创 最新推荐文章于 2023-06-14 16:20:12 发布 · 630 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 入门 #开门级别

本文介绍了Vue项目的文件结构，包括build构建文件夹、config配置文件夹、src源代码文件夹及eslintrc.js语法检查规则文件等内容，并概述了package.json中项目依赖。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上图是一个vue项目的各个文件， 这里主要讲一下 build、config 、 src、eslintrc.js   package.json  文件


1.首先，build文件



2、配置文件夹




3、写代码的文件




4语法格式规则设置



5项目依赖的包


2024基于webpack从0搭建vue项目，vue2
2401_85124892的博客
05-27 864
),// 自动清除 dist 目录插件// 配置 vue loader 插件],// 配置开启服务器的信息static: {},port: 80,},
webpack简介
专研前端，探索后端
06-01 538
webpack简介： webpack是前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在做vue项目和react项目时都会可能用到，当前最火的前端构建工具之一，把前端各种资源编译打包，最后输出：js文件、css文件、png文件，可以减少文件资源的请求。 编译原理：利用各种处理文件的loader对各种文件进行编译，根据文件后缀处理后输出新的文件，如需了解更多建议阅读相关文档：https://webpack.docschina.org/ 特别强调：we
Springboot入门 5分钟快速搭建Springboot框架
央顺科技官方博客
10-09 715
3分钟快速搭建Springboot框架 如何搭建springboot框架 废话不多说直接开搞 首先打开idea新建 选择Spring Initializr，点击next 选择web springweb 有的是两个web 这个也是一样的 之后项目会自己下载一些依赖 项目页面 ok 我们现在启动项目 这是项目成功启动后的样子 这时我们打开浏览器 输入http://localhost:8080 在输入localhost:8080之后 显示页面404 代表已经成功了 因为我们项目还没有放入页面
webpack究竟做了什么
Lachesis_的博客
01-15 495
今时今日，做前端不用个webpack好像都被时代抛弃了一样，每天开发的时候npm run dev，该上线了npm run build，反正执行个命令刷刷地就打包好了，你根本无需知道执行命令之后整个过程究竟干了什么。webpack就像个黑盒，你得小心翼翼遵循它的配置行事，配好了就万幸。这使得我很长一段时间以来，都对webpack毕恭毕敬，能跑起来的代码就是最好的代码，千万别乱动配置。 终于有一天，我忍不住要搞清楚webpack究竟做了什么。 我们为什么需要webpack 去搞清楚webpack做了什么之前
常见的WebPack文件、什么是WebPack
weixin_34006965的博客
09-18 181
为什么80%的码农都做不了架构师？>>> ...
package.json与package-lock.json
weixin_45626517的博客
02-09 2万+
package.json 记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）,不能锁定后面的小版本， package-lock.json package-lock.json 是在 `npm install`时候生成一份文件。记录了node_modules目录下所有模块（包）的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。 两者区别： npm5以前 npm5以前，没有package-lock.jso...
Vue项目中各个文件夹意思
m0_67351783的博客
06-14 819
vue项目简介
基于webpack搭建vue2.0的脚手架项目
10-11
本篇文章将深入探讨如何基于Webpack搭建Vue 2.0的脚手架项目。 首先，让我们理解Vue 2.0的核心特性。Vue 2.0引入了虚拟DOM，提高了性能并降低了内存消耗。它支持单文件组件（Single File Components, SFCs），使得...
若依vue3,基于webpack(非vite版本)
最新发布
01-02
3. **Vue.js与Webpack的结合**：Vue CLI是官方提供的脚手架工具，它可以快速搭建基于Webpack的Vue项目。Vue单文件组件（.vue文件）结构清晰，包含了HTML、CSS和JS代码，Webpack能够很好地处理这种结构，通过vue-...
创建基于Webpack的Vue.js项目
逆境清醒的博客
03-19 6002
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目 1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。 3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
webpack4配置教程
Web前端开发工程师
09-26 321
webpack快速入门教程 1、了解Webpack相关 什么是webpack Webpack是一种前端资源构建工具，一个静态模块打包器(bundler)。 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源 五个核心概念 Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 Output：output 属性告诉 webp
vue学习的第三天——聊聊vuecli的文件夹
m0_57069925的博客
05-31 877
vue学习第三天，要是会可以跳过哟
vue-cli的webpack模板项目配置文件分析
热门推荐
hongchh的博客
02-14 7万+
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发（dev）和构建（build）两个过程涉及到的文件，故下面文件结构仅列出相应的内容。├─build │ ├─build.js │ ├─ch
webpack介绍及使用
Grapefruit_____的博客
10-17 462
webpack的概念: webpack是一个现代js应用程序的静态模块打包器。 理解webpack的四个核心概念: 入口(entry):webpack以哪个文件为入口,来作为构建内部依赖图的开始。 输出(output)：会创建一个文件夹,默认值是./dist,告诉webpack在什么地方输出创建的bundles 1.output.filename //出口文件名称 2.output.path //路径 loader:让webpack可以处理那些非js的文件...
webpack打包vue项目之后怎么启动&注意事项
lotte
08-16 1万+
前端代码没有服务器可以部署到 express 服务器上运行 1.执行：npm run build 打包后生成dist文件夹 2. 安装express-generator生成器 执行  $ npm install express-generator -g  进行安装 3. 创建一个express项目 执行  $ express expressDemo （expressDemo是项目名...
vue项目配合Javaweb实现用户增删改查文件的功能
qq_37828633的博客
06-27 2762
javaweb文件操作参照   https://blog.youkuaiyun.com/shafatutu/article/details/51428066根据项目需求修改部分代码服务器硬盘中需要分别保存不同状态的项目申请书，所以需要创建文件夹java servlet代码        // 中文处理        upload.setHeaderEncoding("UTF-8");         // 构...
我对webpack打包vue文件过程的一些理解（图）
KangTongShun的博客
08-30 1146
这是我对webpack打包vue文件的一些理解 ， 还望指正
Vue --（vue-cli脚手架）webpack配置文件详细分析
凉凉的博客
04-16 2234
1、脚手架版本 vue-cli 2.8.1 2、配置文件 package.json 功能：在 package.json 中，可以找到开发和生产环境的入口 "scripts": { "dev": "node build/dev-server.js", // 开发环境入口 "build": "node b
Vue项目文件代码介绍
weixin_40905960的博客
05-20 4122
在编译器里打开项目文件从下到上介绍起：最外层文件README.md => 项目说明文件package.json => 第三方模块依赖package-lock.json => package的一个锁文件，确定安装的第三方模块的版本LICENSE => 开源协议的说明index.html => 项目默认的首页模板文件postcssrc.js => 对postcss的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值