vue 项目文件结构

这篇博客详细介绍了Vue项目的文件结构,重点讲解了`main.js`、`App.vue`、`components`、`router`和`store`等关键文件的作用。`main.js`作为项目核心,负责导入和配置各种组件、路由和状态管理。`App.vue`是项目入口,可作为根实例或组件使用。通过调整`App.vue`位置验证了其与其他组件的通用性。理解这些文件的功能对于Vue项目的搭建至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 用 webpack npm 的方式安装vue项目后,初始文件夹如下

目录/文件说明
build这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。
config配置目录,默认配置没有问题,所以我们也不用管
node_modules这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管
src我们的开发目录,基本上绝大多数工作都是在这里开展的
static资源目录,我们可以把一些图片啊,字体啊,放在这里。
test初始测试目录,没用,删除即可
.xxxx文件这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了
index.html首页入口文件,基本不用管,如果是开发移动端项目,可以在head区域加上你合适的meta
package.json项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。
README.md不用管

 重要的,还是src文件夹。

commponents:放置公共组件

App.vue:项目入口文件,设置根实例 app 的模板内容

main.js: 这是项目的核心文件。各种需要使用的文件都需要在 main.js 导入 (比如:Vue,根实例App.vue 文件,路由文件router,状态管理文件store)

rounter: 放置路由文件

store (文件夹名称自定义,另外创建): vuex 状态管理文件 

 项目主要以下几个文件:

index.html :网页文件 --引入 vue.js、

main.js:项目入口文件。最主要的文件。引入各种文件;创建根实例、设置根实例的模板内容(根实例的模板内容)

App.vue:(组件也是实例)vue文件,1. 设置根实例内容,然后可以像组件一样在main.js 中引入;2. 也可以直接在main.js 创建根实例后设置。

总结:

在 npm 安装 vue 初始项目里,App.vue 文件本来放置在根目录。为了试验 App.vue 这个文件是否和其他组件一样的使用功能,我把App.vue 从根目录移入到 components 文件件中了。事实证明,App.vue 和其他组件文件功能一样。

最主要是 main.js 文件:

1、引入各类文件:组件、路由、状态管理文件都需要在 main.js 中(头部)

2、main.js 中创建根实例(new Vue)  

     ** 可设置根实例的模板 template。也可以不设置模板。如果在实例设置了模板,模板内容优先级>html 文件根元素中内容,模板内容会覆盖 html 文件根元素中内容

3、在根实例中注册要用的文件:路由、状态管理文件;组件,要在根实例中的 components 属性注册

//引入vue文件
import Vue from 'vue'

//引入组件
import App from './components/App' //从当前目录下,引入组件 App
import Hello from './components/Hello'
import Todolist from './components/Todolist'

//引入路由
//引入vuex 状态管理文件
import router from "./router/router.js"
import store from "./store/store.js"

//关闭vue 的生产提示
Vue.config.productionTip = false 

//创建根实例
//设置根实例template模板内容(优先级最高,会覆盖在html文件内根元素写好的内容)
  //实例中注册路由、状态管理 vuex
  //实例中注册组件
new Vue({
  el: '#app',
  router,
  store,
  template:
    '<div style="border: solid 1px black;padding: 5px 20px 5px"><h1>这里设置根实例的模板内容</h1>' +
    '<Todolist></Todolist>' +
    '</br>'+
    '<h2 style="color: red;border: solid 1px red;padding: 20px">状态管理数据,返回{{message}}</h2>'+
    '</div>',
  components: { App:App,hello:Hello,Todolist:Todolist } ,
  data () {
      return {
        message: this.$store.state.showFooter   //使用状态管理储存数据
    }
  }
})

 

 编辑器截图 main.js

 

index.html 文件

渲染效果:(因为main.js 里面的根实例设置了模板,所以 index.html 文件里面的内容被覆盖 了)

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值