Vue-Cli 4.x目录结构学习总结

说明

更新时间：2020/7/15 10:52，更新了整体内容

Vue-Cli个人感觉对新手并不友好，本人在学习的过程的真的学得一脸懵逼，尤其是它的目录结构，现在在此做个学习记录。本文会持续更新，不断地扩充

本文仅为记录学习轨迹，如有侵权,联系删除

一、目录结构

这里直接给出Vue-Cli 4.x的目录结构，为什么要强调4.x，因为它的目录结构跟3或者2还是有些区别，下面可以具体看一下

先简单介绍一下目录

目录	说明
node_modules	第三方依赖，我们安装的各种依赖都在个文件件里面
public	存放公共资源的地方，里面有一个index.html
src	这个是重点，我们的源码以及开发的静态资源等都在里面
src/assets	静态资源，css、img、js、font等
src/compoments	自定义的公共组件
src/router	路由配置，用于页面的跳转配置
src/views	视图组件
src/store	是vuex的文件，主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。
App.vue	首页组件（默认组件）,也叫根组件
main.js	入口文件，一切的入口
.browserslistrc	配置使用CSS兼容性插件的使用范围
.eslintrc.js	配置ESLint
babel.config.js	使用一些预设
package.json	项目描述既依赖
package-lock.json	版本管理使用的文件

二、项目执行顺序详解

这里必须要明确一点，在vue里面，一切皆组件！！！一切皆组件！！！一切皆组件！！！，特地强调一下这一点，vue的开发也是组件化的开发，这跟传统的html页面完全不一样，还有就是基本开发都是在src文件夹下面的，所以src是核心。

（1）main.js

首先来看src下的main.js,这个是主入口

浏览器一开始加载就是加载main.js，其中里面通过import的方式引入了各种资源，然后新建了一个vue实例，这个是核心

new Vue({
  router,    //注册路由
  store,     //引入store
  render: h => h(App)    //渲染函数
}).$mount('#app')      //手动挂载到id为#app的地方

其中，router和store可以不用去看，重点在render和$mount，先来看render

//这是ES6的箭头函数的写法,可以进入一部化简为下面的写法
render: h => h(App) 
       ||
//可以看到其实就是一个函数，这个函数用来渲染组件(App.vue)的，h()里面可以传入任意想渲染的组件
render (h){     
    return h(App);
}

App.vue组件

总之记住一句话，render: h => h(App) 是用来渲染组件的，h()里面可以传入任意想渲染的组件，然后是$mount(’#app’)，这个是挂载数据用的，将组件挂载到id为#app的地方，主要在public下的index.html，其中< div id=“app”>将会被组件替换掉，即所谓的挂载。

简单的总结：
通俗的来讲，新建vue实例的那段代码就是将App.vue下的< template>< /template>中间的html代码渲染完之后替代public下的index.html中id为app的html片段，怎么证明呢，我们可以试着自己写一个测试组件，并且让它渲染我们写的测试组件，不要渲染根组件

运行结果

可以看到测试组件TestComponents.vue下的< template>< /template>中间的html代码渲染完之后替代public下的index.html中id为app的html片段

（2）App.vue

App.vue是项目的根组件，所以项目一加载就会通过main.js渲染并挂载App.vue，查看App.vue的代码发现其实跟传统的html差不了多少，都是html+css+js，那么又一个问题，页面跳转怎么搞，这就需要用到页面路由router配置，可以看到App.vue里面引用了< router-view/>路由

< router-view/>对应的是router下的index.js，里面可以配置访问路径和路径对应的组件

运行结果

这个页面对应的是App.vue根组件，然后又因为http://localhost:8080/对应路由的Home组件，所以又将Home组件渲染了来，即上面的截图所展示的那样。如果在访问路径为http://localhost:8080/about则会跳转到About组件。

三、总结

总的来说Vue-Cli对新手来说确实不友好，因为里面用到了前端react框架的知识，同时还需要ES6的知识，除此之外还需要保证前端基础扎实才行，像js等。在学习的时候我自己也是去快速恶补了一下ES6的知识，ES6的知识总结我也有通过博文的方式做了相应的记录，有兴趣的可以看一下我的ES6知识总结的博文。