vue目录结构分析
2023-01-08 19:38:33 14 举报AI智能生成
vue目录结构分析
作者其他创作
大纲/内容
node_modules<br>
相关依赖文件目录。类似maven的repository目录。其实存放了一些js，ts等文件
<br>
这个目录很大，拷贝源码不用带上
public<br>
一般用于存放一些静态资源文件,例如图片,视频,音频等资源文件<br>
favicon.ico网站图标
index.html 顶层模板容器，因为vue有且只有一个页面
main.js文件
结论很简单：所谓“没有引入 main.js”只是在开发环境，在打包过程中程序会自动将应用的 css、js 等引入 html 文件。
如何证明？
src<br>
这里是我们要开发的源码目录，基本上要做的事情都在这个目录里
assets目录，和public等价
放置我们用的组件.vue 或者 一些 js文件也可以 。组件建议大写字母开头，否则开启语法检查将编译报错<br>
App.vue文件
顶层组件，包含了HelloWorld.vue等其它子组件<br>一般而言，我们开发的组件都要放到App.vue目录下
import HelloWorld from './components/HelloWorld.vue'<br>
相当于java中的导包
import java.util.concurrent.atomic.AtomicInteger;
from后面是组件的路径
from左边是组件的别名<br>
整句代码其实就是把HelloWorld.vue这个组件导入到当前文件的作用域里面，同时给这个组件取一个别名
export default {<br> name: 'App',<br> components: {<br> HelloWorld<br> }<br>}<br>
这句代码如果用完整写法<br><br> export Vue.extend({<br> name: 'App',<br> components: {<br> HelloWorld<br> }<br>}) <br>
export关键字把后面的对象暴露出去，相当于Java中的public
main.js文件
程序入口，没有它程序就没法启动了<br>有一段代码 new Vue().$mout("#app") 等价 <br>new Vue({<br> el:'#app'<br>})
import Vue from 'vue'
从依赖库(node_modules)里面把vue导入进来，因为下面马上要用到Vue对象
import App from './App.vue'<br>
正因为App.vue第11行代码有export，所有这里是导入App组件当当前文件的作用域里面
Vue.config.productionTip = false<br>
关闭警告
new Vue({<br> render: function (h) { return h(App) },<br>}).$mount('#app')<br>
等价于我们的<br>new Vue({<br> el:'#app'<br>})
思考#app从哪里来？？
.gitignore<br>
git上传代码的适合，忽悠的目录。比如dist目录就不会提交到git<br>
jsconfig.json<br>
官方：当您在工作空间中有一个定义项目上下文的jsconfig.json文件时，JavaScript体验会得到改进
@ 就代表src根路径了
全局配置文件，主要用来配置一个默认根路径
package-lock.json<br>
用来控制依赖版本号的，和java中的pom.xml一样
package.json<br>
子主题<br>
子主题<br>
全局配置文件。Node.js遵循模块化架构，当我们创建了一个项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json，但是它是不完整的。
0 条评论
下一页
