Vue CLI4项目目录结构分析

最新推荐文章于 2024-04-27 02:38:03 发布
最新推荐文章于 2024-04-27 02:38:03 发布
阅读量418 收藏 1
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hamlet01/article/details/107907940
版权

在这里插入图片描述

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 的时候速度会提升；

Hamlet01
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
4-4 VueCLI项目结构解析
孤注一掷的博客
02-25 317
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-cli入门之项目结构分析
08-30
Vue CLI 的项目结构清晰且易于理解和维护，`src` 目录下是开发的主要区域，而 `build` 和 `config` 则用于配置和构建。通过这个结构，开发者可以专注于编写业务逻辑，而不需要过多关注底层配置，大大提高了开发效率...
Vue2学习笔记2 - vuecli4目录结构说明
Coder.Monkey的工作簿
11-05 421
1.目录结构 在用vue-cli4成功创建项目后，项目目录下就多出来很多文件和文件夹，我们对这些文件和文件夹来进行一个基本的认识。 目录 说明 dist 打包输出目录 node_modules 第三方依赖，我们安装的各种依赖都在个文件件里面，包含vue,vuex,eslint所有的依赖包 public 存放公共资源的地方，里面有一个index.html -- index.html 打包后的入口文件 src 这个是重点，我们的源码以及开发的静态资
Vue 学习笔记（4）Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
2401_84411557的博客
04-27 1037
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue cli4项目结构解析
LV_MING_zg的博客
08-10 641
原来 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 2729
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 目录结构详细讲解总结
10-17
A Vue.js project
记一次用ts+vuecli4重构项目的实现
10-15
在本文中，我们将深入探讨如何使用TypeScript和VueCLI4进行项目重构。首先，我们要明白重构是为了提高代码质量，使其更易于理解和维护。VueCLI4是Vue.js开发的一个强大脚手架，它提供了快速构建项目、自动化配置以及...
vue+cli+ts项目实战.rar
04-02
《Vue+CLI+TS项目实战解析》 Vue.js 是一款流行的前端框架，以其简洁的API和高效的性能赢得了开发者们的喜爱。Vue CLI（命令行界面工具）则是官方提供的一个强大脚手架，它使得构建Vue项目变得简单快捷。在这个...
vue-cli4项目结构整理
qq_44318215的博客
09-09 295
Vue CLI 项目目录结构
ckk727的博客
03-26 202
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 274
问题一：请说出vue-cli工程中每个文件夹和文件的用处vue-cli目录结构：vue-cli目录解析：build 文件夹：用于存放 webpack 相关配置和脚本。开发...
vue.js学习笔记(一)——vue-cli项目的目录结构
cxu123321的博客
06-01 179
vue.js学习笔记(一)——vue-cli项目的目录结构 vue.js是一套构建用户界面的渐进式框架。vue采用自底向上增量开发的设计。vue的核心库只关心视图层，非常容易学习，非常容易与其它库和已有项目整合。vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。 vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 　 总体框架 一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
JZevin的博客
10-15 8520
Vue项目的详细目录结构解析
45. VUE ClI4 创建项目 - （和3差不多） 和 目录结构
Bi-Hu的博客
08-10 99
我的vue版本的4 的 但是很多教程都是讲3 下面讲解下： vue create project-one (这个图是网上随便找的 因为我.....这步跳过了....可以明显发现版本不对) 一般都是手动选一下啊 3也是一样的，那就是最后一个选项了 Manually select features： 第一个 choose Vue version ， vuecli3是没有的，翻译过来是...
vue学习之路（二）vue-cli目录结构分析
qq_44084420的博客
02-28 258
总体结构介绍 详细介绍 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 337
上节咱们搭建好了vue项目，那么这节咱们接着讲解一下，使用cli脚手架工具搭建的vue项目都有那么目录结构 1、先整体看一下 2、从上到下依次来看 首先是build目录 改目录下是打包配置和webpack配置，暂时不用深究,后面用到时咱们再详细说明 3、config目录 改目录下的文件用于配置开发环境和正式环境的域名端口等配置， 4、node-modules目录 该...
vue从入门到精通
10-31
专注提升vue0-5年开发经验在线提升进阶技术！课程均为一线互联网大咖亲自授课，为10年以上开发经验，和多年在线教育行业经验讲师亲授！
upgrade to vue cli 3
最新发布
06-19
Vue CLI 3 是 Vue.js 框架的一个命令行工具，用于快速设置、开发和构建 Vue 项目。如果你想将现有的项目升级到 Vue CLI 3，这是一个基本的步骤： 1. **检查现有项目**：首先，确认你的项目是否使用了 Vue，以及当前使用的版本。如果已经存在 `package.json` 文件并有 `vue` 相关依赖，那就说明可能支持升级。 2. **安装 Vue CLI**：如果你的系统中还没有 Vue CLI 3，可以通过 npm 或 yarn 安装： ``` npm install -g @vue/cli ``` 3. **创建新项目或更新项目模板**：运行 `vue create [project-name]` 命令来初始化一个新的 Vue CLI 3 项目，或者在现有项目目录下执行 `vue upgrade`，它会尝试分析你的项目并指导你进行升级。 4. **迁移配置**：Vue CLI 3 可能会提示你更新配置文件（如 `vue.config.js`），因为它的架构有所改变。注意检查并调整新的配置项，例如构建选项、路由设置等。 5. **转换代码**：Vue CLI 会帮助你转换现有的组件结构和脚本，但可能需要手动处理一些特定的插件或自定义模块。检查并修复任何依赖的库的兼容性问题。 6. **测试和验证**：升级后，务必运行项目，确保所有功能正常工作，没有错误或性能问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值