一、构建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')
![大笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
npm run dev 看看界面效果:
后面将开始开发网络部分,获取资讯以及其他一些信息,源代码地址将在后几篇陆续贴上。(未完待续)
github地址:https://github.com/iuoon/oscwx_2.0