vue项目实战(二)

 【VueRouter】在我们router文件中 导入视图页面有两种方式

第一种 类似于导入组件 首先导入： import 自定义页面名 from 页面路径   然后使用：直接写这个自定义的页面名

第二种方式（）=> import(视图路径)

 点我点击到home的时候 home文字class类名是“router-link-exact-active”

 当我点击到about文字 home没有被选中的时候 home的类名是router-link-active

但是这个时候被选择的about文字 它的class类名变成了router-link-exact-active

那就说明 我们选择到了那个文字 或者区域 或者这个路由 =那这个类名就会变成router-link-exact-active

 在app.vue文件夹中的style区域 我们可以看到 常规的文字设置中是黑色加粗字体 但是里面有一个 router-link-exatc-active 表示的是此刻被选中的内容的样式设置 在这里就选择哪个文字 哪个文字就变成了薄荷绿。

 

 我们现在回到项目。 

发现在这个项目代码里面 有很多初始化的内容 我们的项目并不需要这些内容 所以我们要把它删了

 在src文件下 新建一个styles文件夹 在放一个base.less文件 放我们的全局样式

 如果我们不将全局样式清除默认间距 会看到我们的内容 距离边框是有一段距离的

所以我们要清除内外间距。清除完全局的默认边距后  需要在main.js引入全局样式。

然后就会发现 我们的内容会紧挨着边框 就不会因为标签自带的间距影响我们之后写样式了。

 我们下面就需要使用vant组件库 要收藏保存下面的网址 

Vant 2 - Mobile UI Components built on Vue

 首先安装vant

第一种使用vant的方式 一次性导入所有vant组件 需要哪个组件直接使用 好处：方便 缺点：内存占比比较大

 

 一次性导入完所有组件之后 需要使用某个组件 那么直接把这个组件的内容复制粘贴就行了

 小结：1.延续上一次的VueRouter 讲了路由匹配以及命名路由 2.项目：清除默认内容  清除全局的默认边距 下载vant 使用vant

链接: https://pan.baidu.com/s/1NRvZVSKPJo6gq2X3rs28sA?