vue-router-dome使用webpack 打包过程

vue-router做的饿了不 webpack 打包过程

安装淘宝镜像cnpm 输入命令npm install -g cnpm
安装脚手架 cnpm install -g vue-cli
安装webpack-simple模板并创建一个demo01的文件夹vue init webapck-simple demo01
进入demo01文件cd demo01
下载webpack-simple的依赖cnpm install
开启虚拟服务器cnpm run dev开启成功后自动打开浏览器弹出绿色大V就对了
然后按crtl+c关闭服务器，输入下载vue路由命令cnpm install vue-router -S
在scr里新建components文件是用来存放组件的文件。在components文件里新建5个组件文件:
- main1.vue
- main2.vue
- main3.vue
- main4.vue
- main5.vue
一个.vue文件代表一个一个组件。一个组件代表一个页面

首先修改第一个组件里的内容，把main1.vue里的改成如下代码：

 <template>
    <div class="main1">
        <h1>饿了不首页</h1>
        <router-link to="/main2"><img src="src/assets/kid-foods.jpg" alt=""></router-link>
     </div>
</template>

main2.vue里改成如下：

   <template>
            <div class="main">
                <h1>点餐列表页面</h1>
                <ul>
                   <li v-for="(value,index) in num">
                        <div class="left">
                      <router-link class="block" :to="{name:'game1',params:{lis:value.lis,imge:value.bg_pic,mname:value.dname}}">
                                <img :src="value.sm_pic" alt="">
                        </router-link>
                        </div>
                        <div class="right">
                            <strong>
                             <router-link class="block" :to="{name:'game1',params:{lis:value.lis,imge:value.bg_pic,mname:value.dname}}">
                                {{value.dname}}
                              </router-link>
                            </strong>
                            <p>{{value.descrp}}</p>
                            <span>价格：{{value.price}}</span>
                        </div>
                   </li>
                   <router-link to="/main1" class="fanhui-m1">返回首页</router-link>
                </ul>
            </div>
</template>
<script>
export default{
 data:function(){
            return {
                num:[
                    {
                        sm_pic: 'img/1_1.jpg',
                        bg_pic: 'img/1.jpg',
                        dname: '【酸甜开胃虾】',
                        descrp: '明虾、番茄酱、白糖、白醋、葱、姜、淀粉',
                        price: 12,
                        lis: "这是酸甜开胃虾的详情..唐帝国天启十三年春，渭城下了一场雨。这座位于帝国广阔疆域西北端的军事边城，为了防范草原上野蛮人入侵，四向的土制城墙被垒得极为厚实，看上去就像是一个墩实的土围子。干燥时节土墙上的浮土被西北的风刀子一刮便会四处飘腾，然后落在简陋的营房上，落在兵卒们的身上，整个世界都将变成一片土黄色，人们夜里入睡抖铺盖时都会抖起一场沙尘暴。正在春旱，这场雨来的恰是时辰，受到军卒们的热烈欢迎，从昨夜至此时的淅淅沥沥雨点洗涮掉屋顶的灰尘，仿佛也把人们的眼睛也洗的明亮了很多。至少马士襄此时的眼睛很亮。"
                    },

                    {
                        sm_pic: 'img/2_2.jpg',
                        bg_pic: 'img/2.jpg',
                        dname: '【桂香紫薯山药卷】',
                        descrp: '切片吐司、紫薯、铁棍山药、糖桂花、炼乳',
                        price: 12,
                        lis: "这是桂香紫薯山药卷的详情..心的本色该是如此。成，如朗月照花，深潭微澜，不论顺逆，不论成败的超然，是扬鞭策马，登高临远的驿站；败，仍滴水穿石，汇流入海，有穷且益坚，不坠青云的傲岸，有“将相本无主，男儿当自强”的倔强。荣，江山依旧，风采犹然，恰沧海巫山，熟视岁月如流，浮华万千，不屑过眼烟云；辱，胯下韩信，雪底苍松，宛若羽化之仙，知退一步，海阔天空，不肯因噎废食。"
                    },

                    {
                        sm_pic: 'img/3.jpg',
                        bg_pic: 'img/3_3.jpg',
                        dname: '【蒸饺】',
                        descrp: '鸡蛋、豆角酱肉馅、西红柿鸡蛋馅、猪生抽、生抽、海鲜酱油、糖、盐',
                        price: 12,
                        lis: "这是蒸饺的详情..每一次都在徘徊、孤单中坚强，每一次就算受伤也不闪泪光。”今天我唱起了那首我从来不愿唱的隐形的《隐形的翅膀》。在以前，当别人唱起这首略带忧伤的歌时我总会搞破坏，专捡一些欢乐的歌曲来消减一下悲伤的气氛，因为我不想带着悲伤活在这个世界上。今天，我并不是想抱怨人生的坎坷，我只想从中学会坚强。     (结尾)坚强的意志，坚强的信念，坚强的„„一切的一切都在支撑着我们。"
                    },

                    {
                        sm_pic: 'img/4.jpg',
                        bg_pic: 'img/4_4.jpg',
                        dname: '【口袋饼】',
                        descrp: '面粉、黄瓜、香肠、热水、土豆、盐、醋、生抽、油。',
                        price: 12,
                        lis: "这是口袋饼的详情..即使青春是一枝娇艳的花，但我明白，一枝独放永远不是春天，春天该是万紫千红的世界。  即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。"
                    },

                    {
                        sm_pic: 'img/5_5.jpg',
                        bg_pic: 'img/5.jpg',
                        dname: '【橄榄油版酸奶蛋糕】', descrp: '鸡蛋、玉米淀粉、绵白糖、白醋、低筋粉、橄榄油、酸奶。',
                        price: 12,
                        lis: "这是橄榄油版酸奶蛋糕的详情..让我怎样感谢你？ 当我走向你的时候，我原想收获一缕春风 ，你却给了我整个春天。      让我怎样感谢你 ？当我走向你的时候 我原想捧起一簇浪花，你却给了我整个海洋。      让我怎样感谢你 ？当我走向你的时候， 我原想撷取一枚红叶，你却给了我整个枫林。      让我怎样感谢你？当我走向你的时候， 我原想亲吻一朵雪花，你却给了我银色的世 界！"
                    },

                    {
                        sm_pic: 'img/6.jpg',
                        bg_pic: 'img/6_6.jpg',
                        dname: '【番茄肉酱意大利面】',
                        descrp: '这是开胃清蒸虾的描述...好吃好吃...',
                        price: 12,
                        lis: "这是番茄肉酱意大利面的详情...其实，感恩并不难，在父母眼中只要你理解他们，甚至只是当他们与你说话时你能着着他们而不是老盯着电视，当他们关心你时只要跟着答应而不是一味的顶撞，可我们连这点儿根本就算不上是感恩的要求都达不到，还何谈感恩。"
                    },

                    {
                        sm_pic: 'img/7_7.jpg',
                        bg_pic: 'img/7.jpg',
                        dname: '【小米椒爆炒小公鸡】',
                        descrp: '三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽',
                        price: 12,
                        lis: "这是小米椒爆炒小公鸡的详情..站在历史的海岸漫溯那一道道历史沟渠：楚大夫沉吟泽畔，九死不悔；魏武帝扬鞭东指，壮心不已；陶渊明悠然南山，饮酒采菊„„他们选择了永恒，纵然谄媚诬蔑视听，也不随其流扬其波，这是执著的选择；纵然马革裹尸，魂归狼烟，这是豪壮的选择；纵然一身清苦，终日难饱，也愿怡然自乐，躬耕陇亩，这是高雅的选择。在一番选择中，帝王将相成其盖世伟业，贤士迁客成其千古文章。"
                    }

                ]
            }
            }
            }
            </script>

main3.vue里改成如下：

 <template>
            <div class="main1">
                <img :src="MainImgs" alt="这是一张图片，请您返回点餐页面">
                <div class="fanhui-m1 bg_clo">{{ming}}</div>
                 <div class="left m4-auto">
                    <router-link to="/main2"  class="btn btn-info btn-lg">返回点餐页面</router-link>
                    </div>
                    <div class="left m4-auto">
                     <router-link  :to="{name:'game2',params:{m4Tname:tname+'的'}}" class="btn btn-warning btn-lg">购买{{tname}}</router-link>
                </div>
            </div>
        </template>
        <script>
        export default{
        data:function(){
            return{
                MainImgs:"",
                ming:"",
                tname:""
            }
        },
        beforeMount:function(){
            var MainImg=this.$route.params.imge.slice(10);
            this.MainImgs='src/assets'+MainImg;
            this.ming=this.$route.params.lis;
            this.tname=this.$route.params.mname;
            // //接受Mains的传过来的值
        }
    }
    </script>

main4.vue里改成如下：

 <template>
         <form class="mains">
            <h2>{{m4tname}}订单信息：</h2>
            <div class="input-group input-group-lg">
                    <span class="input-group-addon">姓名:</span>
                    <input type="text" @blur="onuserInput()" class="form-control" v-model="userInput" placeholder="请输入您的姓名">
            </div>
            <p id="text1">请输入正确的姓名，只限2-5位汉字</p>
            <div class="input-group input-group-lg">
                    <span class="input-group-addon">手机号:</span>
                    <input type="text" @blur="onphoneInput()" class="form-control" v-model="phoneInput" placeholder="请输入您的手机号">
            </div>
             <p id="text2">请输入正确的手机号</p>
            <div class="input-group  input-group-lg">
                    <span class="input-group-addon">地址:</span>
                    <input type="text" @blur="onaddrInput" class="form-control" v-model="addrInput" placeholder="请输入您的地址">
            </div>
             <p id="text3">请输入正确的地址</p>
            <div class="left m4-auto">
                <button type="button" class="btn btn-primary btn-lg" @click="testReg()">确认订单</button>
            </div>
            <div class="left m4-auto">
                 <button  @click="rese()" type="button" class="btn btn-success btn-lg">修改订单</button>
            </div>

         </form>
         </template>
         <script>
         export default{
        data:function(){
            return{
                userInput:"",
                phoneInput:"",
                addrInput:"",
                m4tname:""
            }
        },
        beforeMount:function(){
            this.m4tname=this.$route.params.m4Tname;
        },
        methods:{
            rese:function(){
                delIpu();
                alert('订单已重置,请您重新填写');
            },
//            姓名验证
            onuserInput:function(){
                var reg=/^[\u4E00-\uFA29]{2,5}$/;
                var text1=document.getElementById("text1");
                if(reg.test(this.userInput)){
                    text1.innerHTML='正确'
                    return true
                }else if(this.userInput==""){
                    text1.innerHTML='姓名不能为空'
                    return false
                }else{
                    text1.innerHTML='格式错误，请输入正确的姓名，只限2-5位汉字'
                    return false
                }
            },
//            手机号验证
                onphoneInput:function (){
                    var reg=/^1[34578]\d{9}$/;
                    var text2=document.getElementById("text2");
                    if(reg.test(this.phoneInput)){
                        text2.innerHTML='正确'
                        return true
                    }else if(this.phoneInput==""){
                        text2.innerHTML='手机号不能为空'
                        return false
                    }else {
                        text2.innerHTML='格式错误，请输入正确的国内大陆11位手机号'
                        return false
                    }
                },
            //            地址验证
            onaddrInput:function(){
                var reg=/^[\u4E00-\uFA29]|[0-9]{2,5}$/;
                var text3=document.getElementById("text3");
                if(reg.test(this.addrInput)){
                    text3.innerHTML='正确'
                    return true
                }else if(this.addrInput==""){
                    text3.innerHTML='地址不能为空'
                    return false
                }else {
                    text3.innerHTML='格式错误'
                    return false
                }
            },
            testReg:function(){
                if(this.onuserInput()&&this.onphoneInput()&&this.onaddrInput()){
                    this.$router.push("/main2");
                }else{
                    alert("填写不正确，请重新填写");
                     delIpu();
                }
            }
        }
        }
    </script>

main5.vue里改成如下：

<template>
     <div class="main5s">
            <h3>点餐成功！</h3>
            <router-link to="/main2" style="text-decoration: underline;">点击跳转..</router-link>
            <p><span id="time"></span>秒后返回点餐页面..</p>
     </div>
</template>
<script>
export default{
        mounted:function(){
            dianji(5)
        }
        }
 </script>

这样就算把components里的组件修改完成了。然后就是想办法怎么让他显示在页面上。
首先需要在index.html里写：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>dome02</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
      
        *{
        padding: 0;
        margin: 0;
    }
    .main{
        margin: auto;
    }
    a{
        text-decoration: none;
        color: black;
    }
    a:hover{
        text-decoration: blink;
    }
    /*main2*/
    .main ul{
        display: block;
        margin: auto;
        text-align: -webkit-center;
    }
    .main1{
        width: 900px;
        margin: auto;
    }
    .main1 img{
        width: 600px;
        display: block;
        margin: auto;
    }
    h1{
        text-align: center;
        margin-bottom: 10px;
    }
    li{
        width: 900px;
        list-style: none;
        margin-top: 20px;
        border:solid 1px #ccc;
        padding:10px;
        border-radius: 5px;
        overflow: hidden;
    }
    .left{
        float: left;
    }
    .right{
        float: left;
        margin-left: 50px;
        text-align: left;
    }
    .right p{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    /*main3*/
    .fanhui-m1{
        display: inline-block;
        width: 922px;
        padding: 20px;
        text-align: center;
        background: #1ea8aa;
        text-decoration: none;
        color: #fff;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .fanhui-m2{
        display: inline-block;
        padding: 10px;
        text-align: center;
        background: #1ea8aa;
        font-size: 18px;
        text-decoration: none;
        color: #fff;
        margin-top: 20px;
    }
    .block{
        display: block;
    }
    .bg_clo{
        background: #ffd810;
        color: #000;
    }
    /*main4*/
    .mains{
        width: 700px;
        margin: auto;
    }
    .input-group{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .m4-auto{
        width: 50%;
        text-align: center;
    }
    /*main5*/
    .fw{
        font-weight:bold;
        font-size: 20px;
    }
    .main5s{
        width: 700px;
        height: 200px;
        margin: auto;
        padding-top: 40px;
        background: #e0ff72;
        text-align: center;
    }
      </style>
  </head>
  <body>
    <div id="app"></div>
    <script>
    function delIpu(){
        var inp=document.querySelectorAll('input');
        for(var i=0;i<inp.length;i++){
            inp[i].value='';
        }
    }
//
    function dianji(n){
        var num=n;
        var time=document.getElementById('time');
        time.innerHTML=num;
        name = setInterval(function() {
            num--;
            console.log(num);
            time.innerHTML=num;
            if(num==0){
                clearInterval(name);
                window.location ='http://ansonznl.coding.me/vue-router-dome01/#/main2'
            }
        }, 1000)}
</script>
    <script src="/dist/build.js"></script>
  </body>
</html>

因为我尽量减少把代码的复制粘贴，所以就把js和css写在index.html里了。如需外引请自便，

然后我们修改src=>App.vue里的内容：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后修改src=> mian.js里的内容：

import Vue from 'vue'
import vueRouter from "vue-router"
import App from './App.vue'
//银排至路由
import routerConfig from "./router.config.js"



Vue.use(vueRouter)
//用vueRouter//暴露
const myRouter=new vueRouter(routerConfig)
new Vue({
  el: '#app',
  render: h => h(App),
    router:myRouter
})

然后在src里新建一个配置路由的文件，文件名就取router.config.js吧修改为：

//配置路由
import Main1 from "./components/main1.vue"
import Main2 from "./components/main2.vue"
import Main3 from "./components/main3.vue"
import Main4 from "./components/main4.vue"
import Main5 from "./components/main5.vue"

export default{
    // 暴露文件
routes:[
    {path:"/main1",component:Main1},
    {path:"/main2",component:Main2},
    {name:"game1",path:"/main3",component:Main3},
    {name:"game2",path:"/main4",component:Main4},
    {name:"game3",path:"/main5",component:Main5},
    {path:"/",component:Main1}
]
}

最后你应该吧main2.vue里的文件所用的图片放上去，放到src=>assets文件里：

image.png

当然图片不重要。路径和名字一样就行

然后执行cnpm run dev就OK了
最后一步，把dist文件编译出来。不编译出来的话只能在服务器看到的。编译出来可直接打开。
下载webpack ···cnpm install webpack -g···
执行webpack
发现目录中多了一个dist文件就对了。
然后把index.html里的倒数第三行
<script src="/dist/build.js"></script>
改为
<script src="dist/build.js"></script>
就OK了。关掉git bash
直接打开index.html 就可以看到了

vue-router-dome使用webpack 打包过程

vue-router做的 饿了不 webpack 打包过程

vue-router做的饿了不 webpack 打包过程