首页  思维导图  详情



 



vue目录结构分析

2023-01-08 19:38:33   14  举报





AI智能生成

vue目录结构分析

vue

html

javascript

前端

架构图

模板推荐

作者其他创作

大纲/内容

node_modules

相关依赖文件目录。类似maven的repository目录。其实存放了一些js，ts等文件

这个目录很大，拷贝源码不用带上

public

一般用于存放一些静态资源文件,例如图片,视频,音频等资源文件

favicon.ico网站图标

index.html 顶层模板容器，因为vue有且只有一个页面

main.js文件

结论很简单：所谓“没有引入 main.js”只是在开发环境，在打包过程中程序会自动将应用的 css、js 等引入 html 文件。

如何证明？

src

这里是我们要开发的源码目录，基本上要做的事情都在这个目录里

assets目录，和public等价

放置我们用的组件.vue 或者一些 js文件也可以。组件建议大写字母开头，否则开启语法检查将编译报错

App.vue文件

顶层组件，包含了HelloWorld.vue等其它子组件 一般而言，我们开发的组件都要放到App.vue目录下

import HelloWorld from './components/HelloWorld.vue'

相当于java中的导包

import java.util.concurrent.atomic.AtomicInteger;

from后面是组件的路径

from左边是组件的别名

整句代码其实就是把HelloWorld.vue这个组件导入到当前文件的作用域里面，同时给这个组件取一个别名

export default {   name: 'App',   components: {     HelloWorld   } }

这句代码如果用完整写法  export Vue.extend({   name: 'App',   components: {     HelloWorld   } })

export关键字把后面的对象暴露出去，相当于Java中的public

main.js文件

程序入口，没有它程序就没法启动了 有一段代码 new Vue().$mout("#app") 等价  new Vue({  el:'#app' })

import Vue from 'vue'

从依赖库(node_modules)里面把vue导入进来，因为下面马上要用到Vue对象

import App from './App.vue'

正因为App.vue第11行代码有export，所有这里是导入App组件当当前文件的作用域里面

Vue.config.productionTip = false

关闭警告

new Vue({   render: function (h) { return h(App) }, }).$mount('#app')

等价于我们的 new Vue({  el:'#app' })

思考#app从哪里来？？

.gitignore

git上传代码的适合，忽悠的目录。比如dist目录就不会提交到git

jsconfig.json

官方：当您在工作空间中有一个定义项目上下文的jsconfig.json文件时，JavaScript体验会得到改进

@ 就代表src根路径了

全局配置文件，主要用来配置一个默认根路径

package-lock.json

用来控制依赖版本号的，和java中的pom.xml一样

package.json

子主题

全局配置文件。Node.js遵循模块化架构，当我们创建了一个项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json，但是它是不完整的。

 Collect

Get Started

vue前端架构图

 Collect

Get Started

总目录结构

 Collect

Get Started

目录节点编辑

 Collect

Get Started

AI总结-行业分析报告PDF结构化分析





0 条评论

下一页