詳解vue+vueRouter+webpack的簡單實(shí)例

2019-11-19 16:19:00

字體：大中小

供稿：網(wǎng)友

最近vue更新的2.0版本，唉，我是在2.0版本前學(xué)習(xí)的，現(xiàn)在更新了又要看一遍了，關(guān)鍵是我之前看了3個(gè)星期2.0就更新了，vux還沒同步更新，導(dǎo)致我用vux時(shí)要將vue的版本降回1.x，vue-router也要降回1.0才能使用~~~所以今天就寫一個(gè)單頁的下方tabbar的實(shí)例來記錄一下吧，也希望各位在用vue全家桶時(shí)少點(diǎn)坑吧，當(dāng)然不是用vux= =…只是仿造而已

這里的demo我會(huì)使用vue2.0的simple-template作為腳手架，vue-router版本也是2.0的，如果想使用vux作為組件庫的話，大家就降版本吧~哦對了，如果大家正式寫項(xiàng)目的話，記得要用vuex，不是開玩笑，我之前寫了個(gè)簡單的單頁應(yīng)用就沒用vuex也沒用組件庫都是手寫，然后組件之間的通信各種煩，你能想象一直向上廣播事件$boardCast之后，再一直向下分發(fā) $emit的無語嗎……到最后自己都亂了，所以不是自己寫demo而是開始項(xiàng)目的話還是推薦使用vuex了，用過react的同學(xué)的話就知道了，vuex跟redux是一樣的~只是一個(gè)用于vue，一個(gè)用于react而已.

好了，開始構(gòu)建吧~

Prerequisites: Node.js (>=4.x, 6.x preferred) and Git.

前提當(dāng)然是裝了node且版本已經(jīng)升級為6.x，在尤大大的vue-cli的使用教程中有說明的，對這里我們是采用自動(dòng)化構(gòu)建的方式創(chuàng)建配置模板

首先從零開始，打開打算創(chuàng)建的項(xiàng)目根目錄，再打開git的命令行吧~

1、全局安裝vue-cli腳手架

npm install -g vue-cli

2、初始化webpack+vue的腳手架模板，這里我是用的簡化版模板，不帶單元測試的~因?yàn)槎喑鰜淼暮芏辔铱床欢?簡化版的我大概能看懂，也是我菜的原因= =…

vue init webpack-simple <project-name> 這里我定個(gè)名字就叫test吧

vue init webpack-simple test

3、按照步驟來就好

cd test

npm install 這里會(huì)安裝babel、vue的加載器等各類依賴,這里要等一會(huì)，有點(diǎn)慢

npm run dev 這里跑一下本地文件，看看是否搭建完成，如果出現(xiàn)vue的頁面就完畢了

4、安裝vue-router與需要的組件庫，這里我裝一個(gè)餓了么的組件庫ElementUI吧,地址http://element.eleme.io/，因?yàn)橐呀?jīng)兼容了vue2.0的版本，所以暫時(shí)拿來用用吧~官方文檔齊全，需要什么自己去看吧，我這里就簡單用一點(diǎn)

npm install vue-router npm i element-ui -D

5、記得安裝css的加載器，如果你是用less或者sass的話，自己對應(yīng)裝了添加到加載器就好
npm install style-loader css-loader 如果沒錯(cuò)的話，你的加載器現(xiàn)在應(yīng)該是這樣的，最后在package.json里面依賴文件要加上element-ui

//package.json"dependencies": { "element-ui": "^1.0.4", "vue": "^2.1.0" }//webpack.config.jsmodule: { rules: [  {  test: //.vue$/,  loader: 'vue-loader',  options: {   // vue-loader options go here  }  },  {  test: //.js$/,  loader: 'babel-loader',  exclude: /node_modules/  },  {  test: //.css$/,  loader: 'style-loader!css-loader'  },  {//添上這條規(guī)則，這是elementUI要用到的  test: //.(eot|svg|ttf|woff|woff2)(/?/S*)?$/,  loader: 'file-loader'  },  {  test: //.(png|jpg|gif|svg)$/,  loader: 'file-loader',  options: {   name: '[name].[ext]?[hash]'  }  } ] }

6、分模塊，寫組件
下面先展示我的文件目錄

testdist build.jsnode_modules …src App.vuediscovery.vueindex.vueinfo.vuemain.jssetting.vue.babelrc.gitignoreindex.htmlpackage.jsonREADME.mdwebpack.config.js

//App.vue（這里仿制vux的下方tabbar寫了一個(gè)組件,所以有點(diǎn)多，代碼有點(diǎn)爛，請?jiān)彛?lt;template> <div id="app"> <router-view></router-view> <div class="tabbar" @click="select">  <router-link :class="{'selected':indexPage === 'index'}" to="/index">  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_button.png" alt="">  <label>主頁</label>  </router-link>  <router-link :class="{'selected':indexPage === 'info'}" to="/info">  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_msg.png" alt="">  <label>信息</label>  </router-link>  <router-link :class="{'selected':indexPage === 'discovery'}" to="/discovery">  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_article.png" alt="">  <label>發(fā)現(xiàn)</label>  </router-link>  <router-link :class="{'selected':indexPage === 'setting'}" to="/setting">  <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_cell.png" alt="">  <label>設(shè)置</label>  </router-link> </div> </div></template><script> export default { name: 'app', data () {  return {  radio:'1',  indexPage:'index'  } }, methods:{  select(event){  function findA(target){   if(target.nodeName != 'A'){   return findA(target.parentNode)   }   return target;  }  var modules = findA(event.target).lastElementChild.innerHTML;  if(modules == '主頁'){   this.indexPage='index';  }  else if(modules == '信息'){   this.indexPage='info';  }  else if(modules == '發(fā)現(xiàn)'){   this.indexPage='discovery';  }  else if(modules == '設(shè)置'){   this.indexPage='setting';  }  } } }</script><style> html,body{ margin:0; padding:0; } #app { font-family: 'microsoft yahei', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } .tabbar{ position: fixed; bottom:0; display: flex; width:100%; height:55px; flex-direction:row; background: rgba(247,247,250,.9); font-size:12px; } .tabbar:before{ content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #979797; color: #979797; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(.5); transform: scaleY(.5); background-color: white; } .tabbar a{ flex:1; color: #888; } .tabbar a img{ display: block; width:24px; height:24px; margin:3px auto; padding-top:5px; } .selected{ color: #09bb07 !important; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { text-decoration: none; }</style>

//index.vue(主頁模塊，套了一點(diǎn)elementUI，有點(diǎn)東西好看點(diǎn)= =..)<template> <div>  <h3>我是主頁模塊</h3>  <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">   <el-menu-item index="1">處理中心</el-menu-item>   <el-submenu index="2">    <template slot="title">我的工作臺(tái)</template>    <el-menu-item index="2-1">選項(xiàng)1</el-menu-item>    <el-menu-item index="2-2">選項(xiàng)2</el-menu-item>    <el-menu-item index="2-3">選項(xiàng)3</el-menu-item>   </el-submenu>   <el-menu-item index="3">訂單管理</el-menu-item>  </el-menu> </div></template><script> export default {  methods:{   handleSelect:function(key,keyPath){    console.log(key,keyPath);   }  } }</script>

//info.vue(主頁模塊，套了一點(diǎn)elementUI，有點(diǎn)東西好看點(diǎn)= =..)<template> <h3>{{msg}}</h3> <div>  <el-alert    title="成功提示的文案"    type="success">  </el-alert>  <el-alert    title="消息提示的文案"    type="info">  </el-alert>  <el-alert    title="警告提示的文案"    type="warning">  </el-alert>  <el-alert    title="錯(cuò)誤提示的文案"    type="error">  </el-alert> </div></template><script> export default {  data(){   return {    msg:'我是信息模塊'   }  } }</script>

//discovery.vue(發(fā)現(xiàn)模塊)<template> <div>  <h2>{{msg}}</h2>  <el-steps :space="100" :active="active" finish-status="success">   <el-step title="步驟 1"></el-step>   <el-step title="步驟 2"></el-step>   <el-step title="步驟 3"></el-step>  </el-steps>  <el-button style="margin-top: 12px;" @click="next">下一步</el-button> </div></template><script> export default {  data(){   return {    active:0,    msg:'我是發(fā)現(xiàn)模塊'   }  },  methods:{   next:function(){    if(this.active++ > 2) this.active = 0   }  } }</script>

//setting.vue(設(shè)置模塊)<template> <div class="block">  <h3>{{msg}}</h3>  <el-rate    v-model="value2"    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"    :allow-half="true">  </el-rate>  <span>{{value2}}</span> </div></template><script> export default {  data() {   return {    value2: null,    msg:'我是設(shè)置模塊'   }  } }</script>

//main.js(主文件，聲明全局router)import Vue from 'vue'import Router from 'vue-router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'import App from './App.vue'import index from './index.vue'import info from './info.vue'import discovery from './discovery.vue'import setting from './setting.vue'Vue.use(Router);Vue.use(ElementUI);const router = new Router({ routes:[ {  path:'/',  component:index }, {  path:'/index',  component:index }, {  path:'/info',  component:info }, {  path:'/discovery',  component:discovery }, {  path:'/setting',  component:setting } ]});new Vue({  el: '#app',  render: h => h(App), router:router});

最后就是webpack的入口文件必然是要改成main.js的，出口文件的文件夾為dist,名字就你自己定了，在index.html里加上就好~具體可以在我的另一篇筆記”初識(shí)webpack “中有寫過

最后npm run dev 查看效果就ok~如果想改綁定的端口號(hào)或者主機(jī)號(hào)，則在package.json中對應(yīng)改就好

example:

"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --port 8181 --open --inline --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }

其中端口號(hào)是dev中的 --port <port>,主機(jī)號(hào)則為--host <hostname/ip>就比如我這里則綁定的為8181端口。

最后給大家展示一下效果圖吧~沒看過vue-router的同學(xué)請自行看文檔= =…我這里只是最基礎(chǔ)的展示了而已