前端框架Vue（4）——vue-cli 目录结构

最新推荐文章于 2025-10-03 15:20:57 发布
原创 最新推荐文章于 2025-10-03 15:20:57 发布 · 5.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue目录结构

本文详细介绍了Vue CLI创建的项目的基本目录结构及其各部分的功能。涵盖了从项目构建到前端资源管理的所有关键文件夹和文件，如build、config、dist等，并解释了src目录下各个子目录的作用。

1、vue-cli 项目结构图

这里写图片描述

2、目录分析

目录/文件说明
bulid项目构建的一些 js 文件
config配置文件项，index.js 比较重要，打包上线需要修改配置
dist项目打包后的文件
node_modules npm安装包位置
src 项目的开发目录
  • assets:图片、字体等资源
  • components:公共组件部分
  • config:开发分支和生产分支的切换配置，以及 fetch.js 对于前后台数据交互的封装
  • plugin:第三方插件
  • views:页面部分
  • server:ajax、axios等请求数据集中处理
  • router：路由
  • store：状态管理
  • App.vue:项目入口文件，我们也可以直接将组建写这里，而不使用 components 目录
  • main.js:项目的核心文件
index.htmlhtml文件
test测试项目，可删除
package.json项目配置项文件
Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
CYK_byte的博客
10-18 3440
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 5523
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
vue-cli目录结构
^_^
06-04 710
├── node_modules # 安装的包 ├── public # 静态资源 │ ├── favicon.ico │ └── index.html └── src ├── api # 请求接口封装模块 ├── assets # 资源目录 ├── components # 组件目录 ├── router # 路由模块 ├── store # Vuex容器模块 ..
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
最新发布
yang20060116的博客
10-03 835
vue是一个前端javascript框架,对javascript进行封装.vue.js和 Angular.js、React.js 一起，并成为前端三大主流框架vue.cli 是vue脚手架传统的项目结构.每个页面就是一个独立的html文件,如果页面中需要依赖js/css文件, 那么我们就需要在每个html文件中导入所需的依赖的,这就很麻烦.现在前开发都采用单页结构,一个项目中只有一个html文件其他不同的内容,都写在.vue文件中,每个vue文件就是一个组件,
vue-cli 项目的目录结构
tq040626的博客
07-03 388
8、src->main.js:项目入口文件，整个项目的运行，要先执行。6、src->assets:图片，第三方的静态资源,css,样式表。7、src->components:程序员封装的、可复用的组件。9、src->App.vue:项目的根组件。5、babel.config.js:babel配置文件。4、package.js:第三方包的配置文件。1、node_modules：第三方包。2、src:项目源代码目录。3、public:存放页面。
【Vue】Vue-cli(脚手架)的目录结构详解（转载）
【敦厚的曹操】的专栏
03-24 7757
一、图简单说明下各个目录都是干嘛的： 　　总体框架：一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 四、文件结构细分 　　1、build——[webpack配置] 　　build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。 　　2、config——[
Vue项目的详细目录结构解析
小赵的博客
05-13 5167
在创建项目时，如果你选择把依赖的配置信息以独立文件形式存放，那么你的项目内，和package.json文件同级的，就还会有比如.browserslistrc， .eslintrc， babel.config.js， jest.config.js， tsconfig.json等独立配置文件。而我们现在使用的Vue.js等框架开发的项目，并不能为浏览器所识别，所以就需要编译打包这一步操作，来转换成实际生产环境（浏览器）所需的文件。这个也没什么好说的，也就是罗列一下，之后Git上传时，需要忽略的文件。
Vue2基础（6）——vue-cli、element-ui、axios拦截器、proxy接口代理
SongD1114的博客
04-09 1993
Vue2基础vue-cli、element-ui、axios拦截器、proxy接口代理
Vue开发基于vue-cli搭建的仿TIM纯前端页面.zip
05-20
3. **插件系统**：vue-cli支持安装和使用社区维护的插件，如`vue-cli-plugin-vue-router`用于添加Vue Router，`vue-cli-plugin-element`用于集成Element UI库。 4. **脚手架生成器**：通过`vue generate`命令，可以...
vue第三天笔记06——vue-cli练习
08-21
在实际开发中，Vue CLI 的配置文件 `.vue-cli-service/globalOptions.js` 和 `vue.config.js` 可以用来定制化项目的构建设置，如更改输出目录、配置代理等。`.gitignore` 文件则可以帮助你在版本控制中忽略不必要的...
使用VueCLI轻松启动chrome扩展项目
08-13
在IT行业中，Vue.js是一个非常流行的前端框架，它以其易用性和灵活性著称。Vue CLI（命令行界面）是Vue.js官方提供的一款工具，用于快速搭建应用基础结构，极大地提高了开发效率。本篇文章将深入探讨如何使用Vue CLI...
vue-cli 4.0 带vue.config.js的完整目录
weixin_41894940的博客
04-17 2580
求大佬给一个带vue-cli4.0 带 vue.config.js完整目录，网上搜了很多也配置了很多，但是配置都没生效
vue-cli4.x框架快速搭建
小毛病的博客
04-30 416
如何使用【vue】快速搭建一个框架 前言 最近公司项目做完了，爱学习的鄙人来学习点新东西 实在是手痒，就把vue小小的升级了一下 顺带的了解下vue的新框架 一、本地环境 首先我们先升级下自己的本地环境，如有已经升级的小伙伴就不需要了 1.关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 如果小伙伴已经全局安装了旧版本的 vue-cli (1.x 或 2.x)可以...
vue4
shenzhen_zsw的专栏
07-22 494
vue4
vue
weixin_44954172的博客
09-24 346
vue 什么vue？ 它是一套用于构建用户界面的渐进式框架，采用MVVM思想，Vue 的核心库只关注视图层，Vue也完全能够为复杂的单页应用提供驱动。 安装vue 下载地址 起步 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view...
vue-4
qq_40589140的博客
10-08 1651
style的默认样式是作用到哪里的？scoped的作用是什么？style中推不推荐加scoped？data写成函数的目的是什么？组件通信，就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问其他组件的数据。想使用其他组件的数据，就需要组件通信组件关系分类有哪两种父子组件通信的流程是什么？父向子子向父组件上 注册的一些 自定义属性1.非父子组件传值借助什么？2.什么是事件总线3.发送方应该调用事件总线的哪个方法4.接收方应该调用事件总线的哪个方法。
Vue-4
tingless的博客
09-23 851
webpack webpack是一个模块化的打包工具， 而且，项目复杂用webpack更加合适。 使用方法： 一般项目中会放2个文件，一个dist用于发布，放到服务器的文件，一个是src是源码。 然后src会放一个js入口文件，名字通常是mian.js或者index.js。 步骤1：在src创建一个js文件，用作专门的某类用途，并且输出（这里是commonjs的方法） function add(num1, num2) { return num1+num2 } module.exports = {
VUE 4
weixin_37215881的博客
04-10 1423
4.1vue组件使用的细节点 （1）子组件数据data要定义成一个函数 （2）采用ref引用的方式操作DOM（不是组件上） （3）采用ref引用（组件上） 4.2父子组件的数据传递（注意：子组件不能修改父组件传递过来的数据（单向数据流））可以自定义一个变量（复制的）放父组件传过来的值就可以修改父组件传过来的数据了。 （1）父传子 （2）子传父 4.3组件参数校验与非props特性 （1...
vue.4
2303_77164348的博客
03-31 449
1.容器 ，app容器名称**，注：容器名称尽量使用id绑定唯一值**3. el绑定容器（还可以使用$.mount()绑定容器）2.{{}}插值语法(Vue使用语法)引入成功后可以先测试引入是否成功。methods处理的函数方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值