vue的目录结构与大致的执行流程

初学vue的一些浅层认识

vue的基本目录结构

这段时间刚接触vue,对其目录结构比较有兴趣，特来总结一下

新建完vue项目之后，大致目录如下：

node_modules文件夹

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块.

public文件夹

一般用于存放一些静态资源文件，例如图片，视频，音频等资源文件。需要特别注意的是webpack在进行打包的时候，会将public中的所有静态资源原封不动的进行打包。

src文件夹

src文件夹用来存放vue项目的源代码，也算是项目的主战场,其中也有几个不同的文件夹

assets文件夹

也是用于存放一些静态资源文件，与public中所不同的是，webpack在进行打包的时候，会将其认作为一个模块进行打包到js文件里面

components文件夹

一般用于存放非路由组件（还有全局组件）

router文件夹

该文件夹下主要存放vue路由信息文件

views文件夹

该文件夹主要存放项目的html组件

其他文件

App.vue 是整个项目的根组件

main.js是整个项目的入口文件。也是整个程序最开始执行的文件。

babel.config.js:配置文件，用于兼容更多浏览器。

package-lock.json :缓存文件，用于记录所安装的插件的版本号等信息。

package.json:项目的说明性文件，用于说明项目的名字，版本，所配置的依赖；

README.MD：说明性的一个文件。

原文链接：https://blog.csdn.net/m0_55842907/article/details/122071234

Vue的执行流程

一般来说，当启动vue程序时，系统会先调用main.js文件

在main.js中，创建了一个新的vue对象并将其挂载到App.vue中id为app的html组件中

在App.js中，引入<router-view/>标签来进行路由管理,系统会进入router文件夹中的index.js文件中来寻找路由

import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    //不加任何后缀的路由,localhost:8080/
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    //加后缀的路由,localhost:8080/about
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

然后系统会跟据不同的路由来展示不同的页面

在浏览器中输入不同的url,便会跳转到不同的页面
由于本人将views文件夹中的HomeVue.vue文件更改过了，所以页面显示的是本人更改过的HomeVue.vue页面
localhost:8080/

localhost:8080/about

以上为本小白初学vue的一些浅层的认识，文中如果有些地方不妥的，还望各位大佬指教