Vue商城项目01

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

将项目源码托管到oschina 码云 中

  1. 点击头像 -> 修改资料 -> SSH公钥 如何生成SSH公钥
    如果已经创建过，则公匙位置C:\Users\ASUS.ssh，id_rsa.pub文件夹打开复制即可

  2. 创建自己的空仓储，Git 全局设置。使用 git config --global user.name "用户名" 和 git config --global user.email ***@**.com 来全局配置提交时用户的名称和邮箱

  3. 使用 git init 在本地初始化项目

  4. 使用 touch README.md 和 touch .gitignore 来创建项目的说明文件和忽略文件；

  5. 使用 git add . 将所有文件托管到 git 中

  6. 使用 git commit -m "init project" 将项目进行本地提交

  7. 使用 git remote add origin 仓储地址将本地项目和远程仓储连接，并使用origin最为远程仓储的别名

  8. 使用 git push -u origin master 将本地代码push到仓储中

使用vscode默认集成Git工具块

vs左边中间的源代码管理，点击对号就可以提交，右边三个点里的推送可以push到仓库

App.vue 组件的基本设置

  1. 头部的固定导航栏使用 Mint-UI 的 Header 组件；

import Vue from \'vue\'
import app from \'./App.vue\'
import { Header } from \'mint-ui\'
Vue.component(Header.name, Header)
var vm = new Vue({
 el: \'#app\',
 render: c => c(app),
 router 
})
<mt-header fixed title="黑马程序员·Vue项目"></mt-header>

  1. 底部的页签使用 mui 的 tabbar;使用的是 MUI 的 Tabbar.html
    代码在例子里面mui-master包中–>examples–>hello-mui—>examples—>找到需要的样式复制代码

// 导入 MUI 的样式
import \'./lib/mui/css/mui.min.css\'

  1. 购物车的图标，使用MUI 的 icons-extra.html，同时，应该把其依赖的字体图标文件 mui-icons-extra.ttf，复制到 fonts 目录下！

// 导入扩展图标样式,css目录下应该有icons-extra.css
import \'./lib/mui/css/icons-extra.css\'
为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`

  1. 将底部的页签，改造成 router-link 来实现单页面的切换；

<router-link class="mui-tab-item" to="/home"> </router-link>
// 1.1 导入路由的包
import VueRouter from \'vue-router\'
// 1.2 安装路由
Vue.use(VueRouter)
// 1.3 导入自己的 router.js 路由模块
import router from \'./router.js\'
router // 1.4 挂载路由对象到 VM 实例上

  1. Tab Bar 路由激活时候设置高亮的两种方式：

  • 全局设置样式如下：

	.router-link-active{
     	color:#007aff !important;
   }

  • 或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：

	// 创建路由对象
   var router = new VueRouter({
     routes: [
       { path: \'/\', redirect: \'/home\' }
     ],
     linkActiveClass: \'mui-active\'
     // 默认的类叫做 router-link-active，更换为名字为mui-active类已经被Mui设计好高亮
   });

实现 tabbar 页签不同组件页面的切换

  1. 将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性；
  2. 在router.js文件中导入需要展示的组件，并创建路由对象：

    // 导入需要展示的组件
    import Home from \'./components/home/home.vue\'
    import Member from \'./components/member/member.vue\'
    import Shopcar from \'./components/shopcar/shopcar.vue\'
    import Search from \'./components/search/search.vue\'
    // 创建路由对象
    var router = new VueRouter({
      routes: [
        { path: \'/\', redirect: \'/home\' },
        { path: \'/home\', component: Home },
        { path: \'/member\', component: Member },
        { path: \'/shopcar\', component: Shopcar },
        { path: \'/search\', component: Search }
      ],
      linkActiveClass: \'mui-active\'
    });

  1. App.vue里中间位置放<router-view></router-view>

使用 mint-ui-swipe 轮播图组件

  1. 可以先有模拟的图片数据

  2. 引入轮播图组件：
    main.js里

import {  Swipe, SwipeItem } from \'mint-ui\'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)

<!-- Mint-UI 轮播图组件 -->
    <div class="home-swipe">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item, i) in lunbo" :key="i">
          <img :src="item" alt="">
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>

< 注意，默认是没有高度的，所以需要加上样式

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {//选择器嵌套。&是当前的父选择器
    &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: cyan;
    }
    //让图片自适应大小
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

在.vue组件中使用vue-resource获取数据

  1. 运行cnpm i vue-resource -S安装模块

  2. 导入 vue-resource 组件

import VueResource from \'vue-resource\'

  1. 在vue中使用 vue-resource 组件

Vue.use(VueResource);

  1. 在vue组件中，根据文档地址来发送请求得到数据
    使用 vue-resource 的 this.$http.get 获取数据保存到 data 身上， 使用 v-for 循环渲染 每个 item 项。

<template>
  <div>
    <mt-swipe :auto="4000">
      <!-- 在组件中，使用v-for循环的话，一定要使用 key -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      lunbotuList: [] // 保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      // 获取轮播图数据的方法
      this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
        // console.log(result.body);
        if (result.body.status === 0) {
          // 成功了
          this.lunbotuList = result.body.message;
        } else {
          // 失败的
          Toast("加载轮播图失败。。。");
        }
      });
    }
  }
};
</script>

完成组件切换时动画效果

让用户觉得界面流畅，帮助理解界面的运行流程

		<transition>
			<router-view></router-view>
		</transition>
<style lang="scss" scoped>
.app-container {
  padding-top: 40px;//在固定的导航栏下面
  padding-bottom: 50px;//内容距离底部50px
  overflow-x: hidden;//整个界面切换的时候，超出的部分隐藏
}
.v-enter {
  opacity: 0; //完全透明，消失
  transform: translateX(100%); //从右侧完全进入
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%); //从左侧完全出去
  position: absolute; //让竖轴上的飘移，不占位置
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>

以上是 Vue商城项目01 的全部内容， 来源链接： utcz.com/z/379376.html

回到顶部