Vue CLI4项目目录结构分析

最新推荐文章于 2024-04-27 02:38:03 发布

原创最新推荐文章于 2024-04-27 02:38:03 发布 · 501 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了前端项目中常见目录的作用，如node_modules存放npm安装的包，public用于存放静态资源，src存放源代码等，同时解释了.gitignore、babel.config.js、package.json和package-lock.json等文件的功能。

在这里插入图片描述

1.node_modules：存放通过npm安装的包

2.public：相当于之前版本的static文件夹,存放静态资源，
并且此包下存放的文件，打包后原封不动复制到dist文件夹下

3.src：存放源代码

4…gitignore：可忽略的文件(告诉Git哪些文件不需要添加到版本管理中)

5.babel.config.js：babel工具的配置文件

6.package.json：存放第三方插件依赖配置

7.package-lock.json：保存 node_modules 中所有包的信息（版本、下载地址），
重新 npm install 的时候速度会提升；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hamlet01

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

4-4 VueCLI项目结构解析

孤注一掷的博客

02-25

412

web文件夹即是整个Vue CLI项目 node_modules：存放项目依赖的js模块，类似于maven的jar包，这个文件夹不需要提交git管理。 public： assets：静态资源 components：组件 router：路由 store：全局数据存储 view：页面，对于router路由 App.vue：初始内容页面 main.ts：初始启动（配置）文件看到#app，想到选择器，肯定有个div id=“app”，写在index.html里。 Vue CL..

【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析

热门推荐

JZevin的博客

10-15

1万+

Vue项目的详细目录结构解析

参与评论您还未登录，请先登录后发表或查看评论

Vue2学习笔记2 - vuecli4目录结构说明

Coder.Monkey的工作簿

11-05

534

1.目录结构在用vue-cli4成功创建项目后，项目目录下就多出来很多文件和文件夹，我们对这些文件和文件夹来进行一个基本的认识。目录说明 dist 打包输出目录 node_modules 第三方依赖，我们安装的各种依赖都在个文件件里面，包含vue,vuex,eslint所有的依赖包 public 存放公共资源的地方，里面有一个index.html -- index.html 打包后的入口文件 src 这个是重点，我们的源码以及开发的静态资

Vue cli4项目结构解析

LV_MING_zg的博客

08-10

728

原来 vue 这么简单！！！安装Vue脚手架在主命令窗口指令：npm install -g @vue/cli 并检查是否安装成功：vue --version 运行效果：创建项目(基于Vue CLI4) 1.输入指令：vue create hello-world（项目名称） 2.选择default(babel,eslint)，使用默认安装运行效果：启动项目：输入命令：npm run serve 运行效果 Vue cli4项目结构文件说明： node_modules:第三方依赖 pub

Vue-Cli 4.x目录结构学习总结

最强菜鸟

07-15

2996

Vue-Cli 4.x目录结构学习总结说明一、目录结构二、项目执行顺序详解（1）main.js（2）App.vue三、总结说明更新时间：2020/7/15 10:52，更新了整体内容 Vue-Cli个人感觉对新手并不友好，本人在学习的过程的真的学得一脸懵逼，尤其是它的目录结构，现在在此做个学习记录。本文会持续更新，不断地扩充本文仅为记录学习轨迹，如有侵权,联系删除一、目录结构这里直接给出Vue-Cli 4.x的目录结构，为什么要强调4.x，因为它的目录结构跟3或者2还是有些区别，下面可以具体看一下

vue-cli入门之项目结构分析

08-30

Vue CLI 的项目结构清晰且易于理解和维护，`src` 目录下是开发的主要区域，而 `build` 和 `config` 则用于配置和构建。通过这个结构，开发者可以专注于编写业务逻辑，而不需要过多关注底层配置，大大提高了开发效率...

vue-cli 目录结构详细讲解总结

10-17

A Vue.js project

vue-cli2的目录结构解析

lzc2644481789的博客

08-05

1925

一、简介 1. 本文主要介绍vue cli2自动生成的项目结构的解析；二、项目结构 1. 上图是项目的整体目录结构。我们读这个项目结构的时侯要先从package.json开始读，首先是看package.json中的scripts中的build，可以看出来它是执行 node build/build.js， node是可以直接执行文件的。所以我们去看看build.js。这里介绍一下，package.json...

记一次用ts+vuecli4重构项目的实现

10-15

在本文中，我们将深入探讨如何使用TypeScript和VueCLI4进行项目重构。首先，我们要明白重构是为了提高代码质量，使其更易于理解和维护。VueCLI4是Vue.js开发的一个强大脚手架，它提供了快速构建项目、自动化配置以及...

Vue 学习笔记（4）Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署

最新发布

2401_84411557的博客

04-27

1196

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

vue-cli4项目结构整理

qq_44318215的博客

09-09

362

Vue CLI 项目目录结构

ckk727的博客

03-26

261

npm install -g @vue/cli //安装CLI npm install -g @vue/cli-init //安装桥接工具，拉取CLI旧版本 vue init webpack myproject //vue2.x版本初始化项目 vue create myproject //vue3.x以上版本初始化项目 Vue2.x初始化项目过程： vue init webpack v...

vue-cli 工程目录结构详介绍

frontend_frank的博客

10-03

348

问题一：请说出vue-cli工程中每个文件夹和文件的用处vue-cli目录结构：vue-cli目录解析：build 文件夹：用于存放 webpack 相关配置和脚本。开发...

vue.js学习笔记(一)——vue-cli项目的目录结构

cxu123321的博客

06-01

213

vue.js学习笔记(一)——vue-cli项目的目录结构 vue.js是一套构建用户界面的渐进式框架。vue采用自底向上增量开发的设计。vue的核心库只关心视图层，非常容易学习，非常容易与其它库和已有项目整合。vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。 vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。　总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解

45. VUE ClI4 创建项目 - （和3差不多）和目录结构

Bi-Hu的博客

08-10

148

我的vue版本的4 的但是很多教程都是讲3 下面讲解下： vue create project-one (这个图是网上随便找的因为我.....这步跳过了....可以明显发现版本不对) 一般都是手动选一下啊 3也是一样的，那就是最后一个选项了 Manually select features：第一个 choose Vue version ， vuecli3是没有的，翻译过来是...

vue学习之路（二）vue-cli目录结构分析

qq_44084420的博客

02-28

369

总体结构介绍详细介绍 1.build文件夹（webpack配置） build文件夹里面最主要是的webpack的相关配置文件，在新一代的vue-cli中，没有dev-server.js文件，因为它被与集成到开发环境配置文件里面了，当我们输入npm run dev启动项目的时候，最先就会启动dev-server，它会检查npm以及node版本，加载配置文件，启动服务。 2.config文件夹（vue项目配置） config文件夹里面的文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输

vue项目搭建连载教程+全家桶详解----第三节：vue-cli 项目结构目录介绍

前端~锋小张

10-30

404

上节咱们搭建好了vue项目，那么这节咱们接着讲解一下，使用cli脚手架工具搭建的vue项目都有那么目录结构 1、先整体看一下 2、从上到下依次来看首先是build目录改目录下是打包配置和webpack配置，暂时不用深究,后面用到时咱们再详细说明 3、config目录改目录下的文件用于配置开发环境和正式环境的域名端口等配置， 4、node-modules目录该...

vue从入门到精通

10-31

专注提升vue0-5年开发经验在线提升进阶技术！课程均为一线互联网大咖亲自授课，为10年以上开发经验，和多年在线教育行业经验讲师亲授！