vue项目学习笔记1组件和路由

脚手架创建后的文件夹

 

vue-cli文件组成

1. main.js 主要的文件，所有和顶级vue实例相关的都放到这里
2. App.vue 最顶级的组件，仅次于 Vue实例，看到的顶级页面结构一般放在这里
3. components 组件的文件夹
4. assets 静态资源

 

 src文件夹下的目录

1. main.js中

   1. 创建了最外层的Vue实例

   2. 把App.vue这个组件，当做Vue实例内部的最顶级组件并渲染出来

   3. 与public/index.html 中的那个id为app的div关联起来

2. App.vue 最顶级的那个组件，仅次于Vue实例

   1. App.vue是Vue实例的第一个组件,也是最顶级的组件,仅此于vue实例 Root

3. components组件文件夹，除了APp.vue之外的组件，都写到这个文件夹中

   1. 组件的逻辑直接写在component的xxx.vue文件里

4. assets静态资源文件夹

   1. 静态资源放到assets文件夹下面，直接使用对应路径即可引入

   2. CSS样式文件也在assets文件夹中 , 其有两种引入css文件的方式

方式一、在单文件组件App.js的style标签中引入

<style>
@import url('./assets/base.css'); // 使用css支持的es6语法导入
</style>

方式二、 在main.js中引入

import './assets/base.css';

main.js 详情 引用基于vue框架的一些库

router文件夹 路由

引入创建的路由组件

路由组件文件夹 views

path：路由地址

两种路由注册方式

一、导航式路由

 

二、编程式

 页面实现路由的简单跳转

一、router-link ：to=“地址” 入口

       router-view 出口  //放在要出去的页面的组件中

 二、this.$router.push(“/地址”) 点击事件跳转

 

 组件的注册和引用

在components文件夹下创建组件文件夹及文件

文件中自己注册自己的名字暴露自己

 在其他组件引用

 也是通过标签的形式显示出来