vue入门（1）--目录讲解

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

项目使用vue-cli" title="vue-cli">vue-cli创建

一、vue程序启动加载过程

1.程序首先加载main.js

2.main.js创建一个vue实例，并把实例挂载到id=app上,这个id=app会映射到app.vue（创建）

3.启动时，首页加载index.html，根据id=app找到app.vue（使用）

4.在app.vue里，根据router-view渲染页面

二、目录结构解析

bulid：项目打包相关

config：项目的配置目录

node_moudules：npm install时安装的依赖

src：开发目录

static：静态资源

test：测试目录（我创建的时候没选测试，所以这个里面没有）

.eslint相关：语法检测用的

index.html：首页的入口

package.json：依赖文件的版本（包管理）

三、关键文件讲解

1.main.js

new Vue:创建vue实例

el:此实例管理的区域，app指index.html中id=app的dom元素

router:将router挂载在这个实例中

components:组件 app.vue

templete:模板

2.Index.html

id=”app”：页面的挂载点，dom元素，整个页面挂载在app这个dom元素下

3.App.vue

这个对应首次启动vue打开的页面，如下图

img就是vue的图标logo

router-view是动态路由组件，图标下面的内容由动态路由控制。

4.router/index.js

这个地方把路由export出来，供其他地方调用。

再来看components/HelloWorld.vue

这个就是app.vue动态路由组件里的所有内容，由一大堆链接组成，就是vue图标logo下的那些超链接

以上是 vue入门（1）--目录讲解 的全部内容， 来源链接： utcz.com/z/377272.html

回到顶部