vue目录结构分析
2023-01-08 19:38:33 14 举报AI智能生成
vue目录结构分析
作者其他创作
大纲/内容
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目录下
一般而言，我们开发的组件都要放到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
}
}
name: 'App',
components: {
HelloWorld
}
}
这句代码如果用完整写法
export Vue.extend({
name: 'App',
components: {
HelloWorld
}
})
export Vue.extend({
name: 'App',
components: {
HelloWorld
}
})
export关键字把后面的对象暴露出去，相当于Java中的public
main.js文件
程序入口，没有它程序就没法启动了
有一段代码 new Vue().$mout("#app") 等价
new Vue({
el:'#app'
})
有一段代码 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')
render: function (h) { return h(App) },
}).$mount('#app')
等价于我们的
new Vue({
el:'#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，但是它是不完整的。
0 条评论
下一页
