一个简单的vue项目搭建

于 2019-07-29 17:01:32 发布
阅读量329 收藏 1
点赞数 1
分类专栏： vue入门详解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41843448/article/details/97654970
版权

搭建项目，启动项目，

项目开发前准备

安装饿了么框架，将main.js改为：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

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

初始化项目

1、 删除views和components以及assets目录
在这里插入图片描述
2、router.js改成这样：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      // component: Home
    },
  ]
})

3、app.vue 改为：

<template>
  <div id="app">

  </div>
</template>

<style lang="less">
html,body,#app{width:100%;height: 100%;}
*{margin: 0;padding: 0;box-sizing: border-box}
</style>

准备开发，

在这里插入图片描述

首先布局

将app.vue 改为：

<template>
  <div id="app">
    <el-container style="height:100%;">
      <el-container>
          <el-aside width="200px">Aside</el-aside>
        <el-main>
        </el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<style lang="less">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

效果图：
在这里插入图片描述

开始给右边填充内容

在el-aside填充页面的架构，骨架先写出来，再优化样式，这样的话，开发进度会快很多。
在这里插入图片描述


        <el-aside width="200px">
          <!-- 首先大容器包括 -->
          <div class="asideContent">
            <!-- 首先是头像 -->
            <div class="headimg">
              <img src="http://img2.imgtn.bdimg.com/it/u=2880081924,493605320&fm=26&gp=0.jpg" alt />
              <div>
                <p>昵称</p>
                <h5>签到</h5>
              </div>
            </div>
          </div>
          <!-- 侧边信息栏 -->
          <div class="box-router">
            <ul>
              <!-- 用一个v-for,遍历一下 这样就有六条数据了。-->
              <li v-for="(item,index) in ['音乐台','排行榜','MV','个人电台','我喜欢']" :key="index">{{item}}</li>
            </ul>
          </div>
          <!-- 信息栏下面的歌单 -->
          <div>我的歌单</div>
          <!-- 歌单也用v-for循环 -->
          <div>
            <ul>
              <li
                v-for="(ziyuansu,index) in [{name:'歌单1',ramk:'歌单1备注'},{name:'歌单2',ramk:'歌单2备注'},{name:'歌单3',ramk:'歌单3备注'}]"
                :key="index"
              >
                <p>{{ziyuansu.name}}</p>
                <p>{{ziyuansu.ramk}}</p>
              </li>
            </ul>
          </div>
        </el-aside>

效果图
在这里插入图片描述

开始调整样式
首先把dom重新调整了以下


        <el-aside width="200px">
          <!-- 首先大容器包括 -->
          <div class="asideContent">
            <!-- 首先是头像 -->
            <div class="headimg">
              <img src="http://img2.imgtn.bdimg.com/it/u=2880081924,493605320&fm=26&gp=0.jpg" alt />
              <div>
                <p>昵称</p>
                <h5>签到</h5>
              </div>
            </div>
            <!-- 侧边信息栏 -->
            <div class="box-router">
              <ul style="margin:20px 0;">
                <!-- 用一个v-for,遍历一下 这样就有六条数据了。-->
                <li v-for="(item,index) in [{icon:'el-icon-setting',name:'音乐台'},{icon:'el-icon-phone',name:'排行榜'},{icon:'el-icon-goods',name:'MV'},{icon:'el-icon-error',name:'个人电台'},{icon:'el-icon-message-solid',name:'我喜欢'}]" :key="index" style="line-height:50px;">
                  <i :class="item.icon" style="margin-right:5px;"></i>{{item.name}}
                </li>
              </ul>
            </div>
            <!-- 信息栏下面的歌单 -->
            <div style="display:flex;"><span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span><span style="margin:0 5px;">我的歌单</span><span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span></div>
            <!-- 歌单也用v-for循环 -->
            <div class="songsheet">
              <ul>
                <li
                  v-for="(ziyuansu,index) in [{name:'歌单1',ramk:'歌单1备注'},{name:'歌单2',ramk:'歌单2备注'},{name:'歌单3',ramk:'歌单3备注'}]"
                  :key="index"
                >
                  <p>{{ziyuansu.name}}</p>
                  <p>{{ziyuansu.ramk}}</p>
                </li>
              </ul>
            </div>
          </div>
        </el-aside>

然后是css


<style lang="less" scoped>
// 给大容器加一个padding
.asideContent{
  padding: 20px;
  line-height: 30px;
  text-align: left;
  .headimg{
    display: flex;
    height: 60px;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      flex: 0 0 60px;
    }
    div{
      flex: 1;
      padding: 5px 0;
      * {
        line-height: 25px;
        text-align: center;
      }
    }
  }
  .box-router{
    text-align: left;
  }
}
</style>

以此类推，歌单就不写了，开始写主体。

我希望，点击不同的侧边栏展示不同的数据，这个时候就要用到router（路由）了
首先在里面添加<router-view></router-view>
然后将router.js改为

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
    },
    {
      path:'/yinyuetai',
      title:'音乐台',
      name:'yinyuetai',
      // 要展示的vue文件地址
      component:() => import(/* webpackChunkName: "about" */ './views/yinyuetai.vue')
    },
    {
      path:'/rank',
      title:'排行榜',
      name:'rank',
      component:() => import(/* webpackChunkName: "about" */ './views/rank.vue')
    },
    {
      path:'/MV',
      title:'MV',
      name:'MV',
      component:() => import(/* webpackChunkName: "about" */ './views/MV.vue')
    },
    {
      path:'/gerendiantai',
      title:'个人电台',
      name:'gerendiantai',
      component:() => import(/* webpackChunkName: "about" */ './views/gerendiantai.vue')
    },
    {
      path:'/Ilove',
      title:'我喜欢',
      name:'Ilove',
      component:() => import(/* webpackChunkName: "about" */ './views/Ilove.vue')
    },
  ]
})
注意import的地址，

然后在和router.js的同级目录下创建一个叫views的目录，里面分别有yinyuetai.vue、rank.vue、MV.vue、gerendiantai.vue、Ilove.vue

然后文件里面的内容分别是
gerendiantai.vue

<template>
    <div>
        gerendiantai
    </div>
</template>

Ilove.vue

<template>
    <div>
        Ilove
    </div>
</template>

MV.vue

<template>
    <div>
        MV
    </div>
</template>

rank.vue

<template>
    <div>
        rank
    </div>
</template>

yinyuetai.vue

<template>
    <div>
        yinyuetai
    </div>
</template>

路由配置完毕，现在只要给右边的侧边栏加个跳转连接就可以了
但是这时候我发现li太长了，不好维护。我想把数据抽出来，然后这里只写一个变量。
在这里插入图片描述
首先将变量名改为info
在这里插入图片描述
然后到scrpit里面声明，这样子就好了，这样和之前的效果是完全一样的。


<script>
export default {
  data() {
    return {
      info: [
        {
          icon: "el-icon-setting",
          name: "音乐台"
        },
        {
          icon: "el-icon-phone",
          name: "排行榜"
        },
        {
          icon: "el-icon-goods",
          name: "MV"
        },
        {
          icon: "el-icon-error",
          name: "个人电台"
        },
        {
          icon: "el-icon-message-solid",
          name: "我喜欢"
        }
      ]
    };
  }
};
</script>

好了，现在准备给li添加一个跳转的事件，跳转到哪里？没错，就是跳转到router,js里面的path，但是每个连接都是不一样的。所以要在info里面再添加一个值，叫tiaozhuandepath，所以要把script里面的info重新改变成这样子：


<script>
export default {
  data() {
    return {
      info: [
        {
          tiaozhuandepath: "/yinyuetai",
          icon: "el-icon-setting",
          name: "音乐台"
        },
        {
          tiaozhuandepath: "/rank",
          icon: "el-icon-phone",
          name: "排行榜"
        },
        {
          tiaozhuandepath: "/MV",
          icon: "el-icon-goods",
          name: "MV"
        },
        {
          tiaozhuandepath: "/gerendiantai",
          icon: "el-icon-error",
          name: "个人电台"
        },
        {
          tiaozhuandepath: "/Ilove",
          icon: "el-icon-message-solid",
          name: "我喜欢"
        }
      ]
    };
  }
};
</script>

然后回到li，我们给li添加个点击事件

 @click="$router.push(item.tiaozhuandepath)"

在这里插入图片描述
解释以下语法，@click就是点击事件，@click=“执行的语句或者函数”
for循环讲解：
v-for是vue的语法，可以直接写在标签上，和普通的for循环一样，
例子：v-for="item in [1,2,3,4]"这里的item就是拿到in后面的1234
结果：
在这里插入图片描述
也就是说，for循环会拿到每一个子元素，v-for="(item,index) in info"，这里的item就是每个子元素的名字，可以自己随意命名，index就是当前子元素的索引，也就是当前子元素是第几个，实际上跟js语法for(let k in data)相似的，之后item.xxx就是对应的对象里面的值，下面贴上图示讲解：

首先要知道for循环，就是遍历一个数组，拿到里面的每个子元素。
假设有一个数组[1,2,3,4],for循环就是跑四次，第一次拿到1，第二次拿到2，第三次拿到3，第四次拿到4，直到往下执行。

而这里的info等于左边的一个数组，第62行到87行
而item就是每一个子元素，
首先第一次拿到63-67，所以这时的item.name也就是66的name。以此类推，
第二次就拿到68-72.第三次拿到73-77……

在这里插入图片描述

通过上面的讲解应该知道item时什么了吧？如果这还没有听懂的话，两个建议，1从此别碰电脑，2从此别碰电脑。

$router.push(item.tiaozhuandepath)跳转到item.tiaozhuandepath。
@click=“dada” 点击时执行dada的函数，
@click="dada(e)"点击时执行dada的函数，并且把e传过去。

最后贴上整个页面的代码：

<template>
  <div id="app">
    <el-container style="height:100%;">
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <!-- 首先大容器包括 -->
          <div class="asideContent">
            <!-- 首先是头像 -->
            <div class="headimg">
              <img src="http://img2.imgtn.bdimg.com/it/u=2880081924,493605320&fm=26&gp=0.jpg" alt />
              <div>
                <p>昵称</p>
                <h5>签到</h5>
              </div>
            </div>
            <!-- 侧边信息栏 -->
            <div class="box-router">
              <ul>
                <!-- 用一个v-for,遍历一下 这样就有六条数据了。-->
                <router-link v-for="(item,index) in info" :key="index" tag="li" :to="item.tiaozhuandepath" active-class="liactive">
                  <i :class="item.icon" style="margin-right:5px;"></i>
                  {{item.name}}
                </router-link>
              </ul>
            </div>
            <!-- 信息栏下面的歌单 -->
            <div style="display:flex;">
              <span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span>
              <span style="margin:0 5px;">我的歌单</span>
              <span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span>
            </div>
            <!-- 歌单也用v-for循环 -->
            <div class="songsheet">
              <ul>
                <li
                  v-for="(ziyuansu,index) in [{name:'歌单1',ramk:'歌单1备注'},{name:'歌单2',ramk:'歌单2备注'},{name:'歌单3',ramk:'歌单3备注'}]"
                  :key="index"
                >
                  <p>{{ziyuansu.name}}</p>
                  <p>{{ziyuansu.ramk}}</p>
                </li>
              </ul>
            </div>
          </div>
        </el-aside>
        <!-- 主体内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <!-- 底部内容 -->
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [
        {
          tiaozhuandepath: "/yinyuetai",
          icon: "el-icon-setting",
          name: "音乐台"
        },
        {
          tiaozhuandepath: "/rank",
          icon: "el-icon-phone",
          name: "排行榜"
        },
        {
          tiaozhuandepath: "/MV",
          icon: "el-icon-goods",
          name: "MV"
        },
        {
          tiaozhuandepath: "/gerendiantai",
          icon: "el-icon-error",
          name: "个人电台"
        },
        {
          tiaozhuandepath: "/Ilove",
          icon: "el-icon-message-solid",
          name: "我喜欢"
        }
      ]
    };
  }
};
</script>


<style lang="less">
ul,
li {
  list-style: none;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  font-size: 14px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>


<style lang="less" scoped>
// lang表示用什么语法，我用的是less语法，下面两个例子
// 普通语法：
// .baba{xxx;}
// .baba .erzi{xxx;}
// less语法：
// .baba{xxx;.erzi{xxx}}
// .baba{xxx;.erzi{xxx}} 等同于 .baba{xxx;}和.baba .erzi{xxx;}
// 通俗点也就是说子级是可以写在父级的{}里面的。

// 给大容器加一个padding
.asideContent {
  padding: 20px;
  line-height: 30px;
  text-align: left;
  .headimg {
    display: flex;
    height: 60px;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      flex: 0 0 60px;
    }
    div {
      flex: 1;
      padding: 5px 0;
      * {
        line-height: 25px;
        text-align: center;
      }
    }
  }
  .box-router {
    text-align: left;
    ul {
      margin:20px 0;
      li{
        line-height:50px;cursor: pointer;
      }
      .liactive{
        color: red;
      }
    }
  }
}
</style>

<style>

</style>

在这里插入图片描述

qq_41843448
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值