1. 效果图
2. 分解
2.1 首先是轮播图，轮播图采用mint-ui的插件
2.2 六宫格采用mui里面的插件
-
右键edit as html
- 图标更换
http://dev.dcloud.net.cn/mui/ui/#icon
找到对应的图标替换就行
3. 要操作的文件：
4. 代码
- src/component/common/footer.vue
<template>
<nav class="mui-bar mui-bar-tab">
<router-link class="mui-tab-item mui-active" to="/">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</router-link>
<router-link class="mui-tab-item" to="/">
<span class="mui-icon mui-icon-extra mui-icon-extra-gift"></span>
<span class="mui-tab-label">商品购买</span>
</router-link>
<router-link class="mui-tab-item" to="/">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
<span class="mui-tab-label">购物车</span>
</router-link>
<router-link class="mui-tab-item" to="/">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</router-link>
</nav>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
- src/component/common/header.vue
<template>
<header>
<mt-header fixed title="小买卖"></mt-header>
<i></i>
</header>
</template>
<script>
export default {
}
</script>
<style scoped>
header i{
display: block;
height: 40px;
}
</style>
- src/component/common/index.js
// 编写属于自己的公共Vue组件库
import HeaderComponent from './header.vue';
import FooterComponent from './footer.vue';
// Vue插件要求提供一个install方法, 这个方法会被注入Vue
// 需要我们调用Vue的filter component directive去扩展功能
export default {
install(Vue) {
Vue.component('app-header', HeaderComponent);
Vue.component('app-footer', FooterComponent);
}
};
- src/component/home/home.vue
<template>
<article>
<!-- 轮播图 -->
<mt-swipe :auto="10000">
<mt-swipe-item v-for="item in lunbos" v-bind:key="item.url">
<router-link v-bind:href="item.url">
<img v-bind:src="item.img">
</router-link>
</mt-swipe-item>
</mt-swipe>
<!-- 六宫格 -->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">首页</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/news/list">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">热点新闻</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/photo/list">
<span class="mui-icon mui-icon-image"></span>
<div class="mui-media-body">图片分享</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">搜索</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">联系我们</div>
</router-link>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/">
<span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">关于我们</div>
</router-link>
</li>
</ul>
</article>
</template>
<script>
export default {
data() {
return {
lunbos: []
}
},
methods: {
// 请求数据, 成功后把数据存储到lunbos中
getLunbo() {
this.axios.get('http://vue.studyit.io/api/getlunbo')
.then( rep => this.lunbos = rep.data.message );
}
},
// 组件初始化完毕后, 自动调用接口获取数据渲染轮播图
created() {
this.getLunbo();
}
}
</script>
<style lang="less" scoped>
@height: 260px;
article {
height: @height;
img {
height: @height;
}
}
</style>
- src/component/App.vue
<template>
<main>
<app-header></app-header>
<app-home></app-home>
<app-footer></app-footer>
</main>
</template>
<script>
import HomeComponent from './home/home.vue';
export default {
components: {
'app-home': HomeComponent
}
}
</script>
<style scoped>
</style>
- src/js/main.js
// from后面的路径, 如果含有./ ../那么就相对于当前文件找文件
// 如果没有, 那么就会去node_modules里面找对应的包
// 1.1 导入第三方包
import Vue from 'vue';
import MintUi from 'mint-ui';
import 'mint-ui/lib/style.css';
import Common from '../component/common'; // 自动找到index.js引入
import 'mui/dist/css/mui.css';
import 'mui/examples/hello-mui/css/icons-extra.css';
import axios from 'axios';
// 1.2 启用vue插件
Vue.use(MintUi);
Vue.use(Common);
Vue.prototype.axios = axios; // 把axios库放置到原型, 将来其他组件直接可以拿到axios对象
// 2.1 导入根组件
import AppComponent from '../component/App.vue';
// 2.2 渲染根组件, 启动项目
new Vue({
el: '#app',
render(createNode) {
return createNode(AppComponent);
}
});
- src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- .babelrc
{
"presets": [ "env" ],
"plugins":["transform-runtime"]
}
- .gitignore
# 忽略第三方包, 他们已经记录在package.json文件中了
/node_modules
# 忽略打包后的文件, 因为我们的项目核心是源代码
/dist
# 忽略隐藏文件
.*
# 不忽略git配置文件和babel配置文件
!.gitignore
!.babelrc
- .webpack.config.js
const path = require('path');
const HtmlWP = require('html-webpack-plugin');
const CleanWP = require('clean-webpack-plugin');
module.exports = {
// 打包的入口文件
entry: path.resolve(__dirname, './src/js/main.js'),
// 输出
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
// 插件配置
plugins: [
new HtmlWP({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
}),
new CleanWP(['dist'])
],
// 模块配置
module: {
// 配置loader规则
rules: [
// css
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
// less
{
test: /\.less$/,
use: [ 'style-loader', 'css-loader', 'less-loader' ]
},
// html
{
test: /\.(html|tpl)$/,
use: [ 'html-loader' ]
},
// 静态资源引用
{
test: /\.(png|jpeg|gif|jpg|svg|mp3|ttf)$/,
use: [
{ loader: 'url-loader', options: { limit: 10240 } } // 小于10KB的打包
]
},
// js
{
test: /\.js$/,
use: [ 'babel-loader' ],
exclude: path.resolve(__dirname, '../node_modules')
},
// vue
{
test: /\.vue$/,
use: [ 'vue-loader' ]
}
]
}
};
5. 执行webpack-dev-server
webpack-dev-server
网友评论