小白的vue学习之路04项目

项目技术框架：

项目首页：

项目：

main.js

'use strict';


//引入第三方包 开始
import Vue from 'vue';

//VueRouter:引入路由对象
import VueRouter from 'vue-router';
//VueRouter:安装插件
Vue.use(VueRouter);

//Mint:引入mint-ui
import Mint from 'mint-ui';
//Mint:引入css
import 'mint-ui/lib/style.css';
//Mint:安装插件
Vue.use(Mint);
//MUI:引入mui的样式
import './static/vendor/mui/dist/css/mui.css';
//全局样式
import './static/css/global.css';


//Axios:引入axios
import Axios from 'axios';
//挂载原型
Vue.prototype.$ajax = Axios;
//默认配置
Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';
//Moment:引入moment
import Moment from 'moment';

//引入第三方包 结束

//引入全局组件需要的组件对象 开始
import NavBar from './components/common/navBar.vue';
//引入全局组件需要的组件对象 结束

//定义成全局组件或过滤器，大家都能使用 开始
Vue.filter('convertDate',function(value){
    return Moment(value).format('YYYY-MM-DD');
});
Vue.component('navBar',NavBar); //使用最好以nav-bar
//定义全局组件或过滤器 结束

//引入自己的vue文件 开始  
import App from './app.vue';
import Home from './components/home/home.vue';
import Member from './components/member/member.vue';
import Shopcart from './components/shopcart/shopcart.vue';
import Search from './components/search/search.vue';
import NewsList from './components/news/newsList.vue';
import NewsDetail from './components/news/newsDetail.vue';


//引入自己的vue文件 结尾


//VueRouter:创建对象并配置路由规则！！！导航
let router = new VueRouter({
    linkActiveClass:'mui-active',
    routes: [
        //VueRouter：配置路由规则
        { path: '/', redirect: { name: 'home' } }, //重定向
        { name: 'home', path: '/home', component: Home },//首页
        { name:'member',path:'/member',component: Member}, //会员
        { name: 'shopcart',path:'/shopcart',component:Shopcart}, //购物车
        { name: 'search',path:'/search',component:Search}, //查找
        { name:'news.list',path:'/news/list',component:NewsList}, //新闻列表
        { name:'news.detail',path:'/news/detail',component:NewsDetail}, //新闻详情
    ]
});

//创建vue实例
new Vue({
    el: '#app',
    router,
    render: c => c(App)
})

app.vue

<template>
    <div>
            <!-- 头部内容 -->
            <mt-header title="传智27期信息管理系统"></mt-header>
            <router-view></router-view>
            <!-- 底部内容 -->
            <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" :to="{name:'home'}">
                <span class="mui-icon icon-shouye1"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" :to="{name:'member'}">
                <span class="mui-icon icon-diamond"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" :to="{name:'shopcart'}">
                <span class="mui-icon icon-gouwucheman"><span class="mui-badge">9</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" :to="{name:'search'}">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">查找</span>
            </router-link>
        </nav>
    </div>
</template>
<script>
</script>
<style>
    
</style>

home.vue

<template>
    <div>
        <!-- home也轮播图 -->
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(img,index) in imgs" :key="index"><a :href="img.url"><img :src="img.img"></a></mt-swipe-item>
        </mt-swipe>
        <!-- home九宫格 -->
        <div class="mui-content">
                <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">
                    <!-- 1：去哪里 -->
                        <router-link :to="{name:'news.list'}">
                            <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"><a href="#">
                            <span class="mui-icon mui-icon-email"></span>
                            <div class="mui-media-body">图文分享</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">商品展示</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">留言反馈</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">搜索资讯</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">联系我们</div></a></li>
                </ul> 
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                imgs:[],//轮播图列表
            }
        },
        created(){
            //发起请求
            this.$ajax.get('getlunbo')
            .then(res=>{
                console.log(res.data.message);
                this.imgs = res.data.message;
            })
        }
    }
</script>
<style scoped>
/*轮播图样式*/
.mint-swipe{
    max-height:187px; 
}
.mint-swipe img {
    height: 100%;
}
/*九宫格样式*/
.mui-table-view.mui-grid-view.mui-grid-9{
    background-color: white;
     border: 0;
     margin-top: 0px;
}
.mui-table-view.mui-grid-view.mui-grid-9 li{
    border: 0;
}
/*九宫格清除字体图标*/
.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before{
    content: '';
}
/*九宫格背景图片*/
.mui-icon-home{
    background-image: url('../../static/img/news.png');
    background-repeat: round;
}
.mui-icon-email{
    background-image: url('../../static/img/picShare.png');
    background-repeat: round;
}
.mui-icon-chatbubble{
    background-image: url('../../static/img/goodShow.png');
    background-repeat: round;
}
.mui-icon-location{
    background-image: url('../../static/img/feedback.png');
    background-repeat: round;
}
.mui-icon-search{
    background-image: url('../../static/img/search.png');
    background-repeat: round;
}
.mui-icon-phone{
    background-image: url('../../static/img/callme.png');
    background-repeat: round;
}
/*九宫格图标宽高*/
.mui-icon{
    height: 50px;
    width:50px;
}
</style>

navBar.vue

<template>
    <div>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="goBack"></a>
            <h1 class="mui-title">{{title}}</h1>
        </header>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        props:['title'],//声明接收父组件参数
        methods:{
            goBack(){
                this.$router.go(-1); //根据浏览器记录返回上一次
            }
        }

    }
</script>
<style scoped>
.mui-bar.mui-bar-nav{
    position: relative;
}
</style>

newslist.vue

<template>
    <div class="tmpl">
    
        <nav-bar title="新闻列表"></nav-bar>


    <!-- MUI 图文列表 -->
        <ul class="mui-table-view">
            <li v-for="news in newsList" :key="news.id" class="mui-table-view-cell mui-media">
                <router-link :to="{name:'news.detail',query:{id:news.id} }">
                    <img class="mui-media-object mui-pull-left" :src="news.img_url">
                    <div class="mui-media-body">
                        <span v-text="news.title"></span>
                        <div class="news-desc">
                            <p>点击数:{{news.click}}</p>
                            <p>发表时间:{{news.add_time | convertDate}}</p>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return {
            newsList:[],//新闻列表数据
        }
    },
    created(){
        //发起请求
        this.$ajax.get('getnewslist')
        .then(res=>{
            this.newsList = res.data.message;
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

</script>
<style scoped>
.mui-media-body p {
    color: #0bb0f5;
}

.news-desc p:nth-child(1) {
    float: left;
}

.news-desc p:nth-child(2) {
    float: right;
}
</style>

newsdetail.vue

<template>
    <div class="tmpl">
        <nav-bar title="新闻详情"></nav-bar>
        <div class="news-title">
            <p v-text="newsDetail.title"></p>
            <div>
                <span>{{newsDetail.click}}次点击</span>
                <span>分类:民生经济</span>
                <span>添加时间:{{newsDetail.add_time | convertDate}}</span>
            </div>
        </div>
        <div class="news-content" v-html="newsDetail.content"></div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            newsDetail:{}, //就是为了象征性的表示其数据类型
        }
    },created(){
        //1:获取路由参数
        let id = this.$route.query.id;
        //2:拼接路由参数成为后台请求的URL
        this.$ajax.get('getnew/' + id)
        .then(res=>{
             //3:响应回来渲染页面
             this.newsDetail = res.data.message[0]; 
             //数组，就一个数据，所以直接取[0]
        })
        .catch(err=>{
            console.log(err);
        })
       
    }
}

</script>
<style scoped>
.news-title p {
    color: #0a87f8;
    font-size: 20px;
    font-weight: bold;
}

.news-title span {
    margin-right: 30px;
}

.news-title {
    margin-top: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}


/*主体文章的左右距离*/

.news-content {
    padding: 10 5;
}
</style>

global.css

body {
    background-color: white;
}
.tmpl{
    margin-bottom: 50px;
}

其中有css-loader style-loader 

mint-ui

mui.css

vue-router

moment(转换时间插件)

axios：get和post请求，传数据

```的JavaScript

npm我mint-ui vue-preview axios vue-router monent vue - S;

npm我webpack html - webpack - 插件

 css - loader样式 - 加载器less less - 加载器autoprefixer - 加载器babel - 加载器babel - 核心babel - 预设 - es2015 babel - 插件 - 转换 - 运行时url - 加载器文件 - 加载器vue - 加载器vue - 模板 - 编译器webpack-dev-server - D

```

设置图标：

方法：（以footer导航为例）

第一步 在http : //www.dcloud.io/hellomui/中先找到设置的footer导航样式

第二步 在http://www.iconfont.cn/ 把下载文件中icon-font.css的

.icon-gouwucheman：before {content：“\ e600”; }
.icon-huiyuan21：before {content：“\ e641”; }
.icon-shouye：before {content：“\ e61e”; }
.icon-gouwuche：before {content：“\ e613”; }
.icon-huiyuan：before {content：“\ e654”; }
.icon-gouwuche1：before {content：“\ e61a”; }
.icon-home：before {content：“\ e6e8”; }
.icon-huiyuan1：before {content：“\ e632”; }
放到mui.css中

在mui.css中加入@ font-face {
    font-family：Muiicons;
    font-weight：normal;
    font-style：normal;
    src：url（'../ fonts / iconfont.ttf' ）格式（'truetype'）;
}
第三步 在相应位置增加 class

设置自定义图片：（以九宫格为例）设置url

遇到错误1

  ./node_modules/mint-ui/lib/style.css中的错误

模块构建失败：未知单词（5：1）

  3 | //加载样式

  4 | var content = require（“!! ../../ css-loader / index.js ?? ref - 6-1！../../ postcss-loader / lib / index.js ?? ref-- 6-2 ./ style.css文件“）！;

> 5 | if（typeof content ==='string'）content = [[module.id，content，'']];

    | ^

  6 | if（content.locals）module.exports = content.locals;

  7 | //将样式添加到DOM

  8 | var update = require（“！../../ vue-style-loader / lib / addStylesClient.js”）（“3b24763e”，content，false，{}）;

 @ ./node_modules/mint-ui/lib/style.css 2：14-176 21：1-42：3 22：19-181

 @ ./src/main.js

 @ multi（webpack）-dev-server / client？http：// localhost：8080 webpack / hot / dev-server ./src/main.js

解决方法在webpack.base.conf.js中加入