webpack开发案例（三）

基于webpack开发案例（二）

项目结构

案例一（实现根组件的头部和底部样式）

App.vue

<!--以后项目的根组件-->
<template>
  <div>
    <!--1.0利用mint-ui中的header组件实现整个系统的头部-->
    <mt-header fixed title="hello"></mt-header>

    <!--2.0利用vue-router的<router-view></router-view>进行占位-->
    <router-view></router-view>

    <!--3.0利用mui中的tabbar组件实现系统的底部-->
    <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">会员</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"><span class="mui-badge">0</span></span>
        <span class="mui-tab-label">购物车</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </a>
    </nav>
  </div>
</template>

<script>
  // 2.0负责导出.vue这个组件对象，它本质上是一个Vue对象
  // 所以Vue中该定义的元素都可以使用

  export default {

  }
</script>

<style>
  /* 3.0当前页面的CSS样式写到这里，其中scoped表示这个里面
      写的CSS代码知识在当前组件页面上有效，不会影响到其他组件页面
     * */
</style>
main.js

//1.0导入vue核心包
import Vue from ‘vue‘;

//2.0 导入App.vue的vue对象
import App from ‘./App.vue‘;

//3.0 导入vue-router
import vueRouter from ‘vue-router‘;

//3.0.1将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//3.0.2导入路由规则对应的组件对象
//import login from ‘./components/account/login.vue‘;
//import register from ‘./components/account/register.vue‘;

//3.0.3定义路由规则
var router1 = new vueRouter({

});

//4.0注册mint-ui
//导入mint-ui的css文件
import ‘mint-ui/lib/style.min.css‘;
//导入mint-ui组件对象
import mintui from ‘mint-ui‘;
//在Vue中全局使用mintui
Vue.use(mintui);

//5.0注册mui的css样式
import ‘../statics/mui/css/mui.css‘;

//6.0导入一个当前系统的全局基本样式
import ‘../statics/css/site.css‘;

//7.0利用Vue对象进行解析渲染
new Vue({
  el: ‘#app‘,
  //使用路由对象实例
  router: router1,
  render: c => c(App) //es6写法
})

案例二（实现根组件底部的按钮激活时样式设定）

目录结构

步骤一：修改App.vue文件

<!--以后项目的根组件-->
<template>
  <div>
    <!--1.0利用mint-ui中的header组件实现整个系统的头部-->
    <mt-header fixed title="hello"></mt-header>

    <!--2.0利用vue-router的<router-view></router-view>进行占位-->
    <router-view></router-view>

    <!--3.0利用mui中的tabbar组件实现系统的底部-->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-contact"><span class="mui-badge">0</span></span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="#tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
  // 2.0负责导出.vue这个组件对象，它本质上是一个Vue对象
  // 所以Vue中该定义的元素都可以使用

  export default {

  }
</script>

<style>
  /* 3.0当前页面的CSS样式写到这里，其中scoped表示这个里面
      写的CSS代码知识在当前组件页面上有效，不会影响到其他组件页面
     * */
</style>

步骤二：创建car.vue和Home.vue组件

car.vue

<template>
  <div id="tml">
    <h3>购物车</h3>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>
Home.vue

<template>
  <div id="tml">
    <h3>首页</h3>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>

步骤三：创建全局样式

site.css

body {
  background: #fff;
}

.router-link-active {
  color: #007aff;
}

#tml {
  margin-top: 45px;
  margin-bottom: 50px;
}

步骤四：配置入口文件

//1.0导入vue核心包
import Vue from ‘vue‘;

//2.0 导入App.vue的vue对象
import App from ‘./App.vue‘;

//3.0 导入vue-router
import 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‘;

//3.0.3定义路由规则
var router1 = new vueRouter({
  linkActiveClass:‘mui-active‘,  //改变路由激活时的class名称
  routes:[
      {path:‘/home‘,component:home},
      {path:‘/shopcar‘,component:shopcar}
  ]
});

//4.0注册mint-ui
//导入mint-ui的css文件
import ‘mint-ui/lib/style.min.css‘;
//导入mint-ui组件对象
import mintui from ‘mint-ui‘;
//在Vue中全局使用mintui
Vue.use(mintui);

//5.0注册mui的css样式
import ‘../statics/mui/css/mui.css‘;

//6.0导入一个当前系统的全局基本样式
import ‘../statics/css/site.css‘;

//7.0利用Vue对象进行解析渲染
new Vue({
  el: ‘#app‘,
  //使用路由对象实例
  router: router1,
  render: c => c(App) //es6写法
})

案例三（实现首页轮播图）

步骤一：修改Home.vue文件

<template>
  <div id="tml">
    <!--轮播图-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            "url": "",
            "img": "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"
          },
          {
            "url": "",
            "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514010295848&di=a5fa0ca29ea37ecd176728b069d2472c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8718367adab44aedad9a0930b91c8701a08bfb0a.jpg"
          },
          {
            "url": "",
            "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514010700663&di=16c364bcc4ae3880fed24e4c8aa1bf08&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F43a7d933c895d14356f837f779f082025baf075c.jpg"
          }
        ]
      }
    }
  }
</script>

<style>
  .mint-swipe {
    height: 300px;
  }

  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }

  .mint-swipe-item img {
    width: 100%;
  }
</style>

案例四（使用vue-resource实现首页轮播图）

步骤一：安装vue-resource

步骤二：创建一个json文件，伪服务端

{
    "status": 0,
    "message": [
        {
            "url": "",
            "img": "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"
        }, {
            "url": "",
            "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514010295848&di=a5fa0ca29ea37ecd176728b069d2472c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8718367adab44aedad9a0930b91c8701a08bfb0a.jpg"
        }, {
            "url": "",
            "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514010700663&di=16c364bcc4ae3880fed24e4c8aa1bf08&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F43a7d933c895d14356f837f779f082025baf075c.jpg"
        }
    ]
}

步骤三：配置入口文件

main.js

//1.0导入vue核心包
import Vue from ‘vue‘;

//2.0 导入App.vue的vue对象
import App from ‘./App.vue‘;

//3.0 导入vue-router
import 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‘;

//3.0.3定义路由规则
var router1 = new vueRouter({
  linkActiveClass:‘mui-active‘,  //改变路由激活时的class名称
  routes:[
      {path:‘/home‘,component:home},
      {path:‘/shopcar‘,component:shopcar}
  ]
});

//4.0注册mint-ui
//导入mint-ui的css文件
import ‘mint-ui/lib/style.min.css‘;
//导入mint-ui组件对象
import mintui from ‘mint-ui‘;
//在Vue中全局使用mintui
Vue.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写法
})

步骤四：修改Home.vue文件

<template>
  <div id="tml">
    <!--轮播图-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  import { Toast } from ‘mint-ui‘;
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //当页面中的data和methods对象都创建完毕以后，就会自动调用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //实现轮播组件中国的数据请求
        // 1.0确定url
        var url = ‘../../json/lunbo.json‘
        // 2.0调用$http.get()
        this.$http.get(url).then(function(response) {
          var data = response.body;
          //错误处理
          if(data.status != 0) {
            Toast(data.message);
            return;
          }

          //如果服务器返回数据正常，则赋值给list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style>
  .mint-swipe {
    height: 300px;
  }

  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }

  .mint-swipe-item img {
    width: 100%;
  }
</style>

步骤五：命令行npm run dev运行

案例五（实现首页导航区域九宫格图标）

步骤一：将MUI的九宫格图标样式导入进Home.vue

<template>
  <div id="tml">
    <!--mint-ui轮播图-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>

    <!--2.0利用MUI的九宫格-->
    <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">
          <a href="#">
            <span class="mui-icon mui-icon-home"></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-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>
  import { Toast } from ‘mint-ui‘;
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //当页面中的data和methods对象都创建完毕以后，就会自动调用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //实现轮播组件中国的数据请求
        // 1.0确定url
        var url = ‘../../json/lunbo.json‘
        // 2.0调用$http.get()
        this.$http.get(url).then(function(response) {
          var data = response.body;
          //错误处理
          if(data.status != 0) {
            Toast(data.message);
            return;
          }

          //如果服务器返回数据正常，则赋值给list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style>
  /*重写轮播图样式*/

  .mint-swipe {
    height: 300px;
  }

  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }

  .mint-swipe-item img {
    width: 100%;
  }
  /*重写九宫格样式*/

  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
</style>

步骤二：改变九宫格图标样式，首先得先准备好相关的图片资源，然后改Home.vue代码

Home.vue

<template>
  <div id="tml">
    <!--mint-ui轮播图-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>

    <!--2.0利用MUI的九宫格-->
    <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">
          <a href="#">
            <span class="mui-icon mui-icon-home"></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-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>
  import { Toast } from ‘mint-ui‘;
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //当页面中的data和methods对象都创建完毕以后，就会自动调用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //实现轮播组件中国的数据请求
        // 1.0确定url
        var url = ‘../../json/lunbo.json‘
        // 2.0调用$http.get()
        this.$http.get(url).then(function(response) {
          var data = response.body;
          //错误处理
          if(data.status != 0) {
            Toast(data.message);
            return;
          }

          //如果服务器返回数据正常，则赋值给list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style>
  /*重写轮播图样式*/

  .mint-swipe {
    height: 300px;
  }

  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }

  .mint-swipe-item img {
    width: 100%;
  }
  /*重写九宫格样式*/

  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
  /*改变九宫格图标样式*/

  .mui-grid-9 .mui-icon-home:before,
  .mui-grid-9 .mui-icon-email:before,
  .mui-grid-9 .mui-icon-chatbubble:before,
  .mui-grid-9 .mui-icon-location:before,
  .mui-grid-9 .mui-icon-search:before,
  .mui-grid-9 .mui-icon-phone:before {
    content: ‘‘;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }

  .mui-grid-9 .mui-icon-home:before {
    background-image: url(../../statics/imgs/1.png);
  }

  .mui-grid-9 .mui-icon-email:before {
    background-image: url(../../statics/imgs/2.png);
  }

  .mui-grid-9 .mui-icon-chatbubble:before {
    background-image: url(../../statics/imgs/3.png);
  }

  .mui-grid-9 .mui-icon-location:before {
    background-image: url(../../statics/imgs/4.png);
  }

  .mui-grid-9 .mui-icon-search:before {
    background-image: url(../../statics/imgs/5.png);
  }

  .mui-grid-9 .mui-icon-phone:before {
    background-image: url(../../statics/imgs/6.png);
  }
</style>

步骤三：添加路由（将Home.vue中a标签换成router-link，href换成to）

<template>
  <div id="tml">
    <!--mint-ui轮播图-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>

    <!--2.0利用MUI的九宫格-->
    <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">
          <router-link to="/news/newlist">
            <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="/photo/photolist">
            <span class="mui-icon mui-icon-email"></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="/goods/goodslist">
            <span class="mui-icon mui-icon-chatbubble"></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="/feedback">
            <span class="mui-icon mui-icon-location"></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="/vide">
            <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="/callme">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">联系我们</div>
          </router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import { Toast } from ‘mint-ui‘;
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //当页面中的data和methods对象都创建完毕以后，就会自动调用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //实现轮播组件中国的数据请求
        // 1.0确定url
        var url = ‘../../json/lunbo.json‘
        // 2.0调用$http.get()
        this.$http.get(url).then(function(response) {
          var data = response.body;
          //错误处理
          if(data.status != 0) {
            Toast(data.message);
            return;
          }

          //如果服务器返回数据正常，则赋值给list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style>
  /*重写轮播图样式*/

  .mint-swipe {
    height: 300px;
  }

  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }

  .mint-swipe-item img {
    width: 100%;
  }
  /*重写九宫格样式*/

  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
  /*改变九宫格图标样式*/

  .mui-grid-9 .mui-icon-home:before,
  .mui-grid-9 .mui-icon-email:before,
  .mui-grid-9 .mui-icon-chatbubble:before,
  .mui-grid-9 .mui-icon-location:before,
  .mui-grid-9 .mui-icon-search:before,
  .mui-grid-9 .mui-icon-phone:before {
    content: ‘‘;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }

  .mui-grid-9 .mui-icon-home:before {
    background-image: url(../../statics/imgs/1.png);
  }

  .mui-grid-9 .mui-icon-email:before {
    background-image: url(../../statics/imgs/2.png);
  }

  .mui-grid-9 .mui-icon-chatbubble:before {
    background-image: url(../../statics/imgs/3.png);
  }

  .mui-grid-9 .mui-icon-location:before {
    background-image: url(../../statics/imgs/4.png);
  }

  .mui-grid-9 .mui-icon-search:before {
    background-image: url(../../statics/imgs/5.png);
  }

  .mui-grid-9 .mui-icon-phone:before {
    background-image: url(../../statics/imgs/6.png);
  }
</style>

步骤四：npm run dev

时间： 2024-10-14 05:03:12

webpack开发案例（三）的相关文章

webpack开发案例（四）

基于webpack开发案例(三) 案例一(新闻列表的实现) 目录结构 步骤一:创建newslist.vue文件 <template> <div id="tml"> <!--使用mui框架,实现新闻资讯列表样式--> <ul class="mui-table-view"> <li v-for="item in list" class="mui-table-view-cell mui-m

vue+webpack开发（三）

上一篇博文讲了怎么使用路由,这次主要讲讲怎么编写一个vue组件 vue定义了一种"单文件组件"后缀为'.vue'的文件,大概长这样子: <template> <div> <div v-for="n in obj" :class="msg" @click="say(n)"> {{n}} </div> </div> </template> <script

从0构建webpack开发环境(三) 开发环境以及 webpack-dev-server 的使用

sourceMap 实际应用开发过程中大部分时间都是处于开发模式中,其中需要频繁的修改代码.调试和打包. 但是打包后的代码多个模块压缩到了一个bundle文件,如果出现警告或者异常很难定位到具体模块和位置,所以webpack提供了source map的配置 devtool, 该配置可选且具有多个配置项 ,具体包含以下: devtool 构建速度 重新构建速度 生产环境 品质(quality) (none) +++ +++ yes 打包后的代码 eval +++ +++ no 生成后的代码 che

从无到有构建大型电商微服务架构实际开发案例教程（第三阶段）

从无到有构建大型电商微服务架构实际开发案例教程(第三阶段)课程下载地址:https://pan.baidu.com/s/1oTfj9d-o4URKFzMoVXKxBQ 提取码:8p0s 本课程将手把手带大家从无到有实现一个真实的大型电商微服务项目,该项目是基于真实的知名互联网企业项目讲解的 本课程将讲解如何从无到有搭建一个真实的大型电商微服务项目,涉及的内容较多,录制所需的时间也会比较久,因此整部课程下来售价也比较高,但考虑到课程中讲解的某阶段的知识点,有部分学员可能已经掌握了解,并不需要再次学

【小程序源码案例】微信小程序项目开发案例分享

作者:web小二本文标签: 微信小程序 小程序源码案例 小程序项目小程序的开发,并不是适合所有公司,我今天跟大家分享小程序方面的教程,主要是供大家学习使用.学习这种东西,有时候则是单纯的喜欢,没有任何目的,很单纯的为了好玩,记得很早之前学flash,没有想法,就是觉得好玩,纯娱乐爱好而已.到后来玩视频剪辑也是出于同样的原因,不图钱财名利,只是图自己个人爱好娱乐. 但是,学习,有时候则是需要有明确目的,特别是关系到自己吃饭问题的时候,你就需要非常有目的去学习,并且还需要制定好学习的计划与目标,希望

使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享

http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>  <使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享>  <使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享> <

使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> <使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享> <使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享> 我们分享了使用Jquery EasyUI来进行ASP.NET项目的开发的相关方法,每一个模块都有其共用性,

知识图谱实战开发案例剖析（2）

一.前言 这是系列博文<知识图谱实战开发案例剖析>第1部分:知识图谱基础,第2节:知识图谱和人工智智能.该系列内容同时已经录制成视频课程,感兴趣的可以访问网易云课堂. 微信技术交流群: 作者:张子良,版权所有,转载请注明出处.QQ技术交流群:149933712. 二.正文 2.1 人工智能的业务架构 人工智能的业务架构 感知能力:听清: 认知能力:听懂: 服务能力:响应: 2.2 人工智能的技术架构 三大层:基础设施层.技术框架层.应用服务层: 2.3 人机对话系统业务模型 三.未完待续 系列

Hadoop应用开发案例（实战）视频教程（项目实战）视频教程

38套大数据,云计算,架构,数据分析师,Hadoop,Spark,Storm,Kafka,人工智能,机器学习,深度学习,项目实战视频教程 视频课程包含: 38套大数据和人工智能精品高级课包含:大数据,云计算,架构,数据挖掘实战,实时推荐系统实战,电视收视率项目实战,实时流统计项目实战,离线电商分析项目实战,Spark大型项目实战用户分析,智能客户系统项目实战,Linux基础,Hadoop,Spark,Storm,Docker,Mapreduce,Kafka,Flume,OpenStack,Hiv