Vue学习之商城项目

时间 2021-04-15

标签 css html vue ios git github vue-router npm axios windows 栏目 CSS 繁體版

原文原文链接

创建一个商城项目，以及一个github仓库。css

　　下载安装githtml

https://git-scm.com/download/win

配置参数：vue

Additional icons 附加图标
On the Desktop 在桌面上
Windows Explorer integration Windows资源管理器集成鼠标右键菜单
Git Bash Here
Git GUI Here
Git LFS (Large File Support) 大文件支持
Associate .git* configuration files with the default text editor 将 .git 配置文件与默认文本编辑器相关联
Associate .sh files to be run with Bash 将.sh文件关联到Bash运行
Use a TrueType font in all console windows 在全部控制台窗口中使用TrueType字体
Check daily for Git for Windows updates 天天检查Git是否有Windows更新
　　安装完成后咱们可使用git了：ios

git init
git remote add origin https://github.com/snailbuster/supermall.git

　　这样就能够和咱们的git仓库关联了。git

　　此时和仓库的内容没有同步，因此先使用：　　github

git pull --rebase origin master

　　经过命令git add -A把VUE.JS目录下的全部文件添加到暂存区里面去，而后经过命令git commit 把刚刚提交到暂存区里的文件提交到仓库。git commit -m "提交全部文件"，-m 后面的文字是注释，方便查看历史记录时知道每一次提交提交的是什么。vue-router

　　这里可能让咱们添加一下用户邮箱和id正常添加就能够了。　　npm

　　而后咱们就能够上传咱们的项目了：axios

git push -u origin master

　　成功了。windows

　　以后咱们划分一个目录结构：

　　src目录下有asserts和components：

　　咱们在assets下面存放咱们的资源，建立两个新的文件夹一个是img另外一个是css用来存放这两类资源。

　　components用来存放组件，这里注意要存放的是公共组件，单独使用的组件咱们新建一个同级文件夹views来存储。

　　而后在src目录下还要建一个router（路由相关）一个store（状态管理）还有个network（网络）三个文件夹。在搞一个common存放公共js文件（公共方法、工具类）。

　　配置别名：

　　脚手架3的别名配置方式是：如今项目目录新建一个vue.config.js文件，而后添加代码：

　　这里默认@是src的别名。

module.exports={
    configureWebpack:{
        resolve:{
            alias:{
                'assets':'@/assets',
                'common':'@/common',
                'components':'@/components',
                'network':'@/network',
                'views':'@/views',
            }
        }
    }
}

　　五个文件夹五个别名。

　　在加入一些通用配置，添加一个.editorconfig文件：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

　　以后能够开发项目了：

　　安装下路由：

npm install vue-router --save

　　路由配置没必要多说，这里值得一提的是咱们想用之前项目中写过的那个tabbar，因而咱们路由这里直接复制了之前的tabbar的代码，而后把tabbar、tabbaritem和maintabbar都搞过来。里面路径的代码须要从新写一下。

　　因为前面已经配置了别名咱们能够直接使用别名就不会报错了。

import MainTabBar from 'components/content/mainTabbar/maintabbar'

　　若是在dom中使用别名须要增长一个小波浪线：

 <img slot="item-icon-active" src="~assets/img/cop-active.svg" alt="">

　　加入以后不须要配置什么东西就能够跑起来项目了。还报错就看看：1.文件夹嵌套的文件夹名字是否有错误，或者漏了。2.组件是否注册了。

　　新增长一个导航栏：使用一个具名插槽，这里插槽必定要用div包起来好调整样式。

<template>
    <div class="nav-bar">
      <div class="left"><slot name="left"></slot></div>
      <div class="center"><slot name="center"></slot></div>
      <div class="right"><slot name="right"></slot></div>
    </div>
</template>

　　后来这里排版不对，是由于第一个div的class写错成id，那样下面的css样式就不生效了：

<style scoped>
    .nav-bar{
        display:flex;
        height:44px;
        line-height : 44px;
        text-align:center;
    }

    .left,.right{
        width:60px;
        background-color:red;
    }

    .center{
        flex:1;
        background-color: blue;
    }
</style>

　　display选择flex后就能够排在一排了。而后home中使用一下这个navbar

<script>
import NavBar from "components/common/navbar/NavBar"
export default {
    name:'Home',
    components:{
        NavBar
    }
}
</script>

　　效果就出来了。背景颜色只是为了让咱们更好的看到布局效果。

　　而后写一个网络请求的文件：

import axios from 'axios'
export function request(config){
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000",
        timeout:5000
    })

    instance.interceptors.request.use(config =>{
        return config
    },err=>{

    })

    instance.interceptors.response.use(res=>{
        return res.data
    },err =>{
        console.log(err)
    })
    
    return instance(config)
}

　　同时使用：

npm install axios --save

　　安装一下axios。而后也在home文件夹里写一个Home.js用来做为中间引用文件，实现解耦，首页只须要面向这个模块进行开发，调用相应的函数就能够无序关心具体的url，而url等内容统一放在这里管理。

import {request} from "./request"

export function getHomeMultidata(){
    return request({
        url:'/home/multidata'
    })
}

　　这样就能够在home.vue中引入函数getHomeMultidata了：

import {getHomeMultidata} from "network/home"

　　以后咱们接着在下面写一个created()函数的内容，只要这个组件建立了咱们就但愿发送请求来请求数据，因此使用created()：

    created(){
        //1.请求多个数据
        getHomeMultidata().then(res=>{
            console.log(res);
        })
    }

　　这样就拿到了请求的内容。可是这些内容都是函数内部的局部内容，咱们须要把这些内容保存在data中供之后使用。

data(){

return{

banners:[],

recommends:[]

}

created(){

//1.请求多个数据

getHomeMultidata().then(res=>{

console.log(res);

this.banners = res.data.banner.list;

this.recommends = res.data.recommend.list;

})

}

　　插入一个轮播图

　　咱们如何使用别人写好的组件呢？加入一个别人写好的轮播图组件到components/common/swiper，这个swiper中的内容就是咱们想要的轮播图。咱们看到index.js文件能够帮助咱们更好的引用这个组件：

import Swiper from './Swiper'
import SwiperItem from './SwiperItem'

export {
  Swiper, SwiperItem
}

　　那么咱们引用的时候就很方便了：components中注册别忘记了

import {Swiper,SwiperItem} from 'components/common/swiper'
export default {
    name:'Home',
    components:{
        NavBar,
        Swiper,
        SwiperItem
    },

　　而后就可使用轮播图展现咱们请求到的内容：

    <swiper>
        <swiper-item v-for="item in banners">
            <a :href="item.link">
                <img :src="item.image" alt="">
            </a>
        </swiper-item>
    </swiper>

　　banners咱们已经经过网络请求获取到内容了，绑定href和item的link而后img的src属性当顶上item的image，绑定dom属性别忘记是有冒号的v-bind。

　　而后写推荐栏

<template>
<div class="recommend">
   <div v-for="item in recommends" class="recommend-item">
       <a :href="item.link">
           <img :src="item.image" alt="">
           <div>{{item.title}}</div>
       </a>
   </div>
</div>
</template>

<script>
export default {
    name:'RecommendView',
    props:{
        recommends:{
            type:Array,
            default(){
                return []
            }
        }
    }

}
</script>

　　这里props用来接收home传过来的数据，home中v-bind来吧数据传到props中：

<recommend-view :recommends="recommends"></recommend-view>

　　组件的引包和注册这里很少说也是须要的，还有一些css样式来调整图片大小不至于太大：

<style scoped>
    .recommend{
        display:flex;
        width: 100%;
        text-align:center;
        font-size:12;
        padding:15px 0 20px;
        border-bottom: 8px solid #eee;
    }
    .recommend-item{
        flex:1;
    }
    .recommend-item img{
        width:70px;
        height:70px;
        margin-bottom:10px;
    }
</style>

　　写特点视图栏：

　　在home下childcamps文件夹中添加一个featureview，短短几行代码就能够了：

<div class = "feature">
    <a href = "https://act.mogujie.com/zzlx67">
        <img src="~assets/img/home/mogujie.jpg" alt="">
    </a>
</div>

　　而后仍是老样子须要回到home中引包，注册组件而后使用一下组件就ok了。图片能够截图来代替先，而后调整下css样式使得图片正常。

　　接着写这个：内容导航

　　作一个封装，由于可能在多个地方使用，放在components中。这个东西和导航栏不同，这个组件上都是同样的，只有文字就有变化，咱们就不须要使用插槽。

　　这里代码彷佛有点乱，可是实现的无非就是上面那个东西，首先，点击的内容须要高亮，因此咱们添加了class 和：class来肯定这个是否是激活状态，须要不须要激活css样式（粉色和下划线）。而后@click函数则用来传递index来告诉函数是哪一个激活了。函数只须要this.currentIndex = index一下就能够保持点击的那个选项是高亮的了。注意的是对象语法active赋值为True仍是False取决于index和currentIndex。

<template>
<div class = "tab-control">
   <div v-for ="(item,index) in titles" 
    class="tab-control-item" 
    :class="{active:index === currentIndex}" 
        @click="itemClick(index)">
       <span>{{item}}</span>
   </div>
</div>
</template>

　　以后是最重要的列表内容：

　　咱们须要使用一种方式来保存这些数据，

　　这是还没更改的状态