vue-cli项目目录文件的基本简介

最新推荐文章于 2024-12-24 10:59:59 发布
最新推荐文章于 2024-12-24 10:59:59 发布
阅读量592 收藏
点赞数
分类专栏： # Vue 文章标签： vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gong_01/article/details/122769223
版权
本文详细解读了项目文件结构，涉及node_modules、public、src、assets、components等关键区域，以及main.js、babel.config.js和package.json等核心配置。从前端的Vue、React、Angular到后端的PHP、Python，全面展示开发流程。
摘要由CSDN通过智能技术生成

node_modules文件夹：放置项目依赖的地方

public文件夹：一般放置一些共用的静态资源，打包上线的时候，webpack会将public文件夹里面资源原封不动打包到dist文件夹里面

src文件夹：程序员源代码文件夹

-----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块，放在js文件夹里

-----components文件夹：一般放置非路由组件（或者项目共用的组件）

-----App.vue文件：唯一的根组件

main.js文件：入口文件（程序最先执行的文件）

babel.config.js文件：babel配置文件

package.json文件：项目描述、项目依赖、项目运行指令

README.md文件：项目说明文件

vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： ...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
通过上述步骤，我们就能够使用Webpack 4和Vue搭建一个基本的Vue-cli项目，并对项目的构建过程有所了解。在实际开发中，对于更复杂的需求，比如代码分割、热模块替换等，Webpack提供了丰富的插件和工具来支持。只有...
在vue-cli3.0中自定css、js和图片的打包路径
cradle2006的专栏
08-28 1245
前言 我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有** assetsDir**配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！ 分析 众所周知，vue-cli3.0使用了webpack进行打包处理，那么我们是否可以拿到目前打包默认的一些webp...
VueCli 目录概述
qq_50648993的博客
04-17 757
VueCli 目录概述 当安装完成后，大概样子就是这样（安装不同的依赖插件会有不同的样子，大概样子和这个差不多） 其中第一个包node_modules是存放了各种包，包管理器，不用去修改 public文件夹的静态资源都会被简单的复制，而不经过webpack，一般也不在这其中修改，public 目录提供的是一种应急手段。 一般项目的更改就是在src种更改 assets ：一般存放一些静态文件，如图片，iconfont等等 components：在这其中写组件，一般为通用组件，就是原生中的template
（68）Vue-cli 目录与文件
Java田根旺
02-16 661
一、文件目录介绍 二、单文件组件 单文件组件可以将组件的功能统一保存在以 .vue 为扩展名的文件中。 三、HelloWorld.vue文件 该文件是一个组件文件，文件中有三个标签，<template>标签代表我们之前书写的template选项，我们知道我们之前书写起来很不方便，但是我们通过这种标签的方式书写，写起来更容易啦！ <script>标签用于导出组件，供我们的App.vue根组件进行使用。 <style>标签可以书写样式代码，这里面可以通过lan
vue-cli目录结构
weixin_40293877的博客
04-22 172
1.assets--资源目录，例：css文件，img文件 2.common--公共js文件 3.components--公共组件 3.1.common--此项目能用得上，以后项目也用得上的组件 3.2.content--这个项目能用得上的公共组件，业务相关组件 4.network--网络相关代码 5.router--路由相关代码 6.store--vuex相关代码 7.views--视图层代码 ...
【Vue】Vue-cli(脚手架)的目录结构详解（转载）
【敦厚的曹操】的专栏
03-24 7345
一、图简单说明下各个目录都是干嘛的： 　　总体框架：一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 四、文件结构细分 　　1、build——[webpack配置] 　　build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。 　　2、config——[
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
安装Vue CLI2的命令通常是`npm install vue-cli@版本号`或者简写为`npm install vue-cli -g`，但如果想实现局部安装，也就是只在当前项目目录中安装，就需要省略掉`-g`参数。局部安装后，会在当前文件夹下生成`node_...
vue-cli开发的商城源代码
01-18
在创建项目时，vue-cli会生成一个基本的目录结构，包括src目录（存放源代码）、public目录（存放静态资源）、node_modules（依赖库）、package.json（项目配置文件）等。 在"mall-vue-master"这个项目中，我们可能...
详解vue-cli 2.0配置文件(小结)
10-17
在 Vue-cli 2.0 中，package.json 文件是必不可少的，它提供了项目的基本信息和依赖关系。 在 package.json 文件中，我们可以看到以下几个重要的部分： * name：项目的名称。 * version：项目的版本号。 * ...
vue cli 的文件目录入门
sky_666_leo的博客
03-27 950
1.Vue-cli 使用旅程 先安装# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev2.看看build文件夹的文件...
vue-cli项目构建目录介绍
筑释科长的博客
11-09 376
一：用vue-cli正确构建一个项目的目录如下： 二：目录介绍如下： 2.1：一级目录/文件介绍如下： build文件夹: 用于存放  webpack 相关配置文件 config文件夹: 用于存放  vue基本配置文件 node_modules文件夹:  用于存放  npm install 安装的依赖代码库 src文件夹: 主要用于存放  我们开发的代码。 staic文件夹:  ...
vue-cli目录结构解析
Java_53的博客
05-27 662
vue-cil项目目录结构 dist (由"npm run build"打包后生成,真正挂载到服务器的前端所有代码) node_modules (第三方包目录,安装第三方包时生成) public (公共资源目录) static (静态资源) img (图片) XX.jpg (jpg图片) XX.png (png图片) index.html (首页文件) src (源文件目录) assets (资源库) icons (图像) lightbox (灯箱) overlays (叠加
Vue项目的详细目录结构解析 vue-cli
weixin_49827467的博客
02-15 1982
vue-cli 目录详解
vue cli3目录介绍
最新发布
shadouqi的博客
12-24 408
├── public // 该文件夹可以用来存放静态资源，存放在该文件夹的东西不会被打包影响.类似2.x版本的static│ ├──favicon.ico // favicon图标│ └──index.html // html模板├── src // 源代码│ ├── api // 接口请求定义。
vue-cli 目录结构详细讲解
weixin_30718391的博客
07-23 193
https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解 目录 结构预览 ├─build // 保存一些webpack的初始化配置,项目构建 │ ├─build.js // 生产环境构建 │ ├─check-version.js // 检查...
Vue CLI脚手架项目目录详解
drhnb的博客
07-07 1107
当用npm run serve启动项目时，首先会运行入口程序main.js 1、main.js会引入并加载根组件App.vue 2、注册：注册分为局部注册和全局注册,可以将components下的普通组件在App.vue中进行引入和局部注册，或在main.js中进行引入和全局注册 3、main.js 将加载的App.vue挂载到 public/index.html 中定义的容器元素上
vue cli入口文件解析
Martian的博客
10-17 733
1.入口文件的概述。 在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂在到index.html中id为'app'的节点上。 如图，main.js，app.vue，index.html文件的结构如下图所示： 各个文件的作用： 一.main.js，程序入口文件，初始化vue实例并使用需要的插件； 二.app.vue...
vue学习的第三天——聊聊vuecli的文件夹
m0_57069925的博客
05-31 863
vue学习第三天，要是会可以跳过哟
使用vue-cli3离线创建Vue项目的Webpack基础文件
这个文件与Vue.js框架紧密相关，特别是通过vue-cli工具在离线环境下创建项目时所需的基本文件集合。 首先，需要了解的是Vue.js，它是一个渐进式JavaScript框架，用于构建用户界面。Vue的设计目标是通过尽可能简单的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值