webpack开发案例（四）

<template> ?<div id="tml"> ???<!--使用mui框架，实现新闻资讯列表样式--> ???<ul class="mui-table-view"> ?????<li v-for="item in list" class="mui-table-view-cell mui-media"> ???????<a href="javascript:;"> ?????????<img class="mui-media-object mui-pull-left" :src="item.img_url"> ?????????<div class="mui-media-body"> ???????????{{item.title}} ???????????<p class=‘mui-ellipsis‘ v-text="item.zhaiyao"></p> ???????????<div class="ft"> ?????????????<span>发表时间：{{item.add_time}}</span> ?????????????<span>点击数：{{item.click}}</span> ???????????</div> ?????????</div> ???????</a> ?????</li> ???</ul> ?</div></template><script> ?import { Toast } from ‘mint-ui‘; ?export default { ???data() { ?????return { ???????list: [] //新闻列表功能 ?????} ???}, ???created() { ?????this.getnewslist(); ???}, ???methods: { ?????//获取JSON中的新闻资讯 ?????getnewslist() { ???????//1.0确定url ???????var url = ‘../../json/newslist.json‘; ???????// 2.0调用$http.get() ???????this.$http.get(url).then(function(response) { ?????????//3.0获取响应报文体数据 ?????????var data = response.body; ?????????//4.0判断响应报文体中的状态值 ?????????//如果非0,则将服务器响应回来的错误消息提示给用户 ?????????if(data.status != 0) { ???????????Toast(data.message); ???????????return; ?????????} ?????????//5.0如果服务器返回数据正常，则赋值给list ?????????this.list = data.message; ???????}) ?????} ???} ?}</script><style> ?.mui-table-view img { ???height: 80px; ???width: 80px; ?} ???.mui-table-view .mui-media-object { ???height: 80px; ???line-height: 80px; ???max-width: 80px; ?} ???.ft { ???margin-top: 1.5em; ???font-size: 14px; ???color: #0094ff; ?}</style>

{ ???"status": 0, ???"message": [ ???????{ ???????????"id": 13, ???????????"title": "1季度多家房企利润跌幅超50%，去库存促销战打响", ???????????"add_time": "2017-12", ???????????"zhaiyao": "测试ing", ???????????"click": 1, ???????????"img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514605009&di=9253c7bf43894d72950b1620a53cd0d4&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F4703%2F4703-633.jpg" ???????}, { ???????????"id": 14, ???????????"title": "1季度多家房企利润跌幅超50%，去库存促销战打响", ???????????"add_time": "2017-11", ???????????"zhaiyao": "测试ing", ???????????"click": 2, ???????????"img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514605009&di=9253c7bf43894d72950b1620a53cd0d4&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F4703%2F4703-633.jpg" ???????}, { ???????????"id": 15, ???????????"title": "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？", ???????????"add_time": "2017-10", ???????????"zhaiyao": "测试ing", ???????????"click": 3, ???????????"img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514605009&di=9253c7bf43894d72950b1620a53cd0d4&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F4703%2F4703-633.jpg" ???????} ???]}

//1.0导入vue核心包import Vue from ‘vue‘;//2.0 导入App.vue的vue对象import App from ‘./App.vue‘;//3.0 导入vue-routerimport vueRouter from ‘vue-router‘;//3.0.1将vueRouter对象绑定到Vue对象上Vue.use(vueRouter);//3.0.2导入路由规则对应的组件对象import home from ‘./components/Home.vue‘;import shopcar from ‘./components/shopcar/car.vue‘;import news from ‘./components/news/newslist.vue‘;//3.0.3定义路由规则var router1 = new vueRouter({ ?linkActiveClass:‘mui-active‘, ?//改变路由激活时的class名称 ?routes:[ ?????{path:‘/home‘,component:home}, ?????{path:‘/shopcar‘,component:shopcar}, ?????{path:‘/news/newlist‘,component:news} ?]});//4.0注册mint-ui//导入mint-ui的css文件import ‘mint-ui/lib/style.min.css‘;//导入mint-ui组件对象import mintui from ‘mint-ui‘;//在Vue中全局使用mintuiVue.use(mintui);//5.0注册mui的css样式import ‘../statics/mui/css/mui.css‘;//6.0导入一个当前系统的全局基本样式import ‘../statics/css/site.css‘;//7.0将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用ajax方法了import vueResource from ‘vue-resource‘;Vue.use(vueResource);//8.0利用Vue对象进行解析渲染new Vue({ ?el: ‘#app‘, ?//使用路由对象实例 ?router: router1, ?render: c => c(App) //es6写法})

main.js//1.0导入vue核心包import Vue from ‘vue‘;//2.0 导入App.vue的vue对象import App from ‘./App.vue‘;//3.0 导入vue-routerimport vueRouter from ‘vue-router‘;//3.0.1将vueRouter对象绑定到Vue对象上Vue.use(vueRouter);//3.0.2导入路由规则对应的组件对象import home from ‘./components/Home.vue‘;import shopcar from ‘./components/shopcar/car.vue‘;import news from ‘./components/news/newslist.vue‘;//3.0.3定义路由规则var router1 = new vueRouter({ ?linkActiveClass:‘mui-active‘, ?//改变路由激活时的class名称 ?routes:[ ?????{path:‘/home‘,component:home}, ?????{path:‘/shopcar‘,component:shopcar}, ???????{path:‘/news/newlist‘,component:news} ?]});//4.0注册mint-ui//导入mint-ui的css文件import ‘mint-ui/lib/style.min.css‘;//导入mint-ui组件对象import mintui from ‘mint-ui‘;//在Vue中全局使用mintuiVue.use(mintui);//5.0注册mui的css样式import ‘../statics/mui/css/mui.css‘;//6.0导入一个当前系统的全局基本样式import ‘../statics/css/site.css‘;//7.0将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用ajax方法了import vueResource from ‘vue-resource‘;Vue.use(vueResource);//8.0定义一个全局过滤器实现日期的格式化import moment from ‘moment‘;Vue.filter(‘datefmt‘,function(input,fmtstring){ ???//使用momentjs这个日期格式化类库实现日期的格式化功能 ???return moment(input).format(fmtstring);});//9.0利用Vue对象进行解析渲染new Vue({ ?el: ‘#app‘, ?//使用路由对象实例 ?router: router1, ?render: c => c(App) //es6写法})

<template> ?<div id="tml"> ???<!--使用mui框架，实现新闻资讯列表样式--> ???<ul class="mui-table-view"> ?????<li v-for="item in list" class="mui-table-view-cell mui-media"> ???????<a href="javascript:;"> ?????????<img class="mui-media-object mui-pull-left" :src="item.img_url"> ?????????<div class="mui-media-body"> ???????????{{item.title}} ???????????<p class=‘mui-ellipsis‘ v-text="item.zhaiyao"></p> ???????????<div class="ft"> ?????????????<span>发表时间：{{item.add_time | datefmt(‘YYYY-MM-DD HH:mm:ss‘)}}</span> ?????????????<span>点击数：{{item.click}}</span> ???????????</div> ?????????</div> ???????</a> ?????</li> ???</ul> ?</div></template><script> ?import { Toast } from ‘mint-ui‘; ?export default { ???data() { ?????return { ???????list: [] //新闻列表功能 ?????} ???}, ???created() { ?????this.getnewslist(); ???}, ???methods: { ?????//获取JSON中的新闻资讯 ?????getnewslist() { ???????//1.0确定url ???????var url = ‘../../json/newslist.json‘; ???????// 2.0调用$http.get() ???????this.$http.get(url).then(function(response) { ?????????//3.0获取响应报文体数据 ?????????var data = response.body; ?????????//4.0判断响应报文体中的状态值 ?????????//如果非0,则将服务器响应回来的错误消息提示给用户 ?????????if(data.status != 0) { ???????????Toast(data.message); ???????????return; ?????????} ?????????//5.0如果服务器返回数据正常，则赋值给list ?????????this.list = data.message; ???????}) ?????} ???} ?}</script><style> ?.mui-table-view img { ???height: 80px; ???width: 80px; ?} ???.mui-table-view .mui-media-object { ???height: 80px; ???line-height: 80px; ???max-width: 80px; ?} ???.ft { ???margin-top: 1.5em; ???font-size: 14px; ???color: #0094ff; ?}</style>

//1.0导入vue核心包import Vue from ‘vue‘;//2.0 导入App.vue的vue对象import App from ‘./App.vue‘;//3.0 导入vue-routerimport vueRouter from ‘vue-router‘;//3.0.1将vueRouter对象绑定到Vue对象上Vue.use(vueRouter);//3.0.2导入路由规则对应的组件对象import home from ‘./components/Home.vue‘;import shopcar from ‘./components/shopcar/car.vue‘;import newslist from ‘./components/news/newslist.vue‘;import newsinfo from ‘./components/news/newsinfo.vue‘;//3.0.3定义路由规则var router1 = new vueRouter({ ?linkActiveClass: ‘mui-active‘, //改变路由激活时的class名称 ?routes: [{ ?????path: ‘/home‘, ?????component: home ???}, ???{ ?????path: ‘/‘, ?????component: home ???}, ???{ ?????path: ‘/shopcar‘, ?????component: shopcar ???}, ???{ ?????path: ‘/news/newslist‘, ?????component: newslist ???}, ???{ ?????path: ‘/news/newsinfo/:id‘, ?????component: newsinfo ???} ?]});//4.0注册mint-ui//导入mint-ui的css文件import ‘mint-ui/lib/style.min.css‘;//导入mint-ui组件对象import mintui from ‘mint-ui‘;//在Vue中全局使用mintuiVue.use(mintui);//5.0注册mui的css样式import ‘../statics/mui/css/mui.css‘;//6.0导入一个当前系统的全局基本样式import ‘../statics/css/site.css‘;//7.0将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用ajax方法了import vueResource from ‘vue-resource‘;Vue.use(vueResource);//8.0定义一个全局过滤器实现日期的格式化import moment from ‘moment‘;Vue.filter(‘datefmt‘, function(input, fmtstring) { ?//使用momentjs这个日期格式化类库实现日期的格式化功能 ?return moment(input).format(fmtstring);});//9.0利用Vue对象进行解析渲染new Vue({ ?el: ‘#app‘, ?//使用路由对象实例 ?router: router1, ?render: c => c(App) //es6写法})

<template> ?<div id="tml"> ???<!--使用mui框架，实现新闻资讯列表样式--> ???<ul class="mui-table-view"> ?????<li v-for="item in list" class="mui-table-view-cell mui-media"> ???????<router-link v-bind="{to:‘/news/newsinfo/‘+item.id}"> ?????????<img class="mui-media-object mui-pull-left" :src="item.img_url"> ?????????<div class="mui-media-body"> ???????????{{item.title}} ???????????<p class=‘mui-ellipsis‘ v-text="item.zhaiyao"></p> ???????????<div class="ft"> ?????????????<span>发表时间：{{item.add_time | datefmt(‘YYYY-MM-DD HH:mm:ss‘)}}</span> ?????????????<span class="fb">点击数：{{item.click}}</span> ???????????</div> ?????????</div> ???????</router-link> ?????</li> ???</ul> ?</div></template><script> ?import { Toast } from ‘mint-ui‘; ?export default { ???data() { ?????return { ???????list: [] //新闻列表功能 ?????} ???}, ???created() { ?????this.getnewslist(); ???}, ???methods: { ?????//获取JSON中的新闻资讯 ?????getnewslist() { ???????//1.0确定url ???????var url = ‘../../json/newslist.json‘; ???????// 2.0调用$http.get() ???????this.$http.get(url).then(function(response) { ?????????//3.0获取响应报文体数据 ?????????var data = response.body; ?????????//4.0判断响应报文体中的状态值 ?????????//如果非0,则将服务器响应回来的错误消息提示给用户 ?????????if(data.status != 0) { ???????????Toast(data.message); ???????????return; ?????????} ?????????//5.0如果服务器返回数据正常，则赋值给list ?????????this.list = data.message; ???????}) ?????} ???} ?}</script><style> ?.mui-table-view img { ???height: 80px; ???width: 80px; ?} ???.mui-table-view .mui-media-object { ???height: 80px; ???line-height: 80px; ???max-width: 80px; ?} ???.ft { ???margin-top: 1.5em; ???font-size: 14px; ???color: #0094ff; ?} ?.fb{ ?????margin-left: 20px; ?}</style>

{ ???"status": 0, ???"message": [ ???????{ ???????????"id": 13, ???????????"title": "1季度多家房企利润跌幅超50% 去库存促销战打响", ???????????"click": 1, ???????????"add_time": "2015-04-16T03:50:28.000Z", ???????????"content": "sdfsdf" ???????} ???]}

<template> ?<div id="tml"> ???<!--1.0 实现新闻详情--> ???<div class="title" v-for="item in info"> ?????<h4 v-text="item.title"></h4> ?????<p> ???????<span>{{ item.add_time | datefmt(‘YYYY-MM-DD‘) }}</span> ???????<span>{{item.click}}次浏览</span> ?????</p> ?????<div id="content" v-html="item.content"></div> ???</div> ???<!--2.0 实现评论组件的集成--> ???<!--10.2 实现评论组件--> ???<comment :id="id"></comment> ?</div></template><script> ?//10.0 导入评论组件 comment.vue ?import comment from ‘../subcom/comment.vue‘; ?export default { ???components: { ?????comment // 10.1 注册评论组件 ???}, ???data() { ?????return { ???????id: 0, // 传入的id值 ???????info: [] ?????} ???}, ???created() { ?????//1.0 获取url传入的id参数值赋值给data中的id属性 ?????this.id = this.$route.params.id; ?????//2.0 请求服务器获取到这个id对应的详情数据对象 ?????this.getinfo(); ???}, ???methods: { ?????getinfo() { ???????//1.0 定义url ???????var url = ‘../../json/newslist‘ + this.id + ‘.json‘; ???????//2.0 发出ajax请求获取数据 ???????this.$http.get(url).then(function(res) { ?????????var body = res.body; ?????????if(body.status != 0) { ???????????alert(body.message); ???????????return; ?????????} ?????????//3.0 赋值 ?????????this.info = body.message; ???????}); ?????} ???} ?}</script><style scoped> ?.title h4 { ???color: #0094ff; ?} ???.title p { ???color: rgba(0, 0, 0, 0.5); ?} ???.title, ?#content { ???padding: 5px; ?}</style>

{ ???"status": 0, ???"message": [ ???????{ ???????????"user_name":"匿名用户", ???????????"add_time":"2017-12-24", ???????????"content":"haha" ???????},{ ???????????"user_name":"匿名用户", ???????????"add_time":"2017-12-24", ???????????"content":"haha" ???????},{ ???????????"user_name":"匿名用户", ???????????"add_time":"2017-12-24", ???????????"content":"haha" ???????} ???????????]}

<template> ?<div id="tml"> ???<!--评论组件--> ???<!--1.0 实现提交评论数据到服务器的静态结构--> ???<div id="postcomment"> ?????<h3>提交评论</h3> ?????<p class="p"></p> ?????<textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea> ?????<mt-button type="primary" size="large" @click="postcomment">发表</mt-button> ???</div> ???<!--2.0 实现获取评论数据列表--> ???<div id="list"> ?????<h3>评论列表</h3> ?????<p class="p"></p> ?????<div v-for="(item,index) in list"> ???????<div class="title"> ?????????<span>第{{index + 1}}楼:</span> ?????????<span>用户：{{item.user_name}}</span> ?????????<span>发表时间：{{item.add_time | datefmt(‘YYYY-MM-DD‘)}}</span> ???????</div> ???????<ul class="mui-table-view"> ?????????<li class="mui-table-view-cell" v-text="item.content"></li> ???????</ul> ?????</div> ???</div> ???<!--3.0 实现获取更多按钮--> ???<mt-button type="primary" size="large">加载更多</mt-button> ?</div></template><script> ?import { Toast } from ‘mint-ui‘; ?export default { ???data() { ?????return { ???????id: 0, ???????postcontent: ‘‘, //用来自动获取用户填写的评论内容 ???????list: [] //评论数据的数组 ?????} ???}, ???created() { ?????//1.0 获取url传入的id参数值赋值给data中的id属性 ?????this.id = this.$route.params.id; ?????//1.0 获取当前资讯数据的评论信息列表 ?????this.getcommentlist(); ???}, ???methods: { ?????//2.0 获取当前数据的评论数据 pageindex:代表的是当前获取的是哪一页的数据，默认值是1 ?????getcommentlist() { ???????//1.0 确定评论数据的url ???????var url = ‘../../json/userslist‘ + this.id + ‘.json‘; ???????//2.0 发出ajax请求获取数据即可 ???????this.$http.get(url).then(function(res) { ?????????if(res.body.status != 0) { ???????????Toast(res.body.message); ???????????return; ?????????} ?????????//3.0 message数组中的数据赋值给this.list ?????????this.list = this.list.concat(res.body.message); ???????}); ?????}, ?????//1.0 评论数据的提交 ?????postcomment() { ???????//1.0 判断用户是否填写评论内容 ???????if(this.postcontent.trim().length <= 0) { ?????????Toast(‘您要评论的内容不能为空‘); ?????????return; ???????} ?????} ???} ?}</script><style scoped> ?/* 1.0 实现提交评论样式 */ ???#postcomment { ???padding: 5px; ?} ???.p { ???height: 1px; ???width: 100%; ???border-bottom: 1px solid rgba(0, 0, 0, 0.3); ?} ?/*2.0 评论列表的样式*/ ???#list { ???padding: 5px; ?} ???.title { ???padding: 5px; ???color: #6d6d72; ???font-size: 15px; ???background-color: rgba(0, 0, 0, 0.1); ?}</style>