跟着项目学vue.js(七) 准备布局页(上)

最新推荐文章于 2024-08-09 16:21:47 发布

百里牛金

最新推荐文章于 2024-08-09 16:21:47 发布

阅读量7.9k

点赞数 2

分类专栏： vue 跟着项目学Vue.js 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/m0_37057454/article/details/84070577

版权

vue 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

跟着项目学Vue.js

8 篇文章 2 订阅

订阅专栏

接上文，开始准备布局页，见下图，包括顶部一个头部和一个底部导航。

1、在we-vue组件库中找到对应的组件

1)头部，包括网站logo和【注册|登陆】按钮，这对应着we-vue组件库的Header组件

2）底部导航，包括【首页、所有商品、购物车、我】四个菜单项，这对应着we-vue组件库的Tabbar组件

这两个组件都位于官方文档的【导航相关】目录下，we-vue是所有基于weui样式库的Vue组件库中，文档最详尽的一个，文档做的非常舒服，不亚于Antd。

不同于PC端网站，移动端项目对组件库有很强的依赖性，是因为组件库能够提供更加专业的视觉和交互体验。而PC端一般只会在中后台项目中大量使用组件库，以满足其功能性需求。

在main.js文件中添加对we-vue样式表style.css的引用：

import Vue from 'vue';

import App from './App.vue';
import router from './router';
import store from './store';
import '../node_modules/we-vue/lib/style.css';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

2、在components文件夹下创建Layout文件夹，并在该文件夹下分别创建Footer.vue和Header.vue单文件组件。

单文件组件：

*.vue是Vue.js特有的文件格式，表示的就是一个Vue组件，被称为单页式组件。
*.vue文件可以同时承载“视图模板”、“样式定义”和组件代码，它使得组建的文件组织更加清晰与统一。

单页组件由三部分组成：
<template>——视图模板
<style>——组件样式表
<script>——组件定义

我们会在后面的文章中详细讲解他们的用法。

3、Header.vue

<template>
  <div>
    <wv-header :fixed="false" background-color="blue">
      <div slot="left"><img src="../../assets/logo.png" /></div>
      <div slot="right">
        <a href="#">登录</a>
        |
        <a href="#">注册</a>
      </div>
    </wv-header>
  </div>
</template>

<style>
  .wv-header-btn img {
    height: 50px;
    position:absolute;
    left:0;
    top:0;
  }
</style>

<script>
import Vue from 'vue';
import { Header } from 'we-vue';

Vue.use(Header);
export default {

};
</script>

组件定义中引入页头Header，但HTML 特性是不区分大小写的，在视图模板中Header就等同于header，是H5里的标签。组件库在【node_modules\we-vue\src\utils】路径下的create.js文件中，统一添加了前缀【wv-】，用以满足命名规则，避免冲突。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

4、Footer.vue

<template>
  <div>
    <wv-tabbar :fixed="true">
      <wv-tabbar-item to="/" is-on>
        <img class="weui-tabbar__icon" src="../../assets/icon_tabbar.png" slot="icon">首页
      </wv-tabbar-item>
      <wv-tabbar-item to="/products">
        <img class="weui-tabbar__icon" src="../../assets/icon_tabbar.png" slot="icon">所有商品
      </wv-tabbar-item>
      <wv-tabbar-item to="/cart">
        <img class="weui-tabbar__icon" src="../../assets/icon_tabbar.png" slot="icon">购物车
      </wv-tabbar-item>
      <wv-tabbar-item to="/profile">
        <img class="weui-tabbar__icon" src="../../assets/icon_tabbar.png" slot="icon">我
      </wv-tabbar-item>
    </wv-tabbar>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'we-vue';

Vue.use(Tabbar).use(TabbarItem);
export default {

};
</script>

5、更新根组件App.vue

<template>
  <div id="app">
    <bl-header />
    <router-view></router-view>
    <bl-footer />
  </div>
</template>
<style>
  body, div, li, a {
    color: #000;
  }
</style>
<script>
  import Header from './components/layout/Header.vue';
  import Footer from './components/layout/Footer.vue';

  export default {
    components: {
      'bl-header': Header,
      'bl-footer': Footer,
    },
  };
</script>

6、Home.vue中添加搜索框

<template>
  <div>
    <wv-search-bar :autofocus="false" :show="true" />
  </div>
</template>
<script>
  import Vue from 'vue';
  import { SearchBar } from 'we-vue';

  Vue.use(SearchBar);
  export default {

  };
</script>

7、打开vue ui,切到serve，点击运行按钮

运行效果如下：

来看这段代码

<wv-header :fixed="false" background-color="blue">

冒号是 v-bind指令的缩写，代表属性的值【false】是一个变量，而非字符串。

为了彻底掰清这一个知识点，我们将【background-color】特性也添加v-bind指令：

<wv-header v-bind:fixed="false" v-bind:background-color="blue">

并在组件定义中给data对象添加一个【blue】属性，它的值设置为【"red"】

<script>
import Vue from 'vue';
import { Header } from 'we-vue';

Vue.use(Header);
export default {
    data() {
      return {
        blue:"red"
      }
    }
};
</script>

保存之后，界面顶部当然是变成了红色，一不小心就添加了换肤的功能：