相信来看看这篇文章的童鞋,都对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/
联系客服