相信来看看这篇文章的童鞋,都对Vue已经有了大致的了解。所以,话不多说,直接进入正题。

首先看下图:


一般一个初步的Vue项目创建好之后都会有这三个文件:index.html 、main.js 、App.js;

1、index.html :众做周知,Vue是单页面形式开发,而这个index.html文件在其中起着特别重要的作用。所有组件(后缀名为.vue都被视为组件)都会通过此文件进行渲染加载。


这个文件,你可以不用管。一般情况下,很少会在这里面进行大量的代码二次编写。

2、main.js : 这个文件,在我看来,它相当于一个C/Java中的入口函数。控制着初次启动Vue项目要加载的组件。

下面是main.js的代码截图,我会对每行代码进行逐一分析


  (1)import  A   from  ‘B’

   这类语句相当于引入B(这一般是路径)然后给它起个名字叫做A;

(2)Vue.user(C)

这个意思是 全局方法定义 C。也就是说,定义以后,你可以在这个Vue项目的任意地方使用该组件(当然,你不能乱写)。

(3)

这个和index.html中的相挂钩。

官网解释为:模板将会替换挂载的元素。挂载元素的内容都将被忽略

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>,然后index.html文件被初步解析为这种形式

<div id="myapp">
    <app></app>
</div>

(4)watch : 用来监听路由的变化,可以用来定义页面切换时过渡效果。


3、App.vue:组件。额,暂且,你可以把它认为是一个根组件。


export中的name属性,相当于给这个组件定义一个名字。便于识别和使用。

created: 这是一个生命周期函数,因为App这个组件中并没有任何信息。他只是作为根组件来使用。所以,我们要在进入这个组件的时候跳转到一个初始化界面--login。

(个人感觉App没啥用,index.html和main.js完全可以实现这些功能)。

   下面,我们来总结一下,vue项目的启动,在表层可视为main.js-->App.vue(组件)-->index.html


最后,顺便提下src/router/index.js这个文件。


对于里面一些代码我来简单介绍一下。

1、引入组件的代码。

引入的时候注意好格式、路径就行。

2、routes定义时。

path为你以后页面间路由跳转的路径;

name亦可以作为条状的依据

component:这个是组件名,要和你引入组件时定义的名字保持一致。

当然,还有其他属性,这个要看你项目需求了。

这个是官网的Vue-Router介绍 https://router.vuejs.org/zh/guide/

这个是我做的一个小demohttps://gitee.com/cxh1006/Vue点击打开链接

说的不好,还请见谅。有问题有建议的可以下方评论留言。一起交流一下

Logo

前往低代码交流专区

更多推荐