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 就可以看到了
文章转载于:https://www.jianshu.com/p/52b67c585c9c
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~