Vue+webpack+Vux学习案例(二)—构建开源中国微信版(开篇)

一、构建vux项目

       首先 根据vux官方构建文档 构建vux+vue项目，构建项目命令如下，创建开源中国微信应用：       

# install vue-cli
npm install -g vue-cli

# init a webpack project with vuxjs/template
vue init vuxjs/webpack oscwx
cd oscwx
# or cnpm install
npm install
npm run dev

ps:这里我用的cnpm install安装很快，npm install半天不动。

到这里项目创建好了，项目结构如下：

删除components目录下的vue示例文件，新建主页Home.vue文件，Header.vue文件，Footer.vue文件，

下面是Header.vue

<template>
  <!--<div class="tabbar">
    <div class="title">{{title}}</div>
  </div>-->

  <tabbar class="tabbar">
    <div class="title">{{title}}</div>
    <tabbar-item class="search">
      <img slot="icon" src="../assets/image/actionbar_search_icon.png">
    </tabbar-item>
  </tabbar>

</template>
<style>
.tabbar{
background-color:#00CC66;
height:50px;
position:relative;
}
.search{
position:absolute;right:5px;top:5px;z-index:999;
}
.title{
   text-align:center;
margin:auto;
   color:white;
   line-height:50px;
   font-size:18px;
 }
</style>
<script>
import Tabbar from 'vux/dist/components/tabbar'
import TabbarItem from 'vux/dist/components/tabbar-item'
    export default{
     name: 'AppHeader',
     components: {
       Tabbar,
       TabbarItem,
     },
     data(){
            return{
                title:'综合'
            }
     },
     methods: {
       resultClick (item) {
          alert('you click the result item: ' + JSON.stringify(item))
       },
       getResult (val) {
          this.results = val
       }
     },
    }

</script>

Footer.vue

<template>
  <tabbar>
    <tabbar-item selected>
      <img slot="icon" src="../assets/image/ic_nav_news_actived.png">
      <span slot="label">综合</span>
    </tabbar-item>
    <tabbar-item>
      <img slot="icon" src="../assets/image/ic_nav_tweet_normal.png">
      <span slot="label">动弹</span>
    </tabbar-item>
    <tabbar-item>
      <img style="height:40px;width:40px;" slot="icon" src="../assets/image/ic_nav_add_normal.png">
    </tabbar-item>
    <tabbar-item>
      <img slot="icon" src="../assets/image/ic_nav_discover_normal.png">
      <span slot="label">发现</span>
    </tabbar-item>
    <tabbar-item>
      <img slot="icon" src="../assets/image/ic_nav_my_normal.png">
      <span slot="label">我的</span>
    </tabbar-item>
  </tabbar>
</template>
<style>
.add{
height:40px;
width:40px;
}
</style>
<script>
import Tabbar from 'vux/dist/components/tabbar'
import TabbarItem from 'vux/dist/components/tabbar-item'
    export default{
       name: 'AppFooter',
       components: {
         Tabbar,
         TabbarItem,
       },
       data(){
         return{
            msg:''
         }
       },

    }
</script>

Home.vue

<template>
  <div>
    <app-header></app-header>
    <app-footer></app-footer>
    <tab :line-width="2" >
      <tab-item :selected="tag === item" v-for="item in taglist" @click="tag = item">{{item}}</tab-item>
    </tab>

  </div>
</template>
<style>
@import '~vux/dist/vux.css';
</style>
<script>
  import Tab from 'vux/dist/components/tab'
  import TabItem from 'vux/dist/components/tab-item'
  import AppHeader from './Header'
  import AppFooter from './Footer'

  export default {
    data () {
      return {
        tag: '资讯',
        taglist: ['资讯', '博客', '问答', '活动']
    }
  },
  components: {
      Tab,
      TabItem,
      AppHeader,
      AppFooter,
  },
}
</script>

最后修改main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Home from './components/Home'

Vue.use(VueRouter)
const router = new VueRouter()
const FastClick = require('fastclick')
FastClick.attach(document.body)

router.map({
  '/': {
    component: Home
  }
})

router.start(App, '#app')

到这里整个界面初步搭好了，感觉还可以哈

npm run dev 看看界面效果：

后面将开始开发网络部分，获取资讯以及其他一些信息，源代码地址将在后几篇陆续贴上。(未完待续)

 github地址：https://github.com/iuoon/oscwx_2.0

Vue+Vux学习案例(三)—构建开源中国微信版(添加网络通信)