Vue初始项目浅层解析

Vue初始项目浅层解析

创建一个简单的vue项目vue create myvue

• 用IDEA打开（需要有vue的插件）

首先是node_modules，里面包括了项目需要的一些文件和依赖，安装的插件都在这里

接下来就是public，在这里面favicon.ico是vue的一个图标，而index.html可以理解为一个模板页，一般用不到。vue可以说是一个单页面应用，其页面都是通过一个个组件实现的。

.gitignore文件中配置的其实是项目上传到Git需要忽略的文件

babel.config.js文件主要是将ES6的语法转换成ES5，以适配某IE浏览器的支持

jsconfig.json中是整个项目的信息说明，package-lock.json中则是整个项目的依赖配置声明（相当于maven中的pom.xml）

vue.config.js它其实是一个可选的配置文件，如果项目中的根目录(和 package.json 同级的) 中存在这个文件，那么它会被 @vue/cli-service 自动加载。也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

src目录下asset目录放的是vue的logo，一般用来放一些资源，component目录存放的是一些组件，router是存放路由信息配置文件，views就是页面目录，再往下main.js就是整个程序的入口

main.js文件中，这里import其实是ES6的语法，在被babel打包的时候转成ES5的规范即require模块加载器。

createApp(App).use(router).mount('#app')即实例化渲染App组件，使用路由以及手动挂载#app

App.vue组件中template其实是html的一个模板， router-link相当于html中的a标签，to对应href属性，之后router-view就是用来渲染路由匹配到的组件，没有这个的话页面组件就加载不进来。下面的style也就相当于css样式了。

router目录下index.js配置路由，import { createRouter, createWebHistory } from 'vue-router'是从VueRouter中导入变量的一种方式，主要是用来安装路由与记录路由信息。下面routes中的path、name、component则是分别来配置路由的路径、名称、以及路由要跳转的组件，这其中特别的component: () => import('../views/AboutView.vue')其实是ES6的一种写法，其作业可以认为是一种懒加载，即导入得时候不加载，等到使用它的时候再加载。后面创建路由以及记录路由的基路径，最后暴露导出路由，让其他地方可以import导入此路由。

可以看出在HomeView.vue中import HelloWorld from '@/components/HelloWorld.vue'导入了其他组件，同时export default也暴露了自身让其他组件发现，其中compoent属性定义子组件，同时组件还可嵌套组件，最终形成一颗组件树。

HelloWorld.vue中有一个属性props下面可以定义参数属性，在页面中可以被使用。在下面的style旁有个scoped标签，其作用是使得样式只在本页面有效，是局部样式。

*** （以上创建的是vue3.x默认项目）***