Vue项目开发目录结构和引用调用关系

最新推荐文章于 2024-04-02 18:46:41 发布
最新推荐文章于 2024-04-02 18:46:41 发布
阅读量457 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xieyuleisss/article/details/108299377
版权

本文精华总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容，而index.html中的Title部分不会被取代，所以会一直保留。

以下就项目文件夹中的各文件的作用进行介绍：

├── build/               # Webpack 配置目录
├── dist/                # build 生成的生产环境下的项目
├── config/               # Vue基本配置文件，可以设置监听端口，打包输出等
├── node_modules/                # 依赖包，通常执行npm i会生成
├── src/                 # 源码目录（开发的项目文件都在此文件中写）
│   ├── assets/            # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js
│   ├── components/        # 公共组件
│   ├── filters/           # 过滤器
│   ├── store/    　　　　 # 状态管理
│   ├── routes/            # 路由，此处配置项目路由
│   ├── services/          # 服务（统一管理 XHR 请求）
│   ├── utils/             # 工具类
│   ├── views/             # 路由页面组件
│   ├── App.vue             # 根组件
│   ├── main.js             # 入口文件
├── index.html         # 主页，打开网页后最先访问的页面
├── static/              # 放置无需经由 Webpack 处理的静态文件，通常放置图片类资源
├── .babelrc             # Babel 转码配置
├── .editorconfig             # 代码格式
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）在上传中需被 Git 忽略的文件（夹）
├── package.json         # 本项目的配置信息，启动方式
├── package-lock.json         # 记录当前状态下实际安装的各个npm package的具体来源和版本号
├── README.md         # 项目说明（很重要，便于其他人看懂）

我们以后用到最多的就是src文件夹，因为我们编写的代码要放在里面。

一开始在学习Vue中，总是理解不清楚各文件之间的逻辑，所以导致自己一直在原地徘徊，在自己尝试了微信小程序的开发之后，大致有了一个模糊的分时，反过头来继续从事Vue项目的开发，结果原来理不清的东西都豁然开朗了。
在根目录下存在index.html文件，在src目录下存在main.js，App.vue以及在router文件夹下存在index.js，搞清楚这几个文件之间的关系将对后续开发理清思路。

index.html—主页，项目入口

index.html为项目访问的首站点，一般我们之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点下，内容都通过vue组件来进行填充。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"
最低0.47元/天 解锁文章
胖就是胖
关注
专栏目录
vue项目中app.vue 、main.js和 index.html的关联
kangkang_style的博客
03-21 1864
1. main.js是入口文件，主要作用是初始化vue实例并使用需要的插件。 2. App.vue是主组件，所有页面都是在App.vue下进行切换的。 3. main.js中的根实例会挂载到index.html中的<div id="app"> 4. index.html文件入口 5. src放置组件和入口文件 6. node_modules为依赖...
前端学习——main.js和App.vue 和 index.html的关系
qq_33453797的博客
12-02 1430
从这里就可以看出，index.html文件和App.vue文件是没有直接关系的，而其之间的关系是通过main.js文件进行关联的，在main.js文件中，实例化vue对象时，使用el也就是标签选择器，把App.vue和index.html的div节点进行关联。这时把index.html文件的id=app 改为了id=app1，这时再看页面，只显示了 我是index.html ，这时就明白了，index.html文件和app.vue是通过id=app这个东西进行关联的。如果有关系，它们是怎么关联的？
main.js, App.vue, index.html关系
a493556721的专栏
08-23 2009
1.main.js import Vue from 'vue' import App from './App' ...... new Vue({ //挂载到index.html的&lt;div id="app"&gt; el: '#app', //router对象，包含路由信息 router, //在该根实例中注册App.vue中的App组件 components:...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
夜飘凌的博客
05-14 8849
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程 文章目录总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程1 vue中index.html、main.js、App.vue、index.js关系简介1.1 项目的运行入口index.html1.2 入口文件main.js1.3 根组件App.vue1.4 控制路由index.js2 Vue项目加载流程 1 vue中index.html
vue引用外部JS的两种种方法
10-15
Vue.js作为一种流行的...在实际开发中，开发者应该根据实际情况选择最合适的引用方式，以确保项目结构清晰、性能最优。对于Vue引用外部JS的详细参考，本文已经进行了详细介绍，相信会给需要的朋友们提供有价值的参考。
基于wps在线编辑、在线预览前端vue项目，基于es6
08-23
在压缩包`wps-view-vue-master`中，我们可以找到以下关键文件和目录： 1. `src`: 项目的源代码目录，包含Vue组件、样式、脚本等。 - `components`: Vue组件的存放地，如用于显示和编辑文档的组件。 - `assets`: ...
Vue启动调用的结构讲解
guoguo_love521的博客
11-23 910
vue调用顺序: index.html → main.js → app.vue → index.js → components/组件 一般项目创建好会有三个文件： index.html、main.js、 app.vue 1.index.html: 所有的vue文件都是单页面形式开发，所有vue组件都是通过index.html进行渲染加载。 2. main.js： 入口函数，控制初次启动vue项目...
vue项目中,main.js,App.vue,index.html的调用方法
01-19
如下所示： 1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 1、index.html文件入口 2、src放置组件和入口文件 3、node_modules为依赖的模块 4、config中配置了路径端口值等 5、build中配置了webpack的基本配置、开发环境配置、生产环境配置等 以上这篇vue项目中,main.js,App.vue,index.html的调用方法就是小编
Vue项目入口文件main.js和App.vue和index.html之间的关系
FurtherSkyQ的博客
04-08 9919
刚开始接触Vue，说实话对Vue的运行逻辑其实不是很清楚，更多的是比较模糊，今天就先记录下Vue项目在初始化时做了做了什么。 1、在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件： index.html---主页，项目入口 App.vue---根组件 main.js---入口文件 那么这几个文件之间的联系如何呢？ 1.先看index.html中的内容：（为了很好的标识各个文件，我对各文件进行了文字标记） 2.在App.vu.
【vue】index.html main.js app.vue index.js怎么结合的？ 怎么打包的？搜集的信息
08-14 310
转载：https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的： 一、启动项目 第一步：cmd进入项目文件里，运行npm run dev 启动项目 这里说明启动端口号是8080 第二步：往页面输入：localhost:8080...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
likunpeng6656201的博客
08-23 3107
先后顺序： index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码 测试的页面代码块： 文件的加载先后顺序： Index.vue的mounted()中的输出没有执行。why？ 每个 Vue 应用都是通过用 Vue 函数创建一个新的 V...
vue项目入门——index.html和App.vue
最新发布
阿常的博客
04-02 2881
讲解vue项目入门——index.html和App.vue这两个文件
vue页面调用关系
weixin_55417005的博客
02-20 159
https://blog.csdn.net/weixin_44012721/article/details/90375993
Vue的index.html文件
weixin_42644062的博客
05-20 1085
里面有一个 这个id需要和App.vue里中的id，以及main.js里面的el:’#app’保持一致 否则有问题。
Vue中index.html、main.js、App.vue、index.js之前的关系及加载过程
wangshiqi666的博客
03-26 4273
Vue项目结构
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值